@font-face {
  font-family: 'Routed Gothic';
  src: url('data/routed-gothic-ttf-v1.0.0 2') format('opentype');
}

main {
    font-family: "Open Sans", "Routed Gothic", sans-serif;;
    display : grid; 
    margin-left: 15%;
    margin-right: 17%;
    margin-top: 4vh;
    margin-bottom: 3vh;
}

#img {
    max-width: 300px;
    height: auto;
    position: absolute;
    z-index: -1;
}

#trash {
    position: fixed;
    bottom: 0;
    left: 60%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 100;
    
}

#trash img {
    width: 45vw;
    height: auto;
}


@media only screen and (min-width: 1025px) {
    body {
      h1 {
        font-size: 4vw;
        color: rgba(255, 199, 0, 1);
        stroke: black;
        stroke-width: 1pt;
        text-align: center;
        line-height: 0.6;
    	-webkit-text-stroke-width: 0.001px;
        -webkit-text-stroke-color: gray;}
      h2 {font-size: 2vw;
         font-weight: lighter;
         color: gray;}
      h3 {font-size: 1.5vw; color: gray;}
      h4 {font-size: 2vw; text-align: center; color: gray;}
      h5{font-size: 1.5vw; text-align: left; color: gray;}
    }
  }

  @media only screen and (min-width: 768px) and (max-width:1024px) {
    body {
        h1 {
          font-size: 4vw;
          color: rgba(255, 199, 0, 1);
          stroke: black;
          stroke-width: 1pt;
          text-align: center;
          line-height: 0.6;
          -webkit-text-stroke-width: 0.001px;
          -webkit-text-stroke-color: gray;}
        h2 {font-size: 2.5vw;
           font-weight: lighter;
           color: gray;}
        h3 {font-size: 2vw; color: gray;}
        h4 {font-size: 2.5vw; text-align: center; color: gray;}
        h5{font-size: 2vw; text-align: left; color: gray;}
      }

  }

@media only screen and (max-width:767px){
    /* For mobile phones: */
    body {
        /*max-width: 75%;*/
        h1 {font-size: 4vw; text-align: center; color: rgba(255, 199, 0, 1);
            -webkit-text-stroke-width: 0.02px;
            -webkit-text-stroke-color: gray;
            line-height: 0.6;
        }
        h2 {font-size: 4vw; font-weight:lighter; color:gray;}
        h3 {font-size: 3vw; color: gray;}
        h4 {font-size: 2vw; text-align: center; color: gray;}
        h5{font-size: 1.5vw; text-align: left; color: gray;}
        #trash img {
            width: 50vw;
        }
      }
  }