@charset "UTF-8";

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root{
    --header_height: 4rem;
    --main_hight: calc(100vh - var(--header_height) - var(--footer_hight));
    --main_hight: calc(100svh - var(--header_height) - var(--footer_hight));
    --footer_hight: 3rem;
    --The_width: 100%;
}

header{
    display: grid;
    place-items: center;
    min-height: var(--header_height);
    width: var(--The_width);
    border-bottom: 2px solid black
}

header > h1{
    font-size: 2rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 2vmin;
    text-align: center;
    text-wrap: balance;
}

main{
    display: grid;
    place-items: center;
    min-height: var(--main_hight);
    width: var(--The_width);
}

main > div{
    display: grid;
    place-items: center;
}

main > div > div{
    display: inline;
    min-height: 5.5rem;
    width: clamp(45ch, 50%, 75ch);
    text-indent: 1.5rem; 
    
    font-size: 1.5rem;
    font-weight: bold;
}

button{
    font-size: 2rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    padding: 1vmin 2vmin;
    margin: 2vmin;
    border: 2px solid black;
    border-radius: .5vmin;
    background-color: rgb(220, 220, 220);
    outline: 2px solid transparent;
    outline-offset: 0;
    transition: all linear 80ms
}

button:hover,
button:focus{
    background-color: rgb(190, 190, 190);
    outline: 2px solid rgb(0, 90, 255);
    outline-offset: .5vmin;
}

footer{
    display: grid;
    place-items: center;
    height: var(--footer_hight);
    width: var(--The_width);
}

footer > p{
    font-size: 1.1rem;
    font-weight: bold;
    transition: opacity linear 500ms
}

footer:hover > p, 
footer:focus > p{
    opacity: 0
}