@font-face {
    font-family:'LemonMilk';
    src: url(lemon_milk/LEMONMILK-Bold.otf) format(opentype); 
}

@font-face {
  font-family:'Blacksword';
  src: url(blacksword/Blacksword.otf) format(opentype);
}

@font-face {
  font-family: 'VogaMedium';
  src: url(voga_medium/Voga-Medium.otf) format(opentype);
}


main {
    max-width: 1500px;
  }
  section {
    max-width: 1000px;
    margin: 10px auto;
    padding: 0 20px;
  }
  img {
    width: 100%;
  }
  figure {
    width: 25%;
    margin: auto;
  }
  /* Overrides desktop style when viewport is less than 600px (for smart phones) */
  @media only screen and (max-width: 600px) {
    body {
        font-size: 16px;
    }
  }

  body {
    background-color: rgb(27, 26, 26);
  }


#img {
    opacity: 0.3;
    position: absolute;
    max-height: 1080px;
}

.parent {
    display:flex;
    background-color: rgb(0, 0, 0);
    opacity: 0.8;
    position:absolute;
    text-align:center;
    top:15vh;
    left: 50vh;
    right:50vh;
    font-size: 50px;
    padding: 50px;
    max-width: 800px;
    height:auto;
    min-width: 30vh;
    line-height: 3;
    border-width: 2px;
    border-color: black;
    

}
/*
.quote {
    display:flex;
    background-color: transparent;
    max-width:100%;
    height:auto;
    position:relative;
    flex-grow: 1;
    flex-shrink:1;
    font-family: VogaMedium;
    animation:jump 0.5s ease;
    
}
@keyframes jump {
  0% {transform:translateY(0);}
  50% {transform: translateY(-30px);}
  100% {transform: translateY(0);}
}

*/

.quote {
  display: flex;
  background-color: transparent;
  max-width: 100%;
  height: auto;
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  font-family: VogaMedium;
  color:white;
}

.quote:hover {
  animation: jump 0.5s ease; /* Apply animation only on hover */
}

@keyframes jump {
  0% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-30px);
  }
  100% {
      transform: translateY(0);
  }
}








#words {
    flex-shrink: 1;
}

.author {
    position:absolute;
    width: 40%;
    background-color:lightgray;
    left:30%;
    bottom: -10%;
    font-family: Blacksword;
    font-size: 30px;

}

  /*.quote {
    
    background-color: rgb(10, 10, 10);
    padding: 30px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 80px;
    font-weight: light;
    line-height: 120px;
    text-align: center;
    position:relative;
    left: 100px;
    right: 100px;
    color:white;
  }

  .author {
    width: 50%;
    background-color: lightblue;
    padding:30px;
    text-align:center;
    position: relative;
    top:50vh;
    left: 25%;
    }

*/