html, body {
    height: 100%;
    padding: 0;
    margin: 0;
}

body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to right top, #000000, #201119, #341b31, #432850, #453974, #453974, #453974, #453974, #432850, #341b31, #201119, #000000);
    font-family: Arial;
    color: white;
    /* Casio's font */
    font-family: EuroStyle, Calibri;
    font-size: 1.1em;
}

/* Casio's font */
@font-face {
    font-family: EuroStyle;
    src: url(font/EuroStyle.ttf);
}

h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 10px;
}

p {
    letter-spacing: 1px;
}

a {
    color: white;
    font-weight: bold;
}

.link-with-image {
    display: flex;
    align-items: center;
}

.link-with-image img {
    height: 18px;
    width: 18px;
    margin-right: 8px;
}

aside.top-left {
    position: absolute;
    top: 40px;
    left: 40px;
}

aside.bottom-right {
    position: absolute;
    bottom: 40px;
    right: 40px;
}

#SoundOnOff {
    cursor: pointer;
}

#SoundOn,
#SoundOff {
    height: 40px;
    width: 40px;
    display: none;
}

#SoundOnOff.on #SoundOn {
    display: block;
}

#SoundOnOff.off #SoundOff {
    display: block;
}

section {
    display: flex;
    justify-content: center;
    align-items: center;
}

.col {
    height: 40%;
    width: 30%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
}

.col:first-child {
    text-align: right;
}

svg {
    /* height: 550px;
    width: 550px; */
    height: auto;
    width: 40%;
    margin: 0 10px 0 10px;
    animation: shadow 10s infinite;
}

/* TODO: make this in JS class? */
#buttonL,
#buttonC,
#buttonA {
    opacity: 0;
}

#buttonL:hover,
#buttonC:hover,
#buttonA:hover {
    opacity: 0.1;
    cursor: pointer;
}

#buttonL:active,
#buttonC:active,
#buttonA:active {
    opacity: 0.2;
}

/* Casio's SVG outline glowing shadow effect */
@keyframes shadow {
    0%   {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .1));}
    10%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .3));}
    30%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .1));}
    40%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .3));}
    50%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .1));}
    72%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .1));}
    75%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .25));}
    78%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .1));}
    90%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .3));}
    98%  {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .3));}
    100% {filter: drop-shadow(0px 0px 10px rgba(161, 161, 161, .1));}
}