/* FONTS LOAD */

@font-face {
    font-family: "Urbanist";
    src: url("/fonts/Urbanist-Regular.otf") format("truetype");
}

@font-face {
    font-family: "Urbanist Medium";
    src: url("/fonts/Urbanist-Medium.otf") format("truetype");
}

@font-face {
    font-family: "Urbanist SemiBold";
    src: url("/fonts/Urbanist-SemiBold.otf") format("truetype");
}

@font-face {
    font-family: "Urbanist Bold";
    src: url("/fonts/Urbanist-Bold.otf") format("truetype");
}

@font-face {
    font-family: "Urbanist ExtraBold";
    src: url("/fonts/Urbanist-ExtraBold.otf") format("truetype");
}

@font-face {
    font-family: "Urbanist Black";
    src: url("/fonts/Urbanist-Black.otf") format("truetype");
}


/* GLOBAL STYLES */
html {
    overflow-x: hidden;
}
body {
    margin: 0;
    padding: 0;
    font-family: "Urbanist", sans-serif;

    --color-background-main: #22272e;
    --color-background-secondary: #2d333b;
    --color-white: #ffffff;
    --color-gray: #b0b8c1;
    --color-black: #16181d;
    --color-primary: #2563eb;
    --color-secondary: #374151;
    --color-borderwhite: rgba(255, 255, 255, 0.12);

    color: var(--color-white);

    background-color: var(--color-background-main);
    overflow-x: hidden;

    user-select: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */

    height: 100vh;
}

.readzone {
    width: 64vw;
    overflow: visible;
    /* height: 100vh; */
}

/* SCROLLBAR STYLE */
::-webkit-scrollbar {
    position: absolute;
    height: 0.4vh;
    width: 0.6vh;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 2px;
    margin-right: 1.2vh;
    background: rgba(255, 255, 255, 0.05);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* BUTTONS */
.mbutton {
    font-family: "Urbanist Bold", sans-serif;
    font-size: 2.8vh;
    color: var(--color-white);
    background-color: var(--color-secondary);
    padding: 0.8vh 1.5vh;
    border: 0.2vh solid var(--color-borderwhite);
    transition: 0.2s ease-in-out;
    user-select: none;
    opacity: 1.0;
    text-decoration: none;
    text-align: center;
}

.mbutton:hover {
    filter: brightness(1.2);
    opacity: 1.0;
    cursor: pointer;
    transition: 0.1s ease-in-out;
    text-shadow: 0vh 0vh 3vh rgba(255, 255, 255, 0.623);
}

.mbutton.gold {
    background-color: var(--color-primary);
}

.mbutton.big {
    padding: 1.2vh 4.5vh;
}

.mbutton.small {
    font-size: 2.0vh;
    padding: 0.6vh 2.2vh;
    font-family: "Urbanist Medium", sans-serif;
}

.mbutton.stroked {
    outline: 0.1vh solid var(--color-white);
    outline-color: var(--color-secondary);
    outline-offset: 0.3vh;
}

.mbutton.stroked.gold {
    outline-color: var(--color-primary);
}

/* INPUT STYLE */
input {
    font-family: "Urbanist", sans-serif;
    font-size: 2.0vh;
    color: var(--color-white);
    background-color: transparent;
    border: 0.1vh solid var(--color-gray);
    padding: 0.5vh 1.0vh;
    outline: none;
    transition: 0.2s ease-in-out;
}

input:focus {
    border: 0.1vh solid var(--color-white);
    transition: 0.2s ease-in-out;
}

/* RESPONSIVE STYLES */

@media (max-width: 1300px) {
    .readzone {
        width: 95vw;
    }
}

@media (max-width: 1300px) {
    .desktop {
        display: none;
    }
}

@media (min-width: 1300px) {
    .mobile {
        display: none;
    }
}*

/* BLOCKTITLE */
.blocktitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2vh;
    margin-bottom: 4vh;
}

.blocktitle .title {
    font-family: "Urbanist Bold", sans-serif;
    font-size: 4.0vh;
    color: var(--color-white);
    text-align: center;
    margin: 0;
}

.blocktitle .subtitle {
    font-family: "Urbanist Medium", sans-serif;
    font-size: 2.0vh;
    color: var(--color-gray);
    text-align: center;
    margin: 0;
}

/* BLOCK STYLE */
.block {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    padding-top: 4vh;
    padding-bottom: 8vh;

    border-bottom: 0.1vh solid;
    border-top: 0.1vh solid;
    border-image: linear-gradient(to right, rgba(249, 249, 249, 0.1), rgba(249, 249, 249, 0.3), rgba(249, 249, 249, 0.1)) 1;

    background-color: var(--color-background-secondary);

    overflow: visible;

    width: 100%;

}

.block.image {
    border: none;
    background-repeat: repeat;
}

.block .image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.35;
    width: 100%;
    height: 100%;
    filter: blur(0.5vh);
    overflow: hidden;
    object-fit: cover;

    mask-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2));
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.2));
    pointer-events: none;
}

/* RESPONSIVE STYLES */

@media (max-width: 1300px) {
    .blocktitle .title {
        font-size: 3.0vh;
    }
    .blocktitle .subtitle {
        font-size: 1.5vh;
    }
}


/* ALBUM PAGE STYLE */

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2vh;
}

.indexgallery {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 2vh;
    height: 65vh;
    overflow-y: scroll;
    padding: 1.2vh;
}

.album {
    height: 30vh;
    display: flex;
    flex-direction: column;
}

.album img {
    background-color: rgba(0, 0, 0, 0.24);
    display: block;
    max-height: 80%;
    width: auto;
    object-fit: fill;
}

.albumrz {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.title {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.passwordform {
    display: flex;
    flex-direction: column;
}