html, body {
    height: 100%;
}

* {
    margin: 0;
}

body {
    background: url(bg.compressed.jpg) fixed center repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#container {
    height: 50%;
    display: flex;
    flex-direction: column;

}

#cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-color: rgba(0,0,0,0.5);
}

#title {
    font-family: 'Pacifico', cursive;
    color: #FFFFFF;
    font-size: 56px;
    font-weight: 300;
    text-shadow: 2px 2px 5px rgb(0, 0, 0);
    z-index: 1;
    flex: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

#subtitle {
    font-family: 'Kaushan Script', cursive;
    font-size: 28px;
    color: #FFFFFF;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.33);
    flex: 2;
    text-align: center;
}

#links {
    flex: 1;
    display: flex;
    justify-content: space-around;
}

.link-icon {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-size: contain;
}

#esp-link {
    background-image: url(esptrainer-icon.jpg);
}

#soundwave-link {
    background-image: url(soundwave-icon.png);
}

/* fonts */

/* latin-ext */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: local('Kaushan Script'), local('KaushanScript-Regular'), url(kaushanscript.woff2), url(https://fonts.gstatic.com/s/kaushanscript/v5/qx1LSqts-NtiKcLw4N03IO87R-l0-Xx_7cYc0ZX1ifE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: local('Kaushan Script'), local('KaushanScript-Regular'), url(kaushanscript.woff2), url(https://fonts.gstatic.com/s/kaushanscript/v5/qx1LSqts-NtiKcLw4N03IEd0sm1ffa_JvZxsF_BEwQk.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

/* latin-ext */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(pacifico.woff2), url(https://fonts.gstatic.com/s/pacifico/v9/6RfRbOG3yn4TnWVTc898ERTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(pacifico.woff2), url(https://fonts.gstatic.com/s/pacifico/v9/Q_Z9mv4hySLTMoMjnk_rCfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}