* {
     padding:0;
     margin:0;
     box-sizing:border-box;
     font-family: "Roboto", sans-serif;
}


html {
        scroll-behavior:smooth;
}


body {
       max-width:100vw;
       overflow-x:hidden; 
}



nav {
     height:80px;
     display:flex;
}

img {
      width:100%;
}

p {
       line-height:1.5;;
}

a {
       text-decoration:none;
}

a:hover {
       text-decoration:underline;
}

.nav__container {
     width:100%;
     max-width:1200px;
     padding:0 24px;
     display:flex;
     justify-content:space-between;
     align-items:center;
     margin:0 auto; 
}

.purple {
   color:#7342d6;
}

.logo {
     width:160px;
}


ul {
     display:flex;
}

li {
   list-style-type:none; 
}

.nav__link {
     margin-left:16px;
     text-decoration:none;
     font-size:20px;
     color:#7342d6;
     font-weight:bold;
     padding:8px;
}

.nav__link:hover {
     text-decoration:underline;
}

.nav__link--primary {
     border:2px solid #7342d6;
     border-radius:4px;
}

.nav__link--primary:hover{
      text-decoration:none;
}


.btn__menu {
        background-color:transparent;;
        font-size: 40px;
        text-align:center;
        border:none;
        color:#7342d6;
        display:none;
}


.btn__menu--close {
        position:absolute;
        right:20px;
        top:10px;
        padding:8px;
        color:white;
}
.menu__backdrop {
        position:absolute;
        background-color:#242424;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:100;
        display:flex; 
        justify-content: center;
        align-items: center;
        opacity:0;
        transition:all 300ms ease;
        visibility:hidden;
}

.menu--open .menu__backdrop {
       visibility:visible;
       opacity:1;
} 

.menu--open {
        max-height:100vh;
        overflow-y:hidden;
}


.menu__links {
        display: flex;
        flex-direction:column;
        align-items: center;
}

.menu__list {
        padding:32px 0;
}

.menu__link {
        color:white;
        font-size:40px;
}

/* 
 
Landing
*/

#landing {
      background-color: rgba(115, 66, 214, 0.1);
}

header {
      height:calc(150vh - 80px);
      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction:column;
      gap:2rem;
}

 
.header__container {
      width:100%;
      max-width:720px;
      margin:0 auto;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:2rem;
      padding-top:24px;
}

.header__description {
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content: center;
}

h1 {
      font-size:56px;
      color:#7342d6;
      margin-bottom:24px;
      text-align:center;
}

h2 {
      text-align:center;
      font-size:32px;
      margin-bottom:32px;
      text-align:center;
 
}

button {
      cursor:pointer;
      
}

button:active {
      transform:translateY(1px);
}

.btn {
      background-color:#7342d6;
      color:white;
      padding:12px 24px;
      font-size:20px;
      border-radius:4px;
      border:none;
}

.header__img--wrapper {
     padding:20px;
     z-index:2;
}



.row {
      width:100%;
      max-width:1200px;
      margin:0 auto;
}

.row__column {
       display:flex;
       flex-direction:column;
       align-items: center;
}

#highlights {
    position:relative;
    max-width:100vw;
}


/* Highlights */


#highlights:before {
      background:url("assets/wave.svg");
      content: "";
      position:absolute;
      top:1px;
      left:0;
      transform:translateY(-100%);
      width:101vw;
      height:12vw;
      background-size:cover;
      background-repeat:no-repeat;
      z-index:1; 
}

#highlights:after {
      background:url("assets/wave.svg");
      content: "";
      position:absolute;
      left:0;
      bottom:1px;
      transform:translateY(100%) rotate(180deg);
      width:101vw;
      height:12vw;
      background-size:cover;
      background-repeat:no-repeat;
      z-index:1; 
}

.container {
    padding:56px 0;
}

.row {
    width:100%;
    max-width:1200px;
    margin:0 auto;   
}

.highlight_wrapper {
       display:flex;
      flex-wrap:wrap;
}

.highlight {
       padding:0 24px;
       width:calc(100% / 3);
       display:flex;
       flex-direction:column;
       align-items: center;
       text-align:center;
}


.highlight__subtitle{
    font-size:30px;
    text-align:center;
}

.highlight__para {
       margin-top:20px;
       font-size:15px;
       max-width:280px;;
}


.highlight__img {
       border : 2px solid #7342d6;
       width: 100px;
       height: 100px;
       display:flex;
       align-items: center;
       justify-content: center;
       border-radius:4px;
       font-size:30px;
       cursor:pointer;
       margin-bottom:24px;
}

#highlights i {
     color:#7342d6;
}


/* Features */


#features {
       padding-top:8vw;
       background-color:rgba(115,66,214,0.1);
}

.books {
       display:flex;
       flex-wrap:wrap;
}

.book {
       width:25%;
       padding:24px;
}


.book__img {
       max-height:380px;
       transition:all 300ms ease;
       cursor:no-allowed;
}

.book__img--wrapper {
       margin-bottom:8px;
       border-radius:4px;
       overflow:hidden;
}

.book:hover .book__img {
       transform: scale(1.3);
}

.book__title {
       font-size:20px;
       margin-bottom:8px;
}

.book__title:hover {
       text-decoration:underline;
       cursor:no-allowed;
}

.book__ratings {
       margin-bottom:8px;
       color:#fabf2a;
}


.book__price {
       text-decoration:line-through;
       padding-right:6px;
       color:#bfbfbf;
}


/* Explore */



#explore {
       background-color:rgba(115,66,214,0.1);
}


/* Footer */

footer {
       background-color:#242424;
}

.footer__logo {
       display:flex;
}

.footer__logo--img {
       width:160px;
       filter:grayscale(1) invert(1);
}

.footer__link,
.footer__copyright  {
       color:#fff;
}


.footer__list {
       margin:20px 0 24px 0 ;
}

.footer__link {
       padding:0 8px;
}

.no-cursor {
       cursor:none;
}


/* Small Phones Tablets Large SmartPhones */

@media (max-width:768px) {

       body {
               overflow-x:hidden;
       }
        .header__description {
               padding:0 24px;
        }

        h1 {
               font-size:40px;;
        }

        h2 {
               font-size: 26px;
        }

       button {
               font-size:18px;
       }

       .book {
               width:50%;
       }

      .footer__list {
         display:flex;
         justify-content:center;
      }
}


/* Small Phones Large SmartPhones */

@media (max-width:550px) {
      .nav__link {
        display:none;
      }

      .btn__menu {
        display:block;
      }

      .highlight {
        width:100%;
      }

      .highlight:not(:last-child) {
        margin-bottom:24px;;
      }
}