/* --- SOCIAL LINKS --- */

.media-button {  
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
    display: flex;  
    align-items: center;  
    justify-content: flex-start;  
    background-color: #181818;  
    border: 1px solid #333;  
    border-radius: 0.5rem;  
    width: 80px;  
    height: 80px;  
    padding-left: 16px;  
    padding-right: 16px;  
    color: #ccc;  
    text-decoration: none;  
    transition: width 0.3s ease, color 0.2s, box-shadow 0.2s;  
    overflow: hidden;  
    cursor: pointer;  
    box-sizing: border-box;  
    position: relative;
    margin-bottom: 1rem;  
}  
  
.media-button:hover {  
    width: 45%;
    color: white;  
    box-shadow: 0 0 10px #0f0;  
}  
  
.media-logo {  
    width: 48px;  
    height: 48px;  
    object-fit: contain;  
}  
  
.media-name {  
    position: absolute;  
    left: 80px;  
    font-size: 1.1rem;  
    font-weight: bold;  
    color: #0ff;  
    white-space: nowrap;  
    user-select: none;  
    opacity: 0;  
    transition: opacity 0.3s ease;  
}  
  
.media-button:hover .media-name {  
    opacity: 1;
}

/* --- MEDIA --- */
@media (max-width: 850px) {
	.media-name {
		opacity: 1;
	}
	.media-button {
		width: 210px;
	}
	.media-button:hover {
		width: 210px;
	}
	.account-name {
		display: none;
	}
}

@media (min-width: 850px) {
	.media-button:hover {
		width: 450px;
	}
}