@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Freckle+Face&family=Roboto+Slab:wght@100..900&family=Stack+Sans+Notch:wght@200..700&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

 * {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;

 }

 body {
     /* background-color: #0B1F17; */
     /* background-color: #0F172A */
     /* background-color: #09090B; */
     /* background-color: #0F172A; */
     background-color: #1E40AF;
 }

 section {
     display: flex;
 }

 .left {
     position: absolute;
     top: 5px;
     width: 24.5vw;
     height: 97.5vh;
     background-color: #bda9ec;
     /* background: linear-gradient(135deg, #2775c3, #bda9ec); */
     /* background: linear-gradient(135deg,
             #82d09e,
             #94defe,
             #bfa6f9); */

     border-radius: 8px;
     box-shadow: 0 0 5px wheat;
     left: -100%;
     transition: all .5s ease-in-out;
     z-index: 10;
     border: 2px solid #09090B;
 }

 .cancel {
     position: absolute;
     top: 3px;
     right: 4px;
     box-shadow: 0 0 6px;
     border-radius: 95px;
     align-items: center;
     align-content: center;
     background-color: #59a9b6;
     /* background: linear-gradient(135deg,
             #fb25e9,
             #7dffb1,
             #f16e5a,
             rgb(6, 6, 255)); */

     padding: 10px 10px 8px 12px;
     cursor: pointer;
     border: 2px solid #065F46;
 }

 .cancel>* {
     filter: invert(1);
 }

 .cancel:hover {
     background-color: #40838e;
 }

 .book {
     display: flex;
     align-items: center;
     gap: 5px;
     box-shadow: 0 0 5px white;
     padding-bottom: 15px;
     border-radius: 8px;
     margin-bottom: 10px;
 }

 #learn {
     font-weight: bold;
     font-family: "Stack Sans Notch", sans-serif;
     font-optical-sizing: auto;
     color: rgb(0, 0, 0);
     text-shadow: 0 0 5px white;
     font-size: 22px;
 }

 .library {
     display: flex;
     gap: 10px;
     align-items: center;
     font-family: "Work Sans", sans-serif;
     margin-bottom: 10px;
 }

 .library h2 {
     text-shadow: 0 0 5px white;
 }

 .subject {
     gap: 1px;
     text-shadow: 0 0 5px white;
 }

 .subject img:nth-child(3):hover {
     cursor: pointer;
     transition: .6s ease-in-out;
     scale: calc(1.4);
     rotate: calc(360deg);
 }

 .part {
     margin-left: 6px;
     margin-right: 6px;
     gap: 2px;
     border-bottom: 1px solid gray;
     padding-bottom: 4px;
     min-height: 2px;
 }

 .part span {
     text-shadow: 0 0 5px white;
 }

 .part:hover {
     padding-bottom: 15px;
     transition: .6s ease-in-out;
     cursor: pointer;
 }

 .part img:nth-child(3):hover {
     cursor: pointer;
     padding-bottom: 10px;
     transition: .6s ease-in-out;
     scale: calc(1.1);
     rotate: calc(360deg);
 }

 .parts {
     display: none;
     animation: animate .56s ease-out;
 }

 #sub {
     display: none;
     flex-direction: column;
     margin-left: 10px;
     margin-bottom: 10px;
     padding-bottom: 10px;
     border-bottom: 1px solid gray;
     margin-right: 6px;
     animation: animate .56s ease-out;
 }

 #sub ol li {
     font-size: 12px;
     font-weight: 500;
     margin-bottom: 5px;
     text-shadow: 0 0 5px white;
 }
 #sub ol li:hover{
    font-weight: bold;
    text-shadow: 0 0 15px white;
    scale: calc(1.05);
    transition: all .4s ease-in-out;
 }

 #arrowRight1 img {
     animation: animate2 0.9s ease-in infinite ;
 }
 #arrowRight2 img {
     animation: animate2 1s ease-in-out infinite alternate;
 }

 @keyframes animate {
     from {
         opacity: 0;
         transform: translateY(-100px);
     }

     to {
         opacity: 1;
         filter: blur(0);
         transform: translateY(0px);
     }
 }

 @keyframes animate2 {
     from {
         transform: translateX(0px);
     }

     to {
         transform: translatex(60px);
     }
 }


 header {
     position: absolute;
     background-color: #05c08b;
 }

 .navigation {
     position: fixed;
     z-index: 1;
     top: 1px;
     width: 99vw;
     left: 0;
     height: 40px;
     background-color: #8B5CF6;
     border: 1px solid gray;
     border-radius: 8px;
     padding: 5px 5px 0 5px;
     transition: all .5s ease;
     box-shadow: 0 0 8px black;
     border: 2px solid gray;

 }

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

 li {
     list-style: none;
     cursor: pointer;
 }

 #dark-mode {
     background-color: rgba(213, 210, 210, 0.822);
     border-radius: 70px;
     /* padding: 3px 5px 0px 5px; */
     padding: 0 3px 0 1px;
     box-shadow: 0 0 9px white;
     width: 32px;
     height: 36px;
 }

 .container {
     /* display: flex; */
     padding: 10px;
     position: fixed;
     width: 97.4vw;
     top: 52px;
     left: 7px;
     height: 81vh;
     margin-right: 28px;
     /* background: linear-gradient(135deg, #2775c3, #02b930); */
     /* background-color: #111827; */
     background-color: #38BDF8;
     border: 2px solid gray;
     border-radius: 8px;
     box-shadow: 0 0 5px wheat;
     margin-top: 58px;
     transition: all .5s ease-in-out;

 }

 .card {
     height: 198px;
     width: 142px;
     background-color: gray;
     border: 1px solid black;
     border-radius: 21px;
     cursor: pointer;
     box-shadow: 0 0 5px;
 }

 .card:hover {
     border: 2px solid white;
     box-shadow: 0 10px 25px rgba(32, 31, 31, 0.6);
     animation: shake 0.3s
 }

 .card img {
     object-position: center;
     object-fit: cover;
     border-radius: 8px;
     width: 100%;
     height: 100%;
 }

 .content {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.3);
     justify-content: center;
     align-items: center;
     z-index: 20;
     animation: shake 0.3s;
 }

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

 .sms {
     background-color: white;
     /* background: linear-gradient(135deg, #f8f9fa, #b90285); */
     border-radius: 10px;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
     width: 300px;
     display: flex;
     flex-direction: column;
     padding: 20px;
     align-items: center;

 }

 #ok {
     width: 70px;
     height: 30px;
     border-radius: 6px;
     font-weight: bold;
     margin-top: 10px;
     background-color: rgb(90, 246, 55);
     cursor: pointer;
     border: none;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }

 #ok:hover {
     background-color: green;
     color: white;
 }

 .btn {
     display: flex;
     align-items: center;
     align-content: center;
     justify-content: center;
     gap: 6px;

 }

 .btn button {
     cursor: pointer;
     border-radius: 23px;
     box-shadow: 0 0px 6px rgb(142, 140, 140);
     border: none;
     background-color: white;
     padding: 8px 18px;
     color: #0B1F17;
     border: 1px solid #065F46;
 }

 .btn button:hover {
     font-weight: bold;
     border: 1px solid #065F46;
     box-shadow: 0 0 10px rgb(121, 121, 121);
     background-color: #e5fbf3;
     font-family: Arial;
 }

 .signup {
     color: rgb(5, 5, 5);
     font-size: 15px;
 }

 .signup:hover {
     color: black;
     cursor: pointer;
     font-weight: bold;
 }

 .pscroll {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-right: 10px;
 }

 .scrolling {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
     z-index: 5;
     gap: 30px;
     padding: 16px 0 10px 10px;
     width: 100%;
     height: 15vw;
     background-color: #2563EB;
     border-radius: 10px;
     overflow-x: auto;
     overflow-y: hidden;
     box-shadow: 0 0 8px rgba(76, 77, 77, 0.6);
     border: 2px solid black;
 }

 /* ------------------------------------------------------- */
 @media (max-width: 800px) {
     .scrolling {
         height: 29vw;
     }

     .navigation {
         width: 97.8vw;
     }

     .container {
         width: 94.6vw;
     }

     .book {
         flex-direction: column;
         width: 165px;
         align-items: start;
         padding-left: 5px;
     }
 }

 @media (max-width: 450px) {
     .scrolling {
         height: 50vw;
     }

     .container {
         height: 83.4vh;
         display: block;
         width: 93.5vw;
         left: 1.2px;
     }

     .navigation {
         width: 96.8vw;
         margin-top: -1px;
     }

     .left {
         height: 90.4vh;
         width: 98.4vw;
         margin-top: -3px;
     }
 }
 .second{
    width: 100%;
    min-height: 210px;
    /* background-color: #021132; */
    margin-top: 20px;
    overflow-x: scroll;
    /* border: 2px solid black; */
    border-radius: 10px;
    align-items: center;
 }
 .second .card{
    margin: 10px;
    display: flex;
    gap: 27px;
 }