html{
    --bg-color: #222831;
    --primary-color: #76ABAE ;
    --secondary-color: #31363F ;
    --hg-color: #EEEEEE;

    font-family: "Montserrat", sans-serif;
    text-align: justify;
    background-color: var(--bg-color);
}

main.app{
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
}

div.main-text{
    text-align: center;
    align-content: center;
    width: 50rem;
    border: 0.188rem solid var(--hg-color);
    border-radius: 0.625rem;
    margin: 1.25rem auto 1.25rem auto;
    color: var(--hg-color);
    background-color: var(--primary-color);
}

div.main-text h1{
    font-size: 3.75rem;
}

div.site-contents{
    margin: auto;
    padding: 0 1.875rem 0 1.875rem;
    width: 46.25rem;
    height: 31.25rem;
    text-align: justify;
    align-content: center;
    font-size: 1.375rem;
    border-radius: 0.625rem;
    border: 0.188rem solid var(--hg-color);
    background-color: var(--secondary-color);
    color: var(--hg-color);
}

div.site-contents h2{
    font-size: 3.125rem;
    text-align: center;
}

div.site-contents p#funny-message{
    text-align: center;
    font-style: italic;
    font-size: 1.375rem;
}

div.buttons{
    display: grid;
    grid-template-columns: auto auto;
}

div.buttons div button{
    margin: 1.25rem 0.313rem 1.25rem 0.313rem;
    font-size: 1.375rem;
    gap: 0;
    width: 11.25rem;
    height: 70px;
    border: 0px;
    border-radius: 0.313rem;
    border: 0.188rem solid var(--hg-color);
    background-color: var(--secondary-color);
    color: var(--hg-color);
}

div.buttons div button#count-button{
    float: inline-end;
}

div.buttons div button#clear-button{
    background-color: var(--secondary-color);
    color: var(--hg-color);
}

div div button#count-button:hover{
    background-color: green;
    text-decoration: underline;
    cursor: pointer;
}

div div button#clear-button:hover{
    background-color: red;
    color: var(--hg-color);
    text-decoration: underline;
    cursor: pointer;
}