@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@100..1000&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Lato', sans-serif;
    overflow: hidden; /* Prevents the body from scrolling */
    height: 100vh; /* Full height of the viewport */
    background: url(../images/mystuff2.png) no-repeat center; 
}

/* WebKit scrollbar styles */
body::-webkit-scrollbar {
    height: 10px; /* Height of the horizontal scrollbar */
    width: 10px;
}

body::-webkit-scrollbar-track {
    background: #f1f1f1; /* Background of the scrollbar track */
    border-radius: 8px; /* Round the corners of the track */
}

body::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar thumb */
    border-radius: 10px; /* Rounded corners for the thumb */
}

body::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the scrollbar thumb on hover */
}

.overlay {
    position: fixed; /* Cover the entire viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); 
    z-index: 1; /* Ensure overlay is above the background image */
}

.main-container {
    width: 100vw;
}

form {
    width: 99vw;
    /* display: flex; */
    /* flex-direction: column; */
    justify-content: center; 
    align-items: center;     
    overflow: scroll;
    /* margin: 0;                */
}

form label {
    color: white;
    font-size: 18px;
}

form label span {
    font-size: 24px;
}

form input {
    border-radius: 10px;
    background-color: transparent;
    border: 1px solid #ccc; /* Optional: add a border to define input edges */
    box-shadow: 0 6px 12px rgba(192, 192, 192, 0.6); /* Silver box-shadow at the bottom */
    color: silver; /* Text color */
    text-align: center;
    width: 80vw;
}

form input:not([type="file"]):not([type="radio"]) {
    border-radius: 10px;
    background-color: transparent;
    width: 50vh;
    height: 50px;
    border: 1px solid #ccc; /* Optional: add a border to define input edges */
    box-shadow: 0 6px 12px rgba(192, 192, 192, 0.6); /* Silver box-shadow at the bottom */
    color: silver; /* Text color */
    text-align: center;
}

form input::placeholder {
    color: silver; /* Placeholder text color */
}

form input:focus {
    box-shadow: 0 6px 12px rgba(255, 215, 0, 0.6); /* Gold box-shadow */
}

.logo {
    width: 100px;
    height: 100px;
}

.o-auth-btns-title {
    color: white;
    font-size: 18px;
    text-align: center;
}

.o-auth-img {
    width: 30vw;
    height: 15vw;
}