@font-face {
  font-family: Grape-Soda;
  src: url(/assets/fonts/GrapeSoda.ttf);
}

@font-face {
  font-family: Boiled-Pasta;
  src: url(/assets/fonts/BoiledPasta.ttf);
}

html { 
    overflow-y: hidden; 
}

body {
    background-color: #d4cbe9;
}

h1 {
    font-size: 7vh;
    margin-bottom: auto;
    margin-top: auto;
    font-family: Grape-Soda;
    text-align: center;
    position: relative;
    color: rgb(40, 38, 38);
}

h2 {
    font-size: 5vh;
    font-family: Boiled-Pasta;
    font-style: italic;
    text-align: center;
    color: rgb(40, 38, 38);
}


footer {
    position: fixed;
    bottom: 2%;
    left: 30%;
    width: 40%;
}

#socials {
    display: grid;
    justify-content: space-around;
    grid-auto-flow: column;
}

@keyframes soleil-levant {
  from {
    transform: translate(-50%, -40%);
  }
  to {
    transform: translate(-50%, -50%);
  }
}

@keyframes alpha {
  from {
    color: #d4cbe9;
  }
  to {
    color: rgb(40, 38, 38);
  }
}

#artwork-viewer {
    position: absolute;
    left: 50%;
    top: 53%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0px 15px 20px #7b735c);
    animation: 4s linear 0s infinite alternate soleil-levant;
}

#art

.artwork-div {
    font-size: 5vh;
    font-family: Boiled-Pasta;
    font-style: italic;
    text-align: center;
    color: rgb(40, 38, 38);
    animation: 4s linear 0s infinite alternate alpha;
    
}

#artwork-image{
    width:50%;
    height:50%;
    transform: translate(50%, 0%);
}