@font-face {
    font-family: "IMFellEnglish";
    src: url("/fonts/IM_Fell_English_SC/IMFellEnglishSC-Regular.ttf");
}
@font-face{
    font-family: "cinzel";
    src: url("/fonts/Cinzel/static/Cinzel-Bold.ttf");
}
body{
    background-color: #253846;
    margin: 0 0;
}

body:after{
    position:absolute;
    top: 0;
    pointer-events: none;
    animation: grain 1s steps(10) infinite;
    content: "";
    background-image: url("/img/paper_texture.png");
    height:300%;
    width:300%;
    left: -50%;
    opacity: 0.7;
    mix-blend-mode:color-burn;
    position: fixed;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, -5%) }
  30% { transform:translate(-7%, -25%) }
  40% { transform:translate(-1%, -15%) }
  50% { transform:translate(-15%, -10%) }
  60% { transform:translate(-10%, 0%) }
  70% { transform:translate(0%, -15%) }
  80% { transform:translate(-5%, -35%) }
  90% { transform:translate(-10%, -10%) }
}

#index{
    position: relative;
    display: flex;
    justify-content: center;
}
#background{
    position: absolute;
    display: block;
    width: 38rem;
    margin: 0 auto;
    margin-top: 1rem;
    height: auto;
    opacity: 100%;
}

#content{
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 0 10px;
    padding: 0;
}
#title-container{
    background-color: #c0b19355;
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    column-gap: 2rem;
}
.title{
    font-family: "cinzel";
    font-size: 2.5rem;
    color: #3d4349ef;
    margin-bottom: -1rem;
    margin-top: 0.2rem;
    padding-bottom: 0;
    padding-top: 0;
}
#links{
    position:relative;
    width: 30rem;
    height:  30rem;
    /*border: red 2px solid;*/
    margin-top: 1rem;
}
.link{
    position:absolute;
    top: 0;
    left: 0;
    width: 9rem;
    opacity: 50%;
    /*border: red 2px solid;*/
}
.link:hover{
    opacity: 100%;
    animation: jiggle 1s alternate ease-out infinite;
}
@keyframes jiggle {
    from{
        width: 9rem;
    }
    to{
        width: 9.5rem;
    }
}
#moon{
    position: absolute;
    top: 10rem;
    left: -5rem;
    width: 10rem;
    animation: spin 480s linear infinite; 
}
#moon:active{
    animation: spin 1s linear infinite;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
#saturn{
    position: absolute;
    width:15rem;
    top: 25rem;
    left: 50rem;
    animation: tilt 15s alternate infinite;
}
@keyframes tilt {
    0%{ transform: rotate(10deg);}
    100%{transform: rotate(-5deg);}
}


#mon{
    transform-origin: center;
    transform: translateY(0rem) translateX(10.5rem) rotate(0deg);
}
#mon2{
    transform-origin: center;
    transform: translateY(5rem) translateX(0rem) rotate(-60deg);
}
#mon3{
    transform-origin: center;
    transform: translateY(17rem) translateX(0rem) rotate(60deg) ;
}
#mon4{
    transform-origin: center;
    transform: translateY(22.189rem) translateX(10.5rem) rotate(0deg) ;
}
#mon5{
    transform-origin: center;
    transform: translateY(17rem) translateX(21rem) rotate(-60deg) ;
}
#mon6{
    transform-origin: center;
    transform: translateY(5rem) translateX(21rem) rotate(60deg) ;
}