@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
/* universal styling */
*{
    margin: 0 auto;
    
}
  ::-webkit-scrollbar-thumb{
    width: 10px;
    background: var(--grey);
  }
:root{
    --green:#f7fff7;
    --blue:#02239a;
    --yellow:#ffe66d;
    --white:#f1f3f9; 
    --black:#180126;
    --grey:#7E7A8F;
    --navtext:#C3C7D2;
    --dmsans:'DM Sans', sans-serif; 
    --aqua:#4bb8d8;
    --teal:#2c8daa;
  }
ul{
    list-style: none;
}
button{
    width: 200px;
    height: 40px;
    display: inline;
}
body{
    font-family: var(--dmsans);
    height: auto;
    position: absolute;
}
@media screen and (min-width: 1024px), (max-width: 1600px) {
    main{
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
    }
    /* header styling */
    .header{
        background-color:var(--blue);
        width: 100%;
        height:85px;
        display: flex;
        flex-direction: column;
    }
    .header h1{
        margin-left:43%;
        padding-top:50px;
        font-family: DM Sans;
        font-style: normal;
        font-weight: bold;
        font-size: 37px;
        line-height: 48px;
        /* identical to box height */
        text-align: center;
        color: #FFFFFF;
        position: relative;
        bottom: 24px;
    }
    .header nav{
        position: relative;
        bottom: 57px;
        left: 0px;
        font-size:20px;
        margin-left:63%;
    }
    .header a{
        text-decoration:none;
        color: #FFFFFF;
        margin-left: 39px;
        font-family: var(--dmsans);
        font-size: 16px;
        font-style: normal;
        font-weight: normal;
        border: 2px soild none;
        padding: 5px;
    }
    .header a:hover{
        border: 2px var(--yellow) solid;
    }
    #layer1{
        position: relative;
        z-index: 0;
      }
      
      .triangles{
      display:flex; 
      justify-content:center;
      overflow:hidden;
      position: static;
      }
      
      .triangle1{
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 30vh 114vh 0 0;
      border-color: var(--teal) transparent transparent transparent;
      }
      
      
      .triangle2{
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 113vh 30vh 0;
      border-color: transparent var(--aqua) transparent transparent;
      overflow:hidden;
      }
    /* header styling */
    section{
        display: flex;
        flex-direction: row;
        position: relative;
        top: 0px;
        padding: 100px;
    }
    .left img{
        width: 550px;
        height: 350px;
    }
    .left i{
        position: relative;
        left: 260px;
        
    }
    .right{
        padding-left: 25px;
    }
    .perks{
        line-height: 23px;
    }
    .starIcons span{
        width: 44px;
        height: 38px;
        color: #FAD862;
    
    }
    .productAbout{
        font-family: DM Sans;
        font-style: normal;
        font-weight: bold;
        font-size: 13px;
        line-height: 17px;
        list-style-type: circle;
    }
    .buyButton button{
        background-color: var(--yellow);
        color: var(--green);
        font-family: DM Sans;
        font-style: normal;
        font-weight: bold;
        font-size: 18px;
        border: none;
        margin-left: 39px;
        margin-top: 20px;
    }
    .buyButton .rightB{
        background-color: #CD8C0FBD;
    }
    
    footer{
        position: fixed;
        width: 100%;
        height: 2.5rem;
        bottom: 0px;
        left: 0px;
        background-color: #1938A7;
        display: flex;
      }
      footer .socialIcons{
        margin-left:44%;
        padding-top:1%;
      }
      footer a{
        padding:1em;
      }
}