@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Archivo", sans-serif;
}

@keyframes rainbow{
    0%{color: #0ce2be;}
    10%{color: #f6358f;}
    20%{color: #dff72c;}
    30%{color: #ffaa01;}
    40%{color: fuchsia;}
    50%{color: lime;}
    60%{color: gold;}
    70%{color: crimson;}
    80%{color: coral;}
    90%{color: lightgoldenrodyellow;}
    100%{color: indigo;}
}

body{
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
    transition: background-color 0.5s ease, transform 0.5s ease;
    max-width: auto;
}

.bodyHeader{
    display: flex;
    justify-content: center;
    padding-bottom: 75px;
}

.bodyHeader > #textChange:hover{
    scale: 1.9;
}

#textChange{
    margin-top: 150px;
    transition: scale 0.3s ease, transform 0.5s ease;
    animation: rainbow 10s linear infinite;
    font-size: 70px;
}

.buttonContainer{
    display: flex;
    justify-content: center;
}

.buttons{
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 30px;
}

.buttons > button{
    border-radius: 50px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 20px;
    padding: 20px;
    width: 300px;
    transition: transform 0.5s ease;
}

/* #bgBtn, #regretBtn, #forBtn {
    transition: transform 2s ease-in-out;
} */

.buttons p{
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttons button:nth-child(1){
    background: linear-gradient(45deg, #0ce2be, #dff72c);
}
.buttons button:nth-child(2){
    background: linear-gradient(45deg, #f6358f, #ffaa01);
}
.buttons button:nth-child(3){
    background: linear-gradient(45deg, #bbe20c, #4cc1f0);
}
.buttons button:nth-child(4){
    background: linear-gradient(45deg, #fb12ff, #55ff9c);
}

@media (max-width: 768px) {
    .buttons > button{
        font-size: 18px;
        width: 250px;
    }

    #textChange{
        font-size: 40px;
    }
}