* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


:root {
  --white: #f5f3e3ff;
  --white_old: #ecebe5ff;
  --lightgrey: #818d91ff;
  --grey: #292f31ff;
  --darkgrey: #1c1f20ff;
  --darkgrey_old: #19191aff;
  --dkp_grey: #27292bff;
  --black: #161617ff;
  --orange:#ff7430ff;
  --orange_animation: #ff7b3bcc;
  --green: #00deafff;

  --white_desat: #ecebe5ff;
  --white_desat_bright: #ffffffff;
  --light-orange: #ff894fff;

  --text_size_normal: 1rem;
  --text_size_normal_mobile: 1rem;
}


@font-face {
  font-family: 'Eurostile_Normal';
  src: url('fonts/EurostileLTProUnicode.ttf') format('opentype');
}

@font-face {
  font-family: 'Eurostile_Bold';
  src: url('fonts/EurostileLTProUnicode-Bold.ttf') format('opentype');
}

@font-face {
  font-family: 'Eurostile_BoldOblique';
  src: url('fonts/EurostileLTProUnicode-BoldOblique.ttf') format('opentype');
}

@font-face {
  font-family: 'Eurostile_Demi';
  src: url('fonts/EurostileLTProUnicode-Demi.ttf') format('opentype');
}

@font-face {
  font-family: 'Eurostile_DemiOblique';
  src: url('fonts/EurostileLTProUnicode-DemiOblique.ttf') format('opentype');
}

@font-face {
  font-family: 'Eurostile_Oblique';
  src: url('fonts/EurostileLTProUnicode-Oblique.ttf') format('opentype');
}

@font-face {
  font-family: 'Limelight';
  src: url('fonts/Limelight.ttf') format('opentype');
}

.vhs_overlay {
  width: 100vw;
  height: 100vh;
  background-image: url("pictures/vhs_overlay.gif");
  background-size: 100vw;
}

.plastic_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-repeat: repeat;
  background-size: 100%;
  background-image: url("pictures/roughness_overlay.jpg");
  opacity: 0.05;
  mix-blend-mode: lighten;
  pointer-events: none;
}


main {
  margin-top: 70px;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Eurostile_Normal', sans-serif;
  font-weight: normal;
  background: var(--darkgrey);
  color: var(--white);
  position: relative;
  display:flex;
  flex-direction:column;
}

header {
  z-index: 1000;
  position: fixed;
  width: 100vw;
  height: 70px;
  background-color: var(--darkgrey);
  padding: 0px 40px 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Eurostile_Normal;
  border-bottom: 1px solid var(--black);
  box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.5);
}

header nav {
  display: flex;
  align-items: center;
  gap: 4rem;
  height: 40px;
}

nav a {
  text-decoration: none;
  color: var(--white);
  font-size: 0.9rem;
  text-transform: uppercase;
  transition: color 0.3s;
  padding-top: 0px;


}

nav a:hover {
  color: var(--orange);
}

.header_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.header_logo_image {
  width: 15vw;
  min-width: 400px;
}

.social_media_button_link_cursor {
  padding: 4px;
  display: flex;
  align-items: center;
}
.social_media_button_image {
  color: var(--white);
  transition: 0.3s all;

}

.social_media_button_image:hover {
  color: var(--green);
  scale: 110%;
}


.category_headline {
  padding-top: 90px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: right;
  font-family: Eurostile_Normal, sans-serif;
  font-size: 2rem;
}



footer {
  height: 40px;
  background-color: var(--darkgrey);
  font-family: Eurostile_Normal;
  font-weight: 100;
  font-size: 0.7rem;
  color: var(--orange);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
  margin-top: auto;
}

.footer_left {
}

.footer_right {
  display: flex;
  justify-content: space-between;
}

.footer_right a {
  margin-left: 40px;
  text-decoration: none;
  color: var(--orange);
  transition: color 0.3s;

}

.footer_right a:hover {
  color: var(--white);
}







@media screen and (max-width: 1000px) {
  header {
    width: 100vw;
    height: 70px;
    padding-right: 0px;
    padding-left: 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .header_logo {
    padding-top: 6px;
  }

  .header_logo_image {
    width: 95vw;
    max-width: 600px;
    min-width: 200px; 
  }

  header nav {
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 100vw;
    gap: 5vw;
  }

  nav a {
    font-size: min(4.3vw, 25px)
  }

  nav a:hover {
    color: var(--white);
  }

  .social_media_button_link_cursor {
    padding: 0px 0px 0px 0px;
  }

  .social_media_button_image {
    height: min(4.9vw, 25px);
  }
  .social_media_button_image:hover {
    color: var(--white);
    scale: 100%;
  }

  .category_headline {
    font-size: 2rem;
  }



  footer {
    height: 70px;
    flex-direction: column-reverse;
    padding: 10px 0px;
    justify-content: space-around;
    font-size: 0.7rem;
  }

  .footer_right a {
    margin: 0px 10px 0px 10px;
  }

  .footer_right a:hover {
    color: var(--orange);
  }
}