*,
*::before,
*::after{
    box-sizing: border-box;
}

html{
    width: 100%;
}

body{
    background-color: black;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: center;
}

#mesaj{
    position: relative;
    top: 10vh;
    margin: 0 0 10vh 0;
}

#background{
  display: none;
  position: absolute;
  z-index: 2;
  user-select: none;
  /* jank */
  width: auto;
  height: 85%;
}

#gifts{
  display: flex;
  width: 90%;
  justify-content: space-around;
  flex-direction: row;
}

#gift-focus{
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

#greenscreen-canvas{
  width: 100vw;
  height: 100vh; 
  max-width: 100vw;
  max-height: 100vh;
}

body, html{
  margin: 0;
  padding: 0;
  overflow-x: hidden; 
  overflow-y: hidden; 
  width: 100vw;
  height: 100vh;
}

h1{
    color: #ffffff;
    text-align: center;
    font-size: 8vw;
    font-weight: 100;
    font-family: "Karbon";
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    -moz-animation: glow 1s ease-in-out infinite alternate;
      animation: glow 1s ease-in-out infinite alternate;
}

.header-letter {
  cursor: pointer;
  transition: font-family 0.6s;
}

@keyframes glow {
  from {
    text-shadow: 0 0 3px #fff, 0 0 7px #fff, 0 0 10px #bc13fe, 0 0 23px #bc13fe;
    /* text-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 20px #e60073, 0 0 30px #e60073; */
  }
  to {
      text-shadow: 0 0 5px #fff, 0 0 13px #fff, 0 0 21px #bc13fe, 0 0 35px #bc13fe;
      /* text-shadow: 0 0 5px #fff, 0 0 15px #ff4da6, 0 0 25px #ff4da6, 0 0 35px #ff4da6; */
  }
}

@media (max-width: 600px) {
  body, html{
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      overflow-y: auto; 
      width: 100vw;
      height: 100vh;
  }
  #mesaj{
      margin: 3vh 0 5vh 0;
      top: 5vh;
  }
  #birthday-header{
      font-size: 7vh;
      padding: 0 50px;
  }
  #gift-focus{
      overflow: hidden;
  }
  #background{
      height:52%;
      width: auto;
  }
  #gifts {
      flex-direction: column;
      align-items: center; 
  }
}

@font-face {
  font-family: 'Karbon';
  src: url('./fonts/karbon.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Plaisir';
  src: url('./fonts/plaisir.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
} 
@font-face {
  font-family: 'Heraldic';
  src: url('./fonts/Heraldic\ Shadows.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Cloestu';
  src: url('./fonts/Cloestu.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Curseyt';
  src: url('./fonts/Curseyt.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Death';
  src: url('./fonts/Deaths\ Hallows.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Hellshunx';
  src: url('./fonts/Hellshunx.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Marosdiac';
  src: url('./fonts/Marosdiac.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Mavient';
  src: url('./fonts/Mavient.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Snavirus';
  src: url('./fonts/Snavirus.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}