@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css");

h1, h3, h5 {
    font-family: 'Raleway', sans-serif;
}

#index {
    height: 85vh;
}

.header {
    min-height: 400px;
    max-width: 1300px;
}
.navbar {
    right: 0;
}

.auth-img {
    width: 250px;
    height: 200px;
    background-image: url('./src/blob1.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}



.container {
    max-width: 1300px;
}
.sd {
    position:relative;
    z-index:1;    
}
.zoom {
    z-index: 5;
}
.back {
    width: 100%;
    height: 100%;
    background-image: url('./src/burrow_color.png');
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center;

}

.img-preview {
    width: 700px;
}

.book {
    top: 70px;
    left: 90px;
    width: 310px;
}

.tommy {
    bottom: 20px;
    width: 200px;
}

.selfie {
    bottom: 25px;
    right: 5px;
    width: 300px;
}

.btf {
    top: 10px;
    left: 100px;
}

.book-holder {
    max-width: 550px;
    min-height: 600px;
    max-height: 600px;
}

.blob-1{
    right: 0;
    bottom: 0;
}

.blob {
    width: 150px;
}

.char {
    width: 100px;
}

.btn-container {
    width: 100%;
}

@media (max-width: 990px) {
    .btn-container {
        width: 50%;
    }
}
@media (max-width: 768px) { 
    .book-holder {
        max-width: 450px;
    }
    .back {
        background-size: 70%;
    
    }
    .book {
        top: 100px;
        left: 100px;
        width: 250px;
    }
    .tommy {
        bottom: 100px;
        left: 30px;
        width: 150px;
    }
    .selfie {
        width: 250px;
        bottom: 100px;
        right: 0px;
    }

    
    
 }

 @media (max-width: 576px) { 
    .book-holder{
        max-width: 350px;
    }
    .back {
        background-size: 100%;
    
    }
    .book-holder {
        min-width: 400px;
    }
    .book {
        top: 30px;
        left: 110px;
        width: 200px;
    }

    .blob {
        width: 80px;
    }

    .tommy {
        bottom: 10px;
        left: 80px;
        width: 100px;
    }
    .selfie {
        width: 190px;
        bottom: 10px;
        right: 30px;
    }
    .btf{
        width: 100px;
        left: 150px;
        top: 10px;
    }
    .book-holder {
    min-height: 350px;
    }
    .char {
        width: 80px;
    }
    .ft-img {
        width: 150px;
    }
    .btn-container {
        width: 100%;
    }
    .auth-img {
        width: 350px;
        height: 300px;
    }
 }