body{
    background-color:#cc0a25;
    margin: 0;
}

@font-face {
    font-family: Cosplay;
    src: url("fonts/Cosplay-Trial-Regular.otf") format("opentype");
}

@font-face {
    font-family: StackSansNotch;
    src: url("fonts/StackSansNotch-VariableFont_wght.ttf") format("truetype");
}

@keyframes tilt-n-move-shaking {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(1px, 1px) rotate(1deg); }
    50% { transform: translate(0, 0) rotate(0eg); }
    75% { transform: translate(-1px, 1px) rotate(-1deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }

.subpagecontainer {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  column-gap: 20px;
  row-gap: 2px;
  padding: 0%;
  margin: auto;
}

.subpagecontainer div {
  padding: 5px;
  margin: auto;
  text-align: center;
  /* font-size: min(4vw,1.25vh); */
  font-family:'StackSansNotch', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: center;
  line-height: 1.4em;
}

a{
    color:#f101e0;
}


/***** subpage menu stuff *****/

#subpageMenuBackground{
    background-image: 
        /* linear-gradient( 0deg,
            #cc0a25, 
            rgba(255, 255, 255, 0)
        ),  */
        url("images/backgroundTexture_deepRed.png");
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    opacity: .75;
    -webkit-mask-image: linear-gradient(to bottom, black 25%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 25%, transparent 100%);
    transition:.5s;
}

#subpageMenuContainer:hover > #subpageMenuBackground{
    opacity: 1;
}

#subpageMenuContainer{
    height: 64px;
    width:100vw;
    margin:0;
    position: fixed;
    top:0%;
    left:0%;
    align-content: center;
    z-index: 100;
}

#subpageMenu{
    font-size: min(8vw,4vh);
    font-family:'Cosplay', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
    color:black;
    text-transform: lowercase;

    display: flex;
    flex-flow: row;
    align-items: center;
    /*
    height:50vh;
    */
    justify-content: space-evenly;
    height: 100%;
    width:100%;
    max-width: 1200px;

    border:20px;
    text-shadow: 2px 2px 0px white;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);

    .subpageMenuItem{
        height:100%;
        align-content:center;
        transition: .5s;
        overflow: visible;
        opacity:0.5;
        transition:.5s;
    }

    .subpageMenuItem:hover{
        animation: tilt-n-move-shaking .2s infinite;
        opacity: 1;
        opacity:1;
        scale:1.1;
    }

    #menuLogo{
        opacity:.75;
        transition:.5s;
    }

    #menuLogo:hover{
        animation: tilt-n-move-shaking .2s infinite;
        opacity: 1;
        opacity:1;
        scale:1.1;
    }

    img{
        height: 100%;
        transition: 1.5s
        cubic-bezier( 0.645, 0.045, 0.355, 1 );
        filter: drop-shadow(2px 2px 0px white);
        object-fit: contain;
    }

    img:hover{
        filter: drop-shadow(5px 5px 0px white);
    }

    a{
        text-decoration: none;
        color:black;
        transition: 1s cubic-bezier( 0.645, 0.045, 0.355, 1 );
        margin: auto;
    }

    a:hover{
        text-decoration: underline wavy 2px ;
        text-shadow: 5px 5px 0px white;
    }
}

#pageContent{
    margin-top: 5%;
    margin-left: 10%;
    margin-right: 10%;
    margin-bottom: 5%;

    font-size: min(4vw,2vh);
    font-family:'StackSansNotch', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-align: center;
    line-height: 1.6em;
    
    h1{
        font-family: 'Cosplay', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        text-shadow: 2px 2px 0px white;
        text-align: center;
        transition: 1s cubic-bezier( 0.645, 0.045, 0.355, 1 );
    }

    h1:hover{
        text-decoration: underline wavy 2px;
        text-shadow: 5px 5px 0px white;
    }

    img {
    display: block;
    margin: auto;
    max-width: 100%;
    min-width: 50%;
    filter: drop-shadow(0px 6px 6px black);
    transition: transform 0.5s ease;
    }

    img:hover{
        transform: scale(1.1);
    }
}

#nourHead{
    position: fixed;
    bottom:16px;
    right:16px;
    width:64px;
    transition:.5s;
}


#nourHead:hover{
    animation: tilt-n-move-shaking .2s infinite;
    scale:1.1;
}

@media (orientation:portrait)  {
    #subpageMenu{
        .subpageMenuItem{
            display: none;
        }

        #menuLogo{
            display: block;
        }
    }

}