/* Made by 3urobeat: https://github.com/HerrEurobeat/website */

/* Show background */
body {
    background-image: url('./images/background.gif');
    background-size: 100%;
    background-repeat: repeat-y;
    background-attachment: fixed;
}

/* Prevent animations on body (js will remove this after 500ms) https://stackoverflow.com/a/38296629/12934162 */
body.preload * {
    animation-duration: 0s !important;
    -webkit-animation-duration: 0s !important;
    transition:background-color 0s, opacity 0s, color 0s, width 0s, height 0s, padding 0s, margin 0s !important;
}


/* Show hamburger menu | Credit for the general idea on how to do it: https://w3codepen.com/howto-html-css-hamburger-menu-icon/ & https://codepen.io/scott8035/pen/aEejrq */
#hamburger-menu {
    position: absolute;    
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;
}

/* Set the size of the label around the hamburger to make clickable area bigger */
#menu-label {
    display: block;
    position: relative;
    z-index: 999; /* Show always on top */

    top: 15px;
    left: 15px;

    height: 25px;
    width: 32.5px;

    cursor: pointer;
}

/* Show the slices of the hamburger */
#menu-label span {
    display: block;
    position: relative;

    top: 2.5px;

    margin: 4px;
    height: 4px;
    width: 25px;

    background: #7e7e7e;
    border-radius: 20px;

    cursor: pointer;
}

/* Hide checkbox */
input[type="checkbox"] {
    display: none;
}

/* Add animation when hamburger is clicked */
#menu-checkbox:checked ~ #menu-label span:nth-child(1) {
    -webkit-transform: rotate(135deg) translate(5px, -6.5px);
    -moz-transform: rotate(135deg) translate(5px, -6.5px);
    -o-transform: rotate(135deg) translate(5px, -6.5px);
    transform: rotate(135deg) translate(5px, -6.5px);
}

#menu-checkbox:checked ~ #menu-label span:nth-child(2) {
    opacity: 0;
}

#menu-checkbox:checked ~ #menu-label span:nth-child(3) {
    -webkit-transform: rotate(-135deg) translate(5px, 6px);
    -moz-transform: rotate(-135deg) translate(5px, 6px);
    -o-transform: rotate(-135deg) translate(5px, 6px);
    transform: rotate(-135deg) translate(5px, 6px);
}

#menu-label span {  
    cursor: pointer; 
    -webkit-transition: .20s ease-in-out;
    -moz-transition: .20s ease-in-out;
    -o-transition: .20s ease-in-out;
    transition: .20s ease-in-out;
}


/* Hamburger Menu Panel - Animations: */
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* Show background of menu-panel, make edges round and move it to the top left to only show the bottom right round corner */
#menu-panel {
    position: relative;

    top: -200px;
    left: -125px;
    height: 600px;
    width: 400px;

    border-radius: 30%;
    background: rgba(104, 104, 104, 0.25);

    padding-right: 75px; /* Add some padding so that you can't collapse the menu accidentally */    
}

/* Remove bullet points of list */
#menu-list {
    list-style-type: none;
}

/* Add margin between entries in list except for last entry */
#menu-list li:not(:last-child) {
    margin-bottom: 5px;
}

/* Fade in elements in list and move them to the bottom right (since we moved the div to the top left) */
#menu-list li a {
    -moz-transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: color 0.2s ease-in-out, color 0.2s ease-in-out;

    position: relative;
    white-space: nowrap;    

    top: 225px;
    left: 125px;

    font-family: sans-serif;
    font-size: large;

    color: #bdbdbd;
    text-decoration: none;
}

/* Hover animation for elements in list */
#menu-list li a:hover {
    color: #ffffff;
}

/* Set size of images in the entries */
#menu-list li a img {
    height: 1em;
    min-width: 1.5em; /* Set min width and tell image to scale down so that the text is in one nice line below each other */
    object-fit: scale-down;
}

/* Show the panel when the hamburger menu icon is clicked */
#menu-checkbox:checked ~ #menu-panel { /* Show drawer when hamburger icon is clicked */
    display: block;

    /* Add animation to panel open & close */
    -webkit-animation-duration: .40s;
    animation-duration: .40s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

/* Hide the panel when the hamburger menu icon is clicked */
#menu-checkbox:not(:checked) ~ #menu-panel {
    display: flex;
    
    -webkit-animation-duration: .40s;
    animation-duration: .40s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;

    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}


/* Text */
#div-text {
    color: #ffffff;
    
    position: absolute;
    top: 45%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

    text-align: left;
    
    font-family: sans-serif;
    font-size: xx-large;
}


/* Buttons */
#div-buttons {
    color: #ffffff;

    position: absolute;
    top: 45%;
    margin-top: 70px; /* make sure that there is a fixed gap between the text and the buttons div so that they won't overlap when the window is really small */
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);

    white-space: nowrap;

    font-family: sans-serif;
    font-size: medium;

    opacity: 0; /* fadeIn function will handle this */
}


/* Style 1 */
.button {
    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;

    height: 3em;
    line-height: 3em;
    padding: 0 2em;

    text-align: center;
    text-decoration: none;

    color: #e9e9e9;
    white-space: nowrap;

    outline: #595959;
    outline-width: 2px;

    border: 2px solid black;
    border-radius: 6px;
    border-color: #6a6a6a;

    background: rgba(226, 236, 248, 0.1);
    
    display: inline-block;
    margin-right: 5px;

    min-width: 150px; /* Force both buttons to be exactly the same width */
}

.button:hover {
    background-color: #737373;
}

.button:active {
    background-color: #595959;
}


/* Style 2 */
.button.special {
    background-color: #c9c9c9;
    border: none;
    color: #373737 !important;

    min-width: 0px;
}

.button.special:hover {
    background-color: #ffffff;
}

.button.special:active {
    background-color: #ffffff;
}