:root {
    --body-BackgroundColor: #000;
    --containerBody-BackgroundColor: #121212;
    --firstCircle-BackgroundColor: #03dac6;
    --secondCircle-BackgroundColor: #f6397d;
    --thirdCircle-BackgroundColor: #7350a1;
    --white-Color: #fff;
    --whiteDotT-Color: rgba(255, 255, 255, 0.2);
    --whiteDotS-Color: rgba(255, 255, 255, 0.6);
    --blackDotS-Color: rgba(0, 0, 0, 0.75);
    --mainGradient-Linear: linear-gradient(160deg, rgba(3, 218, 198, 1) 0%, rgba(246, 57, 125, 1) 40%, rgba(115, 80, 161, 1) 100%);
    --textGradient-Linear: linear-gradient(to right, rgba(3, 218, 198, 1), rgba(246, 57, 125, 1), rgba(115, 80, 161, 1));
    --checkIcon-Color: rgb(0, 210, 0);
    --refuseIcon-Color: rgb(216, 0, 0);
    --container-BorderRadius: 15px;
}

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


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Media */
@media (min-width: 320px) {
    .parent .container {
        width: 290px;
    }
}

/* Small devices X (landscape phones, 390px and up) */
@media (min-width: 390px) {
    .parent .container {
        width: 380px;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .parent .container {
        width: 550px;
    }
}

/* Media End */



body {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Kanit";
    background-color: var(--body-BackgroundColor);
}

.container {
    background-color: var(--containerBody-BackgroundColor);
    padding: 30px 20px;
}


/* Main container */
.parent {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.logo img {
    width: 90px;
}


.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.circle.first {
    background-color: var(--firstCircle-BackgroundColor);
}

.circle.second {
    background-color: var(--secondCircle-BackgroundColor);
}

.circle.third {
    background-color: var(--thirdCircle-BackgroundColor);
}

button {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}