html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #eee;
}

header {
    text-align: center;
    padding: auto;
    font-weight: 600;
    font-size: 1.1rem;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 100px;
    background-image: linear-gradient(#fff, #eee);
    box-shadow: 0px 0px 5px #0005;
    z-index: 100000;
}

.icon {
    height: 90px;
    margin: 5px;
    display: inline-block;
    pointer-events: none;
}

header h1 {
    display: inline-block;
    vertical-align: text-bottom;
}

main {
    margin: auto;
    margin-top: 110px;
    width: 800px;
    height: 100%;
    padding-bottom: 60px;
}

article {
    background-color: #fff;
    box-shadow: 0px 0px 15px #0005;
    margin-bottom: 10px;
    padding: 15px;
    border-radius: 5px;
}

footer {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    height: fit-content;
    font-weight: 500;
    background-image: linear-gradient(#eee, #fff);
    box-shadow: 0px 0px 5px #0005;
}

.button {
    text-decoration: none;
    border-radius: 5px;
    height: 30px;
    box-shadow: 0px 0px 5px #0005;
    padding: 5px;
    color: #000;
}

.button:hover {
    box-shadow: 0px 0px 10px #0008;
    transition: all 0.3s;
}

#back-btn {
    display: inline-block;
    margin-bottom: 10px;
    width: fit-content;
    height: fit-content;
}

.folder-title {
    display: inline-block;
    margin-left: 10px;
}

form {
    padding: 15px;
    border: #ddd solid 1px;
    border-radius: 15px;
    margin-top: 20px;
}

form label {
    display: block;
    margin-bottom: 20px;
}

form label.title {
    margin-top: -30px;
    margin-left: 5px;
    font-size: 22px;
    font-weight: 500;
    background-color: #fff;
    width: fit-content;
    padding: 2px;
}

.file {
    border-radius: 5px;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    border: solid #ddd 1px;
    transition: all 0.2s;
}

a.file {
    display: block;
    text-decoration: none;
    color: #000;
}

.file img {
    margin-bottom: -10px;
}

.file:has(img) {
    padding-bottom: 20px;
}

.file:hover {
    box-shadow: 0px 0px 5px #0005;
}

.snippet {
    padding: 10px;
    padding-right: 15px;
    border-radius: 5px;
    border: solid 1px #ddd;
    font-size: 1rem;
    font-family: monospace;
    width: fit-content;
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    background-color: #fff;
}

article .snippet {
    background-color: unset;
}

b {
    color: #444;
}

header a {
    color: #000;
    text-decoration: none;
}

.quizButton {
    display: block;
    margin: auto;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #ddd;
    font-size: 1.1rem;
    width: 90%;
}

.quizButton:hover {
    background-color: #eee;
    border: solid 1px #ddd;
    box-shadow: 0px 0px 5px #0005;
    transition: all 0.2s;
}

.quizButton:has(.check:checked) {
    background-color: #777bb3;
    color: #fff;
}

.quizButton:has(.check:checked):hover {
    background-color: #8689b9;
}

.quizButton:has(.check:checked) b {
    color: #fff;
    transition: all 0.2s;
}

#win {
    background-color: #0000;
    height: 150px;
    width: 150px;
    border-radius: 75px;
    margin: auto;
    margin-top: 20px;
    text-align: center;

    animation: walk-cycle steps(1000) infinite 5s;
    -webkit-animation: walk-cycle steps(1000) infinite 5s;
    z-index: 1;
    transition: opacity 1s;
    opacity: 1;
}

#win.loading {
    opacity: 0;
}

#winTitle {
    opacity: 1;
    transition: opacity 1s, transform 1s;
    animation: scroll-in 1s 2.4s steps(100) both;
}

