:root{
    /* --bg-color: hsl(198, 26%, 13%); #182429 */
    --fg-color: hsl(0, 0%, 100%);
    --bg-color: hsl(231, 54%, 31%);
}

/* handle box sizing issue */
html{
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body{
    background-color: var(--bg-color);
    color: var(--fg-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.content{
    display: grid;
    justify-content: center;
    gap:2rem;
    text-align: center;
}

a{
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

.display-content{
    display: grid;
}

.intro{
    /* width: 50%; */
    margin: 0 20%;
    text-align: left;
    font-size: x-large;
}

.user_info{
    flex:2;
}

.hidden{
    visibility: hidden;
}

@media screen and (max-width: 480px) {
    body{
    }

    .intro{
        margin: 0 5%;
    }
}