/*** cascading style sheet for the home page text ***/


@font-face {
   font-family: BebasNeue-Regular;
    src: url("../fonts/BebasNeue-Regular.ttf");

}

@font-face{

    font-family: PaybAck;
    src: url("../fonts/PaybAck.ttf");
}


.TBS_text, .est{
  /** https://www.w3schools.com/cssref/css3_pr_user-select.asp **/
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
  clear: both;
  position: absolute;
  transition: 0.5s;
}

.TBS_text{
  margin-top: 15%;
  margin-left: 30%;
  line-height: 20px;
}

.est{
  font-size: 40px;
  color: rgba(255, 102, 0, 0.9);
  text-shadow: 2px 3px 12px #000000;
  display: block;
}

.TBS_text h1, .TBS_text h3, .est h3{
    font-family: BebasNeue-Regular;
    text-align: center;
}

.TBS_text h1{
  font-size: 120px;
  letter-spacing: 5px;
  margin-right: 330px;
}

.TBS_text h1 span{
  color: rgba(255, 102, 0, 0.9);
  text-shadow: 2px 3px 12px #000000;
}

.TBS_text h3{
  font-size: 60px;
}

.TBS_text span{
  color: blue;
}


#text2{

  position: absolute;
  margin-left: 40%;
  top: 0px;
  animation: flyin 1.5s ease-in forwards;
  transition: 0.3s;
}

@keyframes flyin {

    0%{
      opacity: 0%;
      transform: scale(0, 0);
    }

    60%{
      margin-left: 10px;
      opacity: 1%;
      transform: scale(0, 1);
    }

    100%{
      transition: 2.5s;
      text-shadow: 2px 3px 12px orange;
    }
}

/**   Future Screen Changes on screen resize
@keyframes flyin {
    0%{

      opacity: 0%;


      transform: rotate(0deg);

      -moz-rotate(0deg);

      -webkit-rotate(0deg);

      -o-rotate(0deg);

      -ms-rotate(0deg);

      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

    60%{
       opacity: 1%;
      transition: 3s;
      transform: rotate(45deg);
     -moz-rotate(45deg);
     -ms-rotate(45deg);
     -webkit-rotate(45deg);
     -o-rotate(45deg);
    }

    100%{
      text-shadow: 2px 2px 13px orange;
      transform: rotate(90deg);
     -moz-rotate(90deg);
     -ms-rotate(90deg);
     -webkit-rotate(90deg);
     -o-rotate(90deg);
    }
}

**/









/**


Different Screen Sizes



**/



/** 27" screen size. I've got a 26" screen **/
@media screen and (max-width: 2560px){

  .est{
    margin-left: 85%;
    top: 85%;
  }

}


/** 13" Macbook - HTML & CSS Design and build websites,
by Jon Duckett page 377- 378 **/
@media screen and (max-width: 1280px){

  .TBS_text{
    margin-left: 22%;
  }

  .est{
    margin-left: 85%;
    top: 82%;
  }


}

/** iPad2 screen size, 9.7" **/
@media screen and (max-width: 1024px){

  .TBS_text{
    margin-left: 15%;
  }

  .est{
    margin-left: 82%;
    top: 80%;
  }


}

@media screen and (max-width: 960px){

  .TBS_text{
    margin-top: 15%;
    margin-left: 12%;
  }

  .est{
    margin-left: 78%;
    top: 78%;
  }

}

/** not switching location when screen size changes */
@media only screen and (max-width: 750px){
/** this is when hamburger comes into view **/

  .TBS_text{
    margin-top: 10%;
    margin-left: 8%;
  }

  .TBS_text h1{
    font-size: 85px;
  }
  .TBS_text h3{
    display: none;
  }

  #text2{
      font-size: 70px;
      padding-top: 5px;
      top: 48%;
      margin-left: -10%;
  }

  /** .est{
    margin-left: 80%;
    top: 75%;
    height: 80px;
    transition: 0.5;
    font-size: 30px;
  }
**/
  .est{
    top: 87%;
    margin-left: 82%;
    font-size: 25px;
  }

/** https://css-tricks.com/snippets/css/text-rotation/
    shows syntax for how to get rotation to work
    across different types of browsers,

    going to be used in the future, once I figure out
    how to rotate text as the screen size changes, without
    automatically refreshing the browser **/

}/** end of @media 750px **/


@media screen and (max-width: 600px){
  .TBS_text{
    margin-top: 22%;
    margin-left: 16%;
  }

  .TBS_text h1, #text2{
    font-size: 70px;
  }

  .est{
    display: none;
  }
}


@media screen and (max-width: 420px){

  .TBS_text h1, #text2{
    font-size: 50px;
  }
}


/** smallest screen size iPhone 5, 320px wide,
iPhone models between 375 - 414px **/
@media screen and (max-width: 320px){
  .TBS_text{
    display: none;
  }
}
