:root {
    --background: rgb(20, 25, 30);
    --text: rgb(200, 200, 200);
    --blue: rgb(0, 200, 255);
    --blue5: rgba(0, 200, 255, 0.05);
    --blue10: rgba(0, 200, 255, 0.1);
    --blue20: rgba(0, 200, 255, 0.2);
    --blue30: rgba(0, 200, 255, 0.3);
    --blue40: rgba(0, 200, 255, 0.4);
    --blue50: rgba(0, 200, 255, 0.5);
    --blue60: rgba(0, 200, 255, 0.6);
    --blue70: rgba(0, 200, 255, 0.7);
    --blue80: rgba(0, 200, 255, 0.8);
    --blue90: rgba(0, 200, 255, 0.9);
    --green: rgb(0, 225, 65);
    --green5: rgba(0, 225, 65, 0.05);
    --green10: rgba(0, 225, 65, 0.1);
    --green20: rgba(0, 225, 65, 0.2);
    --green30: rgba(0, 225, 65, 0.3);
    --green40: rgba(0, 225, 65, 0.4);
    --green50: rgba(0, 225, 65, 0.5);
    --green60: rgba(0, 225, 65, 0.6);
    --green70: rgba(0, 225, 65, 0.7);
    --green80: rgba(0, 225, 65, 0.8);
    --green90: rgba(0, 225, 65, 0.9);
}

html {
    width: 100%;
    height: 100%;
    background-color: var(--background);
    color: var(--text);
    font-size: 1rem;
    font-family: Helvetica, sans-serif;
}

/* Some sensible defaults for any site */
body {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;

    padding-top: 1rem;
    gap: 1rem;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    box-sizing: border-box;
    padding: 1em;
    /* Should the page become too wide, we restrict the content to a nice box width and center it*/
    margin: auto;
    max-width: 125em;
    text-align: center;
}

/* Header with Logo and possibly more content */
#site-logo img {
    width: 5em;
    padding-left: 3rem;
}

#site-name {
    font-weight: bold;
    font-size: 2rem;
    text-decoration: none;
}

/* 
    Components
*/

/* Button that reveals its content when clicked */
button.solution-button {
    width: 100%;
    height: 5rem;
    background-color: var(--green20);
    color: var(--text);
    border-radius: 1rem;
    font-size: 1em;
    margin: 1rem;
    cursor: pointer;
    border: none;

    /* For the ripple effect */
    overflow: hidden;
    position: relative;
}

button.solution-button:hover {
    background-color: var(--green30);
    transition: 0.1s;
}

.solution {
    display: none;
    width: 100%;
}

.solution-hint {
    display: block;
    width: 100%;
}

/* Ripple effect when clicking the button */
div.ripple {
    position: absolute;
    animation: ripple 0.6s linear;
    background-color: white;
    opacity: 0;
    border-radius: 50%;
}

@keyframes ripple {
    from {
        transform: scale(0);
        opacity: 0.5;
    }

    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Gradient-colored text for distinguished words */
span.gradient-text {
    background-image: linear-gradient(90deg, var(--blue), var(--green));
    background-clip: text;
    color: transparent;
}

/* Links with green underline, growing on hover */
a.hover-link {
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: .125em;
    text-underline-offset: .4em;
    padding: .5em 0em;
    /* The underline does not vanish under g's and y's when growing */
    text-decoration-skip-ink: none;
    transition: all 0.1s;
    /* When the Links break to the next line, the link underline sometimes reeks into other text, so we add additional line-height */
    line-height: 1.5em;
}

/* Hover effect of custom links */
a.hover-link:hover {
    text-decoration-thickness: .25em;
    text-underline-offset: .275em;
    transition: all 0.1s;
}