@keyframes selectContact {
    from {background-color: #333333;}
    to {background-color: #ffaaff;}
}
@keyframes unselectContact {
    from {background-color: #ffaaff;}
    to {background-color: #333333;}
}

a, a:visited {
    color:#ffaaff;
}

.contacts a:not(:hover), .secondary-contacts a:not(:hover) {
    animation-name: unselectContact;
    animation-duration: 500ms;
}
.contacts a:hover, .secondary-contacts a:hover {
    animation-name: selectContact;
    animation-duration: 500ms;
    animation-fill-mode: forwards;
}
.contacts a {
    margin:5px;
    width:40px;
    height:40px;
    padding:20px;
    background-color: #333333;
    border-radius:50%;
}
.contacts img {
    width:40px;
    height:40px;
    filter:invert(1);
}
.secondary-contacts a {
    margin:5px;
    width:20px;
    height:20px;
    padding:10px;
    background-color: #333333;
    border-radius:50%;
}
.secondary-contacts img {
    width:20px;
    height:20px;
    filter:invert(1);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    background-color: black;
    padding: 0%;
    margin: 0%
}
.main {
    width:50%;
    height:50%;
    position:absolute;
    left: 30%;
    top: 50%;
    transform: translate(-30%, -50%);
}
.contacts, .secondary-contacts {
    display: flex;
    flex-direction: row;
}
.sidebar {
    width: 10%;
    height: 100%;
    position: absolute;
    border:#333333 dotted;
    text-align: center;
}

@media (max-width: 50rem) or (max-height: 40rem) {
    .main { top:27.5% }
    body {font-size: smaller;}
    .contacts a {width:30px; height:30px; margin:5px; padding:15px;}
    .contacts img {width:30px; height:30px;}
    .secondary-contacts a {width:15px; height:15px; margin:5px; padding:10px;}
    .secondary-contacts img {width:15px; height:15px;}
}
.help-cursor {
    cursor: help;
}