/* 

TODO:
    - Use better units for some widths that are not yet standardized

*/

: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);


    /* 0 is 12px on a 320px width up to 20px on a 1240px width*/
    --font-size0: clamp(0.75rem, 0.5761rem + 0.8696vw, 1.25rem);
    --font-size1: clamp(0.9rem, 0.6696rem + 1.1522vw, 1.5625rem);
    --font-size2: clamp(1.08rem, 0.7763rem + 1.5185vw, 1.9531rem);
    --font-size3: clamp(1.296rem, 0.8976rem + 1.992vw, 2.4414rem);
    --font-size4: clamp(1.5552rem, 1.0347rem + 2.6027vw, 3.0518rem);
    --font-size5: clamp(1.8662rem, 1.1885rem + 3.3886vw, 3.8147rem);

    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
}

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;
}

/* subject to change */
main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-s);
    /* Should the page become too wide, we restrict the content to a nice box width and center it*/
    margin: auto;
    max-width: 80rem;
    text-align: center;
}

img {
    max-width: 100%;
}

h1 {
    font-size: var(--font-size5);
}

h2 {
    font-size: var(--font-size4);
}

h3 {
    font-size: var(--font-size3);
}

h4 {
    font-size: var(--font-size2);
}

h5 {
    font-size: var(--font-size1);
}

p {
    font-size: var(--font-size0);
    text-align: left;
}

/*
Header with Logo and possibly more content

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

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

#site-logo img {
    width: 5em;
    padding-left: 3rem;
}

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

/*
####################
#                  #
#    Components    #
#                  #
####################
*/

/* 
--------------------------------
<---- Hint/Solution Button ----> 
--------------------------------
*/


/* 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;
    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 ----> 
---------------------------------
*/

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

/* 
------------------------
<---- styled Links ----> 
------------------------
*/

/* 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;
}