@font-face {
    font-family: Lato;
    src: url("/Lato-Hairline.ttf") format('truetype');
    }
    
    @font-face {
    font-family: Lato2;
    src: url("/Lato-Thin.ttf") format('truetype');
    } 
    
    body {
      background-image: url("/forest.jpeg");
      background-color: #117a65;
      background-repeat: no-repeat; 
      width: 100vw;
      height: auto;
      overflow: hidden;
    }
    
    img {
      width: 10vw; 
      float: left; 
      margin-left:4.5vw; 
      padding: 10px;
    }
    
    .glass {
      left: 0;
      margin-left: 20vw;
      position: absolute;
      width: 40vw;
      padding: 1vh;
      min-height: 100%;
      overflow: hidden;
      background-color: rgba( 39, 174, 96, 0.2);
      box-shadow: 0px 0px 40px 40px rgba(39, 174, 96, 0.2);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    
    h1 {
      margin-left: 5vw;
      color: white;
      font-size: 2.1vw;
      font-family: Lato;
      font-weight: 700;
    }
    
    .normal {
      margin-left: 5vw;
      color: white;
      font-size: 0.9rem;
      font-family: Arial;
      font-weight: lighter;
    }
    
    p2 {
      margin-left: 4vw;
      color: white;
      font-size: 0.9vw;
      font-family: Arial;
      font-weight: bold;
    }
    
    .decor {
      margin-left: 4vw;
      color: white;
      opacity: 0.8;
      font-size: 1vh;
      font-family: Arial;
      margin-top: 70vh;
    }
    
    button {
      border: none;
      background-color: white;
      margin-left: 5vw;
      font-size: 0.7vw;
      font-family: Arial;
      font-weight: bold;
      color: #117a65;
      position: absolute;
      height: 2vh;
      width: 4.7vw;
      left: 3vw;
      top: 13vh;
      transition:
      color 0.5s, 
      background-color 0.8s;
    }
    
    button:hover {
      color: white;
      background: none;
    }
    
    .text-box {
      width: 30vw;
      position: absolute;
      transition: opacity 0.8s;
    }
    
    .text-overflow {
      height:20vh ;
      width: 30vw;
      position: absolute;
      transition: opacity 0.8s;
      overflow:auto;
    }
    
    a {
      text-decoration: none;
      color: white;
      transition: color 0.7s, background 1s;
    }
    
    a:hover {
      color: #2ecc71;
      background-color: white;
    }
    
    @media only screen and (max-width: 1200px) {
      .glass {
        margin-left: 20vw;
        width: 60vw;
      }
      
      .text-box {
      width: 50vw;
    }
    
      p2 {
        font-size: 1.5vw;
      }
      
      h1 {
        margin-left: 5vw;
        color: white;
        font-size: 3vw;
        font-family: Lato;
        font-weight: 700;
    }
    }
    /*================
        mobile part 
    ==================*/
    
     @media only screen and (max-width: 700px) {
    
    img {
      width: 20vw; 
    }
    
    .glass {
      left: 0;
      margin-left: 0;
      position: absolute;
      width: 100vw;
      padding: 1vh;
      min-height: 100%;
      text-overflow: ellipsis;
    }
    
    .normal {
      margin-left: 2vw;
      
    }
    
    H1 {
      margin-left: 5.5vw;
      font-size: 2rem;
    }
    
    p2 {
      margin-left: 4vw;
      font-size: 1rem;
    }
    
    button {
      margin-left: 5vw;
      font-size: 3vw;
      height: 4vh;
      width: 15vw;
      left: 3vw;
      top: 9vh;
    }
    .text-box {
      width: 90vw;
      position: absolute;
      transition: opacity 0.8s;
    }
    
    .decor {
      margin-left: 2vw;
      color: white;
      opacity: 0.8;
      font-size: 1vh;
      font-family: Arial;
      margin-top: 73vh;
    }