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


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;
}

#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;

}

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


.highlight__subtitle{
    font-size:30px;
}

.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;
}