:root {
    --fg-color1: #373e8f;
    --fg-color2: #1e2251;
    --bg-color: #dfe0f4;
}

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

body {
    background-color: var(--bg-color);
    color: var(--fg-color1);
    font-family: 'Encode Sans Expanded', sans-serif;
}

#body {
    display: flex;
    flex-direction: column;
    /*justify-content: space-evenly;*/
    align-items: center;
    gap: 3rem;
    margin: 0 auto;
    padding: 0 3%;
    max-width: 50rem;
    width: 94%;
    min-height: 100%;
/*    background-color: inherit;
    background-image: url('img/DSC09005_bw.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: multiply;*/
}

#body > div {
    width: 60%;
    text-align: center;
    font-family: 'Encode Sans Condensed', sans-serif;
    font-weight: 400;
}

header.logo {
    display: block;
    background-image: url('./img/maethi_logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 1rem;
    width: 60%;
    padding-top: 21%;
    max-width: 30rem;
}

nav.social {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    gap: 4px;
    width: 95%;
}

nav.social > a {
    display: block;
    font-size: 3rem;
    text-decoration: none;
    color: inherit;
}

nav.social > a:active, nav.social > a:hover {
    color: var(--fg-color2);
}

.yt-embed {
    width: 100%;
}

/* icon font */

@font-face {
  font-family: 'maethi-social';
  src:  url('fonts/maethi-social.eot?ywqonv');
  src:  url('fonts/maethi-social.eot?ywqonv#iefix') format('embedded-opentype'),
    url('fonts/maethi-social.ttf?ywqonv') format('truetype'),
    url('fonts/maethi-social.woff?ywqonv') format('woff'),
    url('fonts/maethi-social.svg?ywqonv#maethi-social') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="maesoc-icon-"], [class*=" maesoc-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'maethi-social' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.maesoc-icon-email:before {
  content: "\e900";
}
.maesoc-icon-facebook:before {
  content: "\e901";
}
.maesoc-icon-instagram:before {
  content: "\e902";
}
.maesoc-icon-spotify:before {
  content: "\e903";
}
.maesoc-icon-telegram:before {
  content: "\e904";
}
.maesoc-icon-youtube:before {
  content: "\e905";
}