styles.css

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono");
body {
    background-color: #b1f1e8;
    background-image: linear-gradient(to bottom right, #b1f1e8, #ffb3f1, #fff0c8);
}
.main {
    display: flex;
    padding: 21.75% 21.75% calc(33.5% + 13vh) 21.75%;
    font-family: 'Roboto Mono';
    font-size: calc(12px + 1.5vh);
    color: #FFF;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}
b {
    margin-bottom: calc(10px + 5vh);
    width: 100%;
}
button {
    display: flex;
    flex-direction: column wrap;
    margin-bottom: 15px;
    border-style: solid;
    border-width: 2.5px;
    border-radius: 10px;
    border-color: #FFF;
    width: calc(7.5rem + 20vw);
    height: calc(1rem + 6.5vh);
    background-color: transparent;
    text-align: center;
}
a {
    display: flex;
    margin-top: 1.75vh;
    width: 100%;
    height: fit-content;
    font-family: "Roboto Mono";
    font-size: calc(10px + 1.5vh);
    font-weight: 900;
    color: #FFF;
    text-decoration: none;
    justify-content: center;
}


/* responsividade aceitavel, mas ta um pouco estranho */