*{
    box-sizing: border-box;
    padding: 0px;
    margin: 0px;
}

body{
    background-color: #2A2A2A;
    display: flex;
    flex-direction: column;
    align-items: center;

}

/* nav styles */

nav{
    color: #EDEDED;
    font-family: "Hubot Sans", sans-serif;
    background-color: #111111d8;
    width: 100vw;
    padding-right: 26px;
    padding-left: 26px;
}

li{
    list-style: none;
}

.logo{
    color: yellow;
    /* color: #EDEDED; */
    font-size: 36px;
}

.nav-list{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-ul{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    letter-spacing: .1em;
    color: #EDEDED;
}

.nav-li{
    margin-left: 16px;
    cursor: pointer;
    transition: .2s linear;
    font-size: 1.4rem;
}

.nav-li:hover{
    color: rgb(0, 140, 255);
}

.nav-menu-bars{
    display: none;
  }






  /* main hero section */

  .main-section{
    color: #EDEDED;
    font-family: "Hubot Sans", sans-serif;
    max-width: 800px;
    height: 80vh;
    background-color: #11111190;
    border-radius: 16px;
    margin: 66px 40px 0px 40px;
    overflow: hidden;

  }

  .hero-introduction{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding:  0px 40px;
    height: 100%;
  }

  .main-hero-p-text{
    text-align: center;
    margin-top: 36px;
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: .1em;
  }

  .main-hero-h1-text{
    font-size: 6rem;
    font-weight: 900;
  }








/* media queries */

@media only screen and (max-width: 600px) {
  .nav-menu-bars{
    display: block;
  }
  .nav-menu-item{
    display: none;
  }
  .main-hero-h1-text{
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: .12em;
  }
  .main-hero-p-text{
    text-align: center;
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: .1em;
  }
  .main-section{
    margin: 66px 20px 0px 20px;

  }
  
}