@keyframes scroll-in {
    0% {
        transform: translate(0, 100%);
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.winContainer {
    text-align: center;
    overflow: hidden;
}

#winImg {
    transition: transform 0.5s;
    z-index: 100;
    width: 100px;
    padding: 25px;
    margin-top: -175px;
    transform: translate(0, -10%);
    animation: animate-cup 1.4s 1s both;
}

@keyframes animate-cup {
    0% {
        transform: translate(0,200%) rotate(360deg);
    }
    85% {
        transform: translate(0, -30%);
    }
    90% {
        transform: translate(0, -10%);
    }
    95% {
        transform: translate(0, -20%);
    }
    100% {
        transform: translate(0, -10%);
    }

}

#looseImg {
    transition: transform 0.2s, opacity 1s;
    margin: 10px;
    z-index: 100;
    width: 100px;
    border-radius: 50px;
    box-shadow: 0px 0px 10px #ddd;
    animation: fade-in steps(100) 2s 1s both;
}

@keyframes fade-in {
    0% {
        opacity: 0;
        box-shadow: none;
        transform: translate(200%, 0) rotate(360deg);
    }
    25% {
        transform: translate(0,0);
    }
    50% {
        opacity: 1;
        transform: rotate(0);
    }
    55% {
        transform: rotate(10deg);
    }
    63% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(10deg);
    }
    87% {
        transform: rotate(-10deg);
        box-shadow: none;
    }
    100% {
        box-shadow: 0px 0px 10px #ddd;
        transform: rotate(0);
        opacity: 1;
    }
}

#nextButton {
    border: #ddd 1px solid;
    display: block;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 5px;
    height: fit-content;
    width: fit-content;
    font-size: 1.1rem;
    background-color: #fff;
    padding: 5px;
}

@keyframes walk-cycle {  
    0% {
        transform: rotate(0deg);
        box-shadow: 0px 10px 5px 2px #fdca5d, 0px -10px 5px 1px #f1991f, inset 10px 0px 5px 2px #fdca5d, inset -10px 0px 5px 1px #f1991f, 
                    10px 0px 5px 1px #f4ad57, -10px 0px 5px 2px #f6b545, inset 0px 10px 5px 1px #f4ad57, inset 0px -10px 5px 2px #f6b545;
    }
    50% {
        transform: rotate(180deg);
        box-shadow: 0px 10px 5px 2px #f1991f, 0px -10px 5px 1px #fdca5d, inset 10px 0px 5px 2px #f1991f, inset -10px 0px 5px 1px #fdca5d, 
                    10px 0px 5px 1px #f6b545, -10px 0px 5px 2px #f4ad57, inset 0px 10px 5px 1px #f6b545, inset 0px -10px 5px 2px #f4ad57;
    }
    100% {
        transform: rotate(360deg);
        box-shadow: 0px 10px 5px 2px #fdca5d, 0px -10px 5px 1px #f1991f, inset 10px 0px 5px 2px #fdca5d, inset -10px 0px 5px 1px #f1991f, 
                    10px 0px 5px 1px #f4ad57, -10px 0px 5px 2px #f6b545, inset 0px 10px 5px 1px #f4ad57, inset 0px -10px 5px 2px #f6b545;
    }
}

@-webkit-keyframes walk-cycle {  
    0% {box-shadow: 0px 0px 0px 5px #fdca5d, inset 0px 0px 10px 5px #fdca5d; } 
    50% {box-shadow: 0px 0px 5px 0px #fdca5d, inset 0px 0px 20px 5px #fdca5d; }
    100% {box-shadow: 0px 0px 0px 5px #fdca5d, inset 0px 0px 10px 5px #fdca5d; } 
}

@media screen AND (max-width: 879px) {
    main {
        width: 90%;
    }

    header h1 {
        display: none;
    }

    .icon {
        pointer-events: visible;
    }

    .button {
        display: block;
        padding: 5px;
        height: fit-content;
        width: fit-content;
        margin: auto;
        margin-top: 5px;
    }

    .quiz {
        text-align: center;
    }
}

@media print {
    header {
        border: none;
        background-color: #0000;
        box-shadow: none;
        padding: 0px 0px 10px 0px;
    }

    footer {
        display: none;
    }
    
    article {
        box-shadow: none;
        border-radius: 0px;
        border-top: #ddd solid 1px;
        padding: 0px;
    }

    .print-display-none {
        display: none;
    }
}