body{
  /* background-image: url("images/backgroundTexture_deepRed.png");
  background-size: 720px; */
/*
  background-image: url("Fabric082B_1K-JPG_Color.jpg");
  background-size: 480px;
  background-color: red;
  background-blend-mode: hard-light; 
*/
margin:0;
height:100vh;
}

#content{
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.background{
  width:100vw;
  height:100vh;
  position: relative;
  z-index: -1;
  transition: 1.5s;
  /* filter:blur(5px); */
}

#mainBackground{
  background-image: url("images/backgroundTexture_deepRed.png");
  background-size: 720px;
  position: fixed;
  top: 0%;
}

#centerPiece:hover ~ #mainBackground{
  filter:blur(2px);
}
/* 
.link:hover ~ .link{
  filter:blur(5px);
} */

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

#mainLogo:hover{
    filter: drop-shadow(5px 5px 0px white);
    scale:1.1;
    padding: 10px;
}

@keyframes wobble {
  
  25%  {transform: rotate(5deg);}
  75% {transform: rotate(-5deg);}

}

#centerPiece{
    display: flex;
    flex-flow: column-reverse nowrap;
    align-items: center;
    /*
    height:50vh;
    */
    /* position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%); */
    justify-content: center;
    height: 100%;
    width: 100%;

    div{
      margin:10px;
    }
    
}

#mainLogoContainer{
  width:50vmax;
  max-width: min(70vmin,40vmax);
  transition:0.3s;
}


#homePageLinks{
    display:flex;
    flex-direction: column;
    transition: 0.3s;
    height:auto;

    .link{
      transition: 0.3s;
      height:100%;
    }

    div{
        display: flex;
    }
    div:hover{
      animation: tilt-n-move-shaking .2s infinite;
    }
    a{
        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;
        text-align: center;
        transition: 1s
cubic-bezier( 0.645, 0.045, 0.355, 1 );
        width:100%;
        margin:1vh;
        text-shadow: 2px 2px 0px white;
    }
    a:hover{
        text-decoration: underline wavy 2px ;
        text-shadow: 5px 5px 0px white;
        scale:1.1;
        padding: 10px;
    }
}

@media (min-width: 600px) and (orientation:landscape)  {
  #centerPiece{
    flex-direction: row;
    div{
      margin: 0px;
    }
  }

  #homePageLinks{
    a{
        text-align: right;
        font-size:8vmin;
        margin:2vh;
    }
  }
}

#externalLinksContainer{
  bottom: 0;
  padding: 10px;
  display: flex;
  /* left:50%;
  transform: translate(-50%,0%); */
  justify-content: center;

  .socialLink{
    width: 64px;
    height: 64px;
    margin:10px;
    transition:1s;
    filter: drop-shadow(2px 2px 0px white);

    img{
      width: 100%;
      height: 100%;
    }

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

}

@media (orientation:portrait)  {
  .hideOnMobile{
    /*display: none !important;
    */
    max-height: 0 !important;
    transform: scale(0);
    overflow:hidden;
  }
  #externalLinksContainer{
    .socialLink{
      width: 12vw;
      height: 12vw;
    }
  }
}