/*************
 * Variables *
 *************/

:root {
    --white: #ffffff;
    --gray:  #fafafa;
    --black: #000000;
    
    --primary:   #4cb051; /* old value: #56b04c; */
    --secondary: #11c188;

    --red: #dc1920;
}

/* prevent some unexpected behaviour */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

html, body {
    height: 100vh;
    width: 100vw;
    display: flex;

    background: var(--white);
}

/**********
 * Header *
 **********/

.header {
    position: fixed;
    top: 0;
    right: 0;

    padding: 0 200px;
    background: linear-gradient(
        to right,
        var(--primary),
        color-mix(in srgb, var(--primary), var(--white) 40%)
    );

    border: 1px solid color-mix(in srgb, var(--black), transparent 50%);
    box-shadow: 0 0 3px 0 color-mix(in srgb, var(--black), transparent 30%);

    transform:
        translate(50%, 0)
        rotate(45deg)
        translate(-42px, 200px);
}

.header > div {
    color: var(--white);
    -webkit-text-stroke: 1px #0009;

    font-size: 6rem;
    font-weight: bold;
    font-style: none;
    font-family: "Metal Mania", system-ui;
}

/**************
 * Navigation *
 **************/

.navigation {
    display: flex;
    flex-direction: column;

    padding: 25px;
    gap: 15px;

    color: white;
    background: linear-gradient(
        200deg,
        var(--primary),
        var(--secondary)
    );

    box-shadow: 0 0 3px 1px color-mix(in srgb, var(--black), transparent 30%);
}

.navigation > a {
    all: unset;
    cursor: pointer;

    padding: 15px 30px;

    font-size: 1rem;
    font-weight: bold;
    
    border-radius: 10px;
    background: color-mix(in srgb, var(--white), transparent 90%);

    transition: ease-in-out 50ms;
}

.navigation > a:hover {
    transform: scale(1.1);
}

.navigation > a:active {
    transform: scale(1.05);
}

/***********
 * Content *
 ***********/

.content {
    flex-grow: 1;
    padding: 0 10vw;
    overflow: auto;
}

/*********
 * Popup *
 *********/

#popup {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: color-mix(in srgb, var(--black), transparent 75%);
}

#popup > .body {
    padding: 20px 40px;
    margin: 25%;

    font-size: 4rem;
    font-family: "Metal Mania", system-ui;

    border-radius: 10px;
    background: var(--gray);
    box-shadow:
        0 1px 8px  0   color-mix(in srgb, var(--black), transparent 80%),
        0 3px 4px  0   color-mix(in srgb, var(--black), transparent 86%),
        0 3px 3px -2px color-mix(in srgb, var(--black), transparent 88%);

    animation: shake 1s;
    animation-iteration-count: infinite;
}

/**************
 * Animations *
 **************/

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}