html{
    font-family:Impact, sans-serif;
}

a{
    text-decoration: none;
}

.navbar{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    height:100px;
    padding:20px;
}

.logo{
    flex-basis:70%;
  
}

.spat-factory-logo{
    max-width:100px;
}

.menu-item > a{
    letter-spacing: 2pt;
    color:black;
}

/*HOME PAGE*/

  #wrapper{
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top:20px;
      transition:0.5s;
  }

  #fence{
      position:relative;
      left:-80px;
  }

  .rando{
    background:black;
    position:absolute;
    transition:0.5s;
    border-radius:5px;
  }

  #message{
    position:absolute;
    top:80%;
    left:23%;
  }

  @media screen and (min-width:768px){
      .navbar{
          justify-content: center;
      }

      .logo{
          flex-basis:auto;
      }

      .menu-item{
          margin:20px;
      }

      #message{
          left:45%;
      }
  }

  /* .word{
    position:absolute;
    transition:0.5s ease;
    font-family:Futura;
    font-weight:200;
    }

    #message{
      font-family:'Rubik Mono One', sans-serif;
      font-size:5em;
      position:absolute;
      max-width:100%;
      color:orange;
      z-index: 2;
      overflow: auto;
      text-emphasis-style: double-circle;
    }

 @media screen and (min-width:1025px){
     #message{
        max-width: 80%;
        padding-left:10%;
     }
 } */

/*DESIGNS PAGE*/
#design-intro{
    margin-left:5%;
}

.shirt-gallery{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.shirt-gallery>a{
    color:black;
}

.shirt-pic {
    width:300px;
    height:400px;
    overflow: hidden;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    font-size:16px;
    font-family:Helvetica;
    font-weight:300;
    margin:20px;
    position:relative;
    box-shadow: 0px 0px 10px #888;
}



.shirt-pic > img{
    max-width: 100%;
    height:auto;
}


.shirt-pic:hover{
    filter:contrast(200%) grayscale(100%);
    transition:.3s;
}

.caption{
    position:absolute;
    top:90%;
}

.white{
    color:white;
    text-shadow:1px 1px black;
}

#old-school{
    height:250px;
}

#old-school-pic{
    top:50%;
}