body {
    margin: 0;
    background-color: #FFFFFF;
}

header {
    padding: 3%;
    text-align: center;
    font-size: 200%;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #0099FF;
    transition: text-decoration-color 0.2s;
    text-underline-offset: 2px;
}

.content {
    text-align: center;
    margin: 3%;
    min-height: 10%;
}

.emoticon {
    font-size: 200%;
    visibility: hidden;
    transition: visibility 0.2s;
}

.footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    font-size: 75%;
    text-align: center;
    padding-bottom: 2em;
}

a {
    color: #33BBEE;
}

body:has(header:hover) header {
    text-decoration-color: #0077DD;
}

body:has(header:hover) .text {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: #0099FF;
    transition: text-decoration-color 0.2s;
    text-underline-offset: 2px;
}

body:has(header:hover) .emoticon {
    font-size: 200%;
    color: #0099FF;
    visibility: visible;
    transition: visibility 0.2s;
}

body:has(header:active) header {
    text-decoration-color: #0077DD;
    color: #0099FF;
    transition: color 0.5s;
}

body:has(header:active) .text {
    color: #0099FF;
    transition: color 0.2s;
}

body:has(header:active) .emoticon {
    font-size: 200%;
    color: #0077DD;
    visibility: visible;
    transition: visibility 0.2s;
}