.nav-iteam {
    font-family: "Oswald", sans-serif;
}

.nav-iteam:hover {
 color:blueviolet;
 transition: ease-in-out 0.2;
}

a:link {
   text-decoration:none;
}

a:visited {
    text-decoration: none;
    color:rgb(255, 251, 15);
}


body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align:center;
    font-family: sans-serif;
    background: rgb(0, 0, 0);
    }
    
    h1 {
        color: rgb(255, 255, 255);
        font-family: "Oswald", sans-serif;
        font-optical-sizing: auto;
        font-weight: weight;
        font-style: normal;
        font-size: 5em;
        text-align: center;
    }
    
    *{
    margin: 0px 0px;
    padding: 0;
     
    }
     
     body {
         background: rgb(0, 0, 0);
     }
        
     #cover-image {
        
         height: 400px;
         object-fit: cover;
         margin: 0px, 100px;
     }
     
     .main-image {
         height: 400px;
         object-fit: cover;
         margin: 0px, 100px;
     }
     
     h1 {
         color: rgb(255, 255, 255);
         font-family: "Oswald", sans-serif;
         font-optical-sizing: auto;
         font-weight: weight;
         font-style: normal;
         font-size: 5em;
         text-align: center;
    }
    
    
    input {
    display: none;
    }
    img {
    width: 100%;
    margin-top:15px;
    }
    h1 {
    font-size: 26px;
    }
    h2 {
    margin-top: 65px;
    font-size: 22px;
    }
    .book {
    display: flex;
    }
    #cover {
    width: 400px;
    height: 550px;
    }
    .flip-book {
    width: 400px;
    height: 550px;
    position: relative;
    perspective: 1500px;
    }
    .flip {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center left;
    transform-style: preserve-3d;
    transition: 0.5s;
    color: #000;
    border-left: 1px dashed #f0f0f0;
    }
    .front {
    position: absolute;
    width: 100%;
    height: 100%;
    border-left-style: dashed;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 13px;
    }
    
    .back {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background-color: #fff;
    }
    .next-btn {
    position: absolute;
    border: 0px solid black;
    border-radius: 10px;
    padding: 4px;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #000;
    }
    .back-btn {
    position: absolute;
    border: 0px solid black;
    border-radius: 10px;
    padding: 4px;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #000;
    }
    #p1 {
    z-index: 20;
    }
    #p2 {
    z-index: 19;
    }
    #p3 {
    z-index: 18;
    }
    #p4 {
    z-index: 17;
    }
    #p5 {
    z-index: 16;
    }
    
    #p6 {
    z-index: 15;
    }
    
    #p7 {
    z-index: 14;
    }
    
    #p8 {
    z-index: 13;
    }
    
    #p9 {
    z-index: 12;
    }
    
    #p10 {
    z-index: 11;
    }
    
    #p11 {
    z-index: 10;
    }
    
    #p12 {
    z-index: 9;
    }
    
    #p13 {
    z-index: 8;
    }
    
    #p14 {
    z-index: 7;
    }
    
    #p15 {
    z-index: 6;
    }
        
    #p16 {
    z-index: 5;
    }
        
    #p17 {
    z-index: 4;
    }
        
    #p18 {
    z-index: 3;
    }
        
    #p19 {
    z-index: 2;
    }
        
    #p20 {
    z-index: 1;
    }
    
    
    #c1:checked ~ .flip-book #p1 {
    transform: rotateY(-180deg);
    z-index: 1;
    }
    #c2:checked ~ .flip-book #p2 {
    transform: rotateY(-180deg);
    z-index: 2;
    }
    #c3:checked ~ .flip-book #p3 {
    transform: rotateY(-180deg);
    z-index: 3;
    }
    #c4:checked ~ .flip-book #p4 {
    transform: rotateY(-180deg);
    z-index: 4;
    }
    #c5:checked ~ .flip-book #p5 {
    transform: rotateY(-180deg);
    z-index: 5;
    }
    
    #c6:checked ~ .flip-book #p6 {
    transform: rotateY(-180deg);
    z-index: 6;
    }
    
    #c7:checked ~ .flip-book #p7 {
    transform: rotateY(-180deg);
    z-index: 7;
    }
    
    #c8:checked ~ .flip-book #p8 {
    transform: rotateY(-180deg);
    z-index: 8;
    }
        
    #c9:checked ~ .flip-book #p9 {
    transform: rotateY(-180deg);
    z-index: 9;
    }
    
    #c10:checked ~ .flip-book #p10 {
    transform: rotateY(-180deg);
    z-index: 10;
    }
    
    
    #c11:checked ~ .flip-book #p11 {
    transform: rotateY(-180deg);
    z-index: 11;
    }
    
    #c12:checked ~ .flip-book #p12 {
    transform: rotateY(-180deg);
    z-index: 12;
    }
    
    #c13:checked ~ .flip-book #p13 {
    transform: rotateY(-180deg);
    z-index: 13;
    }
    
    #c14:checked ~ .flip-book #p14 {
    transform: rotateY(-180deg);
    z-index: 14;
    }
    
    #c15:checked ~ .flip-book #p15 {
    transform: rotateY(-180deg);
    z-index: 15;
    }
        
    #c16:checked ~ .flip-book #p16 {
    transform: rotateY(-180deg);
    z-index: 16;
    }
        
    #c17:checked ~ .flip-book #p17 {
    transform: rotateY(-180deg);
    z-index: 17;
    }
        
    #c18:checked ~ .flip-book #p18 {
    transform: rotateY(-180deg);
    z-index: 18;
    }
            
    #c19:checked ~ .flip-book #p19 {
    transform: rotateY(-180deg);
    z-index: 19;
    }
        
    #c20:checked ~ .flip-book #p20 {
    transform: rotateY(-180deg);
    z-index: 20;
    }
    
    #c3:checked ~ .flip-book #p1 {
        display: none;
    }
    
    #c5:checked ~ .flip-book #p1 {
        display: none;
    }
    
    #c7:checked ~ .flip-book #p1 {
        display: none;
    }
    
    #c9:checked ~ .flip-book #p1 {
        display: none;
    }
    
    #c11:checked ~ .flip-book #p1 {
        display: none;
    }
    
    #c13:checked ~ .flip-book #p1 {
        display: none;
    }
    
    #c15:checked ~ .flip-book #p1 {
        display: none;
    }
    
    #c17:checked ~ .flip-book #p1 {
        display: none;
    }
    
    #c19:checked ~ .flip-book #p1 {
        display: none;
    }
    
    label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height:100%;
        opacity: 0;
    }
    
    img {
        width: 90%;
        height: 90%;
        object-fit: cover;
    }
-------------------------------------------
.booklet {
    display: flex;
    }
    #cover2 {
    width: 820px;
    height: 497px;
    }
    .flip-book2 {
    width: 820px;
    height: 497px;
    margin-left: 50%;
    margin-bottom: 25%;
    position: relative;
    perspective: 1500px;
    }
    .flip {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center left;
    transform-style: preserve-3d;
    transition: 0.5s;
    color: #000;
    border-left: 0.5px dashed #f0f0f0;
    }
    .front {
    position: absolute;
    width: 100%;
    height: 100%;
    border-left-style: dashed;
    background-color: #fff;
    box-sizing: border-box;
    padding: 1px, 1px, 1px, 1px;
    }
    
    .back {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    background-color: #fff;
    }
    .next-btn {
    position: absolute;
    border: 0px solid black;
    border-radius: 5px;
    padding: 4px;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #000;
    }
    .back-btn {
    position: absolute;
    border: 0px solid black;
    border-radius: 5px;
    padding: 4px;
    bottom: 13px;
    right: 13px;
    cursor: pointer;
    color: #000;
    }
    #p1 {
    z-index: 20;
    }
    #p2 {
    z-index: 19;
    }
    #p3 {
    z-index: 18;
    }
    #p4 {
    z-index: 17;
    }
    #p5 {
    z-index: 16;
    }
    
    #p6 {
    z-index: 15;
    }
    
    #p7 {
    z-index: 14;
    }
    
    #p8 {
    z-index: 13;
    }
    
    #p9 {
    z-index: 12;
    }
    
    #p10 {
    z-index: 11;
    }
    
    #p11 {
    z-index: 10;
    }
    
    #p12 {
    z-index: 9;
    }
    
    #p13 {
    z-index: 8;
    }
    
    #p14 {
    z-index: 7;
    }
    
    #p15 {
    z-index: 6;
    }
        
    #p16 {
    z-index: 5;
    }
        
    #p17 {
    z-index: 4;
    }
        
    #p18 {
    z-index: 3;
    }
        
    #p19 {
    z-index: 2;
    }
        
    #p20 {
    z-index: 1;
    }
    
    
    #c1:checked ~ .flip-book2 #p1 {
    transform: rotateY(-180deg);
    z-index: 1;
    }
    #c2:checked ~ .flip-book2 #p2 {
    transform: rotateY(-180deg);
    z-index: 2;
    }
    #c3:checked ~ .flip-book2 #p3 {
    transform: rotateY(-180deg);
    z-index: 3;
    }
    #c4:checked ~ .flip-book2 #p4 {
    transform: rotateY(-180deg);
    z-index: 4;
    }
    #c5:checked ~ .flip-book2 #p5 {
    transform: rotateY(-180deg);
    z-index: 5;
    }
    
    #c6:checked ~ .flip-book2 #p6 {
    transform: rotateY(-180deg);
    z-index: 6;
    }
    
    #c7:checked ~ .flip-book2 #p7 {
    transform: rotateY(-180deg);
    z-index: 7;
    }
    
    #c8:checked ~ .flip-book2 #p8 {
    transform: rotateY(-180deg);
    z-index: 8;
    }
        
    #c9:checked ~ .flip-book2 #p9 {
    transform: rotateY(-180deg);
    z-index: 9;
    }
    
    #c10:checked ~ .flip-book2 #p10 {
    transform: rotateY(-180deg);
    z-index: 10;
    }
    
    
    #c11:checked ~ .flip-book2 #p11 {
    transform: rotateY(-180deg);
    z-index: 11;
    }
    
    #c12:checked ~ .flip-book2 #p12 {
    transform: rotateY(-180deg);
    z-index: 12;
    }
    
    #c13:checked ~ .flip-book2 #p13 {
    transform: rotateY(-180deg);
    z-index: 13;
    }
    
    #c14:checked ~ .flip-book2 #p14 {
    transform: rotateY(-180deg);
    z-index: 14;
    }
    
    #c15:checked ~ .flip-book2 #p15 {
    transform: rotateY(-180deg);
    z-index: 15;
    }
        
    #c16:checked ~ .flip-book2 #p16 {
    transform: rotateY(-180deg);
    z-index: 16;
    }
        
    #c17:checked ~ .flip-book2 #p17 {
    transform: rotateY(-180deg);
    z-index: 17;
    }
        
    #c18:checked ~ .flip-book2 #p18 {
    transform: rotateY(-180deg);
    z-index: 18;
    }
            
    #c19:checked ~ .flip-book2 #p19 {
    transform: rotateY(-180deg);
    z-index: 19;
    }
        
    #c20:checked ~ .flip-book2 #p20 {
    transform: rotateY(-180deg);
    z-index: 20;
    }
    
    #c3:checked ~ .flip-book22 #p1 {
        display: none;
    }
    
    #c5:checked ~ .flip-book2 #p1 {
        display: none;
    }
    
    #c7:checked ~ .flip-book2 #p1 {
        display: none;
    }
    
    #c9:checked ~ .flip-book2 #p1 {
        display: none;
    }
    
    #c11:checked ~ .flip-book2 #p1 {
        display: none;
    }
    
    #c13:checked ~ .flip-book2 #p1 {
        display: none;
    }
    
    #c15:checked ~ .flip-book2 #p1 {
        display: none;
    }
    
    #c17:checked ~ .flip-book2 #p1 {
        display: none;
    }
    
    #c19:checked ~ .flip-book2 #p1 {
        display: none;
    }
    
    label {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height:100%;
        opacity: 0;
    }
    
    img {
        width: 90%;
        height: 90%;
        object-fit: cover;
    }