.body {
    background: rgb(200, 200, 200, 0.1);
}
.container {
    width: 100vw;
    min-height: 100vh;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: min(10vh, 10vw);


}

.message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.logo {
    max-width: 80vw;
    width: 40vh;
    min-width: 300px;

}

.slogan {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 6vw;
}

.interactions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.interactions::after {
    content: '';
    height: 10vh;
    min-height: 10vw;
}

.btn {
    width: max(min(80vw, 50vh), 300px);
    border-radius: 10px;
    font-size: max(min(max(1vw, 3vh), 60px), 20px);
    line-height: 200%;
    font-weight: 700;
    cursor: pointer;
    padding: 10px;
    margin: 10px;
    border: #00000050 2px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, Helvetica, sans-serif;

}

.primary {
    background-color: #0057B7;
    color: #fff;
}

.secondary {
    background-color: #FFDD00;
    color: #000;
}

a {
    text-decoration: none;
}