:root {
    --bg-color: #15191c;
    --secondary-color: #202327;
    --btn-color: #747fff;
    --text-color: #dcddde;
}

* {
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

    transition: all 0.3s linear;
}

@media (min-width: 768px) {
    body {
        display: flex;
        height: 100vh;
        width: 100vw;
    
        background-color: var(--bg-color);
        color: var(--text-color);
        justify-content: center;
        padding-left: 20%;
        padding-right: 20%;

        align-items: center;
    }
}

@media (max-width: 767px) {
    body {
        display: flex;
        height: 100vh;
        width: 100vw;
    
        background-color: var(--bg-color);
        color: var(--text-color);
        justify-content: center;
        padding-left: 5%;
        padding-right: 5%;

        align-items: center;
    }
}

.inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    width: 100%;
    height: 20px;
    /* background-color: white; */

    text-align: center;
}

input, textarea {
    margin-top: 4%;

    width: 100%;
    text-align: center;
    background-color: var(--secondary-color);
    border: none;
    border-radius: 10px;

    padding: 2%;

    color: var(--text-color);
    font-size: 17px;

    resize: none;
}

.button-like {
    display: flex;
    align-items: center;
    justify-content: center;

    background-color: var(--btn-color);
    border: none;
    border-radius: 10px;
    padding: 3%;
    margin-top: 2.5%;
    color: var(--text-color);

    min-width: 30%;

    width: fit-content;
    text-align: center;
    text-wrap: nowrap;

    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.no-active {
    pointer-events: none;
    opacity: 0.5;
}

.button-like:active {
    transform: scale(0.98);
}

.spinner {
    width: 40px;
    height: 40px;

    animation: rotate 2s linear infinite;

    border: 3px solid transparent;
    border-color: white;

    border-top-color: var(--btn-color);
    border-radius: 50%;
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

a {
    margin-top: 2.5%;
    color: var(--btn-color);
}

.block {
    background-color: var(--secondary-color);
    width: 100%;
    border-radius: 10px;
    padding: 2.5%;
}

.part {
    background-color: rgb(38, 45, 51);
    color: var(--text-color);
    width: 32%;
    font-size: 10px;
    
    pointer-events: none;

}