@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;700&display=swap');

::-webkit-input-placeholder {
        color: #f2f2e6;
}

* {
        font-family: 'Montserrat', sans-serif;
        color: #f2f2e6;

        margin: 0px;
        padding: 0px;
        border: none;

        outline: none;
        box-sizing: border-box;
        scroll-behavior: smooth;
}

.container {
        margin: 0px auto;
        padding: 0px 20px;

        max-width: 1260px;
}

body.disable-scroll {
        overflow: hidden;
}

header {
        width: 100%;

        position: sticky;

        top: 0px;

        z-index: 100;
        background-color: #292939;
        box-shadow: 0px 0px 20px 10px #0000005b;
}

header>.container {
        display: flex;

        padding-top: 20px;
        padding-bottom: 20px;

        gap: 20px;
        align-items: center;
        justify-content: space-between;
}

.logo>img {
        max-height: 80px;
        max-width: 80px;
}

nav {
        display: flex;

        gap: 20px;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
}

.content-block {
        background-color: #292939;
}

.content-block>.container {
        display: flex;

        padding-top: 80px;
        padding-bottom: 80px;

        gap: 100px;
        align-items: center;
}

.content-block>.container>img {
        max-width: 250px;
        max-height: 250px;

        width: 100%;

        aspect-ratio: 1 / 1;

        border-radius: 50%;
        object-fit: cover;
        box-shadow: 0px 0px 20px 10px #0000005b;
}

.content-block>.container>.content {
        display: flex;

        gap: 40px;
        flex-direction: column;
}

.content-block>.container>.content>.actions {
        display: flex;

        gap: 20px;
        flex-wrap: wrap;
}

.content-block.center>.container {
        text-align: center;
        flex-direction: column;
}

.content-block.center>.container>.content>.actions {
        justify-content: center;
}

.content-block.light {
        background-color: #f2f2e6;
}

.content-block.light *:not(button, a, input) {
        color: #292939;
}

.background-image {
        background-size: cover;
        background-position: center;
}

.elements-list {
        background-color: #292939;
}

.elements-list>.container {
        display: flex;

        padding-top: 80px;
        padding-bottom: 80px;

        gap: 100px;
        align-items: center;
        flex-direction: column;
}

.elements-list>.container>.list {
        display: flex;

        width: 100%;

        gap: 40px;
        align-items: center;
        justify-content: space-between;
}

.elements-list>.container>.list>.elements {
        display: flex;

        padding: 40px;

        width: 100%;

        gap: 100px;
        overflow-x: auto;
}

.elements-list>.container>.list>.elements::-webkit-scrollbar {
        display: none;
}

.elements-list>.container>.list>.elements>.element {
        display: flex;

        text-align: center;
        gap: 20px;
        align-items: center;
        flex-direction: column;
        animation: 1s linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%) show-book paused;
}

.play-animation {
        animation-play-state: running !important;
}

.elements-list>.container>.list>.elements>.element>img {
        width: 240px;
        height: 376px;

        cursor: pointer;
        object-fit: cover;
        border-radius: 8px;
        box-shadow: 0px 0px 20px 10px #0000005b;
        transition: all 0.1s linear;
}

.elements-grid {
        background-color: #292939;
}

.elements-grid>.container {
        display: flex;

        padding-top: 80px;
        padding-bottom: 80px;

        gap: 100px;
        align-items: center;
        flex-direction: column;
}

.elements-grid>.container>.grid {
        display: flex;

        padding: 40px;

        gap: 40px;
        flex-wrap: wrap;
        justify-content: center;
}

.elements-grid>.container>.grid>.element {
        font-weight: bold;

        display: flex;

        padding: 20px;

        max-width: 256px;

        width: 100%;
        height: 300px;

        align-items: center;
        border-radius: 8px;
        text-align: center;
        justify-content: center;
        animation: 1s cubic-bezier(0.65, 0.05, 0.36, 1) show-poetry paused;
        cursor: pointer;
        text-shadow: 0 0 10px #292939;
        box-shadow: 0px 0px 20px 10px #0000005b;
        transition: all 0.1s linear;
}

footer {
        background-color: #292939;
}

footer>.container {
        padding-top: 40px;
        padding-bottom: 40px;

        text-align: center;
}

.popup {
        position: fixed;

        top: 0px;

        width: 100%;
        height: 100vh;

        z-index: 200;
        transform: scale(0);
        transition: all 0.1s linear;
}

.popup>.container {
        display: flex;

        padding: 30px;

        max-width: 640px;
        height: 100%;

        gap: 30px;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        background-color: #292939;
        box-shadow: 0px 0px 20px 10px #0000005b;
}

.popup>.container *::-webkit-scrollbar {
        width: 5px;
}

.popup>.container *::-webkit-scrollbar-thumb {
        border-radius: 18px;
        background-color: #ed6767;
}

.popup>.container>.title {
        text-align: center;
}


.popup>.container>.text {
        padding-right: 14px;

        width: 100%;

        overflow: auto;
}

.popup>.container>.text.centered {
        text-align: center;
}

.popup.show {
        transform: scale(1);
}

/* Adaptability */

@media screen and (max-width: 800px) {
        h1 {
                font-size: 24px;
        }

        header>.container {
                justify-content: center;
                flex-direction: column;
        }

        .content-block>.container {
                text-align: center;
                flex-direction: column;
        }

        .content-block>.container>.content>.actions {
                align-items: center;
                flex-direction: column;
        }

        .elements-list>.container>.list {
                gap: 20px;
        }
}

/* Controls */

a {
        text-decoration: none;

        transition: all 0.1s linear;
}

.text-link {
        color: #793f5c;
        text-decoration: underline;
}

.button,
input {
        padding: 10px 20px;

        max-width: fit-content;
        width: 100%;

        border-radius: 5px;
        background-color: #ed6767;
        transition: all 0.1s linear;
}

button {
        cursor: pointer;
}

#scroll-left,
#scroll-right {
        max-width: 30px;
        max-height: 30px;

        cursor: pointer;
        transition: all 0.1s linear;
}

a:active,
.button:active,
input:active,
.elements-list>.container>.list>.elements>.element>img:active,
.elements-grid>.container>.grid>.element:active,
#scroll-left:active,
#scroll-right:active {
        transform: scale(0.9);
}

/* Animations */

@keyframes show-book {
        from {
                transform: translateY(-120%);
        }

        to {
                transform: translateY(0%);
        }
}

@keyframes show-poetry {
        from {
                transform: rotateZ(-90deg);
        }

        to {
                transform: rotateZ(0deg);
        }
}