@charset "UTF-8";

/* //// */
/* ROOT */
/* //// */

:root {
    --button-color: #26B5DA;

    --text-color-inBeeld: black;
    --text-color-border: white;
    --background-color-shark: white;
    --shark-popup-button-color: black;

    --keyframes-box-shadow: rgba(0, 247, 255, 0);

    --slideshow-button-background: #0b304ccf;
    --slideshow-button-text: white;
    --slideshow-button-background-hover: #062237cf;
}


:root[data-color-mode="light-mode"] { 
    --button-color: #26B5DA;

    --text-color-inBeeld: black;
    --text-color-border: #012033;

    --keyframes-box-shadow: rgba(0, 247, 255, 0);

    --slideshow-button-background: #0b304ccf;
    --slideshow-button-text: white;
    --slideshow-button-background-hover: #062237cf;
}




/* //// */
/* TEXT SPECIFICATIES ALGEMEEN VOOR DE SCIENCE PAGINA */
/* //// */

main section:first-of-type p:nth-of-type(2), main section:first-of-type p:nth-of-type(3) {
    font-size: 0.8em;
}

main section:first-of-type p:nth-of-type(2) {
    font-weight: bold;
    padding: 0;
}


/* //// */
/* SECTION 2  */
/* //// */

main section:nth-of-type(2) a:first-of-type{
    color: var(--text-color);
    text-align: center;
    display: block;
}





/* //// */
/* SECTION 3 MET DE HAAI  */
/* //// */

/* div met de haai, waarin de li'tjes zich bevinden */
.shark {
    position: relative;
}

/* de knoppen algemeen op de haai */
.shark ol li{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width:1.5em;

    box-shadow: none;

    overflow-x: visible;
}

/* individuele plekken van de knoppen tot 12 */
.shark li:first-of-type {
    top: calc(13% - .75em);
    left: calc(52% - .75em); 
}

.shark li:first-of-type button {
    animation-delay: .2s;
}



.shark li:nth-of-type(2) {
    top: calc(50% - .75em);
    left: calc(16% - .75em);
}

.shark li:nth-of-type(2) button {
    animation-delay: 2s;
}



.shark li:nth-of-type(3) {
    top: calc(28% - .75em);
    left: calc(60% - .75em);
}

.shark li:nth-of-type(3) button {
    animation-delay: 1s;
}



.shark li:nth-of-type(4) {
    top: calc(67% - .75em);
    left: calc(52% - .75em);
}

.shark li:nth-of-type(4) button {
    animation-delay: 1.5s;
}



.shark li:nth-of-type(5) {
    top: calc(28% - .75em);
    left: calc(40% - .75em);
}

.shark li:nth-of-type(5) button {
    animation-delay: 2.5s;
}



.shark li:nth-of-type(6) {
    top: calc(45% - .75em);
    left: calc(65% - .75em);
}

.shark li:nth-of-type(6) button {
    animation-delay: .5s;
}




.shark li:nth-of-type(7) {
    top: calc(53% - .75em);
    left: calc(90% - .75em);
}

.shark li:nth-of-type(7) button {
    animation-delay: 1.2s;
}



.shark li:nth-of-type(8) {
    top: calc(46% - .75em);
    left: calc(43% - .75em);
}

.shark li:nth-of-type(8) button {
    animation-delay: 2.8s;
}



.shark li:nth-of-type(9) {
    top: calc(48% - .75em);
    left: calc(53% - .75em);
}

.shark li:nth-of-type(9) button {
    animation-delay: 2.2s;
}

.shark li:nth-of-type(10) {
    top: calc(71% - .75em);
    left: calc(66% - .75em);
}

.shark li:nth-of-type(10) button {
    animation-delay: .7s;
}



.shark li:nth-of-type(11) {
    top: calc(50% - .75em);
    left: calc(80% - .75em);
}

.shark li:nth-of-type(11) button {
    animation-delay: 2.9s;
}



.shark li:nth-of-type(12) {
    top: calc(61% - .75em);
    left: calc(34% - .75em);
}

.shark li:nth-of-type(12) button {
    animation-delay: 1.4s;
}


.shark button {
    background-color: var(--button-color);
    color: var(--text-color);
    border: none;

    font-size: .7em;

    animation: sharkButtons 3s infinite;
}


/* De extra informatie die oppopt als je op de bolletjes klikt */
main section:nth-of-type(3) > ol li { 
    position: fixed;
    background-color: var(--background-color-shark);
    inset: 0;
    text-align: center;
    
    /* opacity: 0; */
    display: none;
    color: var(--text-color-inBeeld);

    /* transition: 1s; */
}


/* De pop up zelf */
main section:nth-of-type(3) > ol li h3 {
    letter-spacing: 0.3em;
}

main section:nth-of-type(3) > ol li img {
    width: 80%;
    padding: 2em;
    margin-left: auto;
    margin-right: auto;
}

main section:nth-of-type(3) > ol li button {
    order: -1;
    border: 2px solid var(--shark-popup-button-color);

    margin-bottom: 2em;

    width: 2em;
    height: 2em;
}

main section:nth-of-type(3) > ol li.inBeeld {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    opacity: 1;

}

main section:nth-of-type(3) > ol li.inBeeld h3, main section:nth-of-type(3) > ol li.inBeeld p {
    width: 90%;
}

main section:nth-of-type(3) > ol li.inBeeld button .bar {
    background-color: var(--shark-popup-button-color);

    rotate: 45deg;
}

main section:nth-of-type(3) > ol li.inBeeld button .bar:first-of-type {
    rotate: -45deg;
}


@keyframes sharkButtons {
    0% {
       /* scale: 1;  */
       /* opacity: 0.8; */
       box-shadow: 0 0 0 0 var(--button-color);
       animation-timing-function: ease-out;
    }

    40% {
        /* scale: 1.5; */
        /* opacity: 0; */
        box-shadow: 0 0 0 1em var(--keyframes-box-shadow);
    }
    40.001%, 100% {
        box-shadow: 0 0 0 0 var(--keyframes-box-shadow);
    }
}
    




/* //// */
/* VIERDE SECTION LIJST MET ACHIEVEMENTS*/
/* //// */

main section:nth-of-type(4) {
    background-image: linear-gradient(var(--gradient-begin-color), var(--gradient-end-color) );
}

main section:nth-of-type(4) h2 {
    position: absolute;
    translate: -999% 0;
}

main section:nth-of-type(4) ul li {
    text-align: center;
    text-transform: uppercase;
}

main section:nth-of-type(4) ul li p:first-of-type {   
    font-size: 8em;
    -webkit-text-stroke: .01em var(--text-color-border);
    color: transparent;
    padding-top: .3em;
}





/* //// */
/* VIJFDE SECTION MET SLIDESHOW */
/* //// */

main section:nth-of-type(5) {
    padding-top: 0;
    position: relative;
}

main section:nth-of-type(5) ul{
    width: 100%;;
    height: auto;
    margin: auto;
    overflow: hidden;
    /* transform: translateY(50%); */

    display: flex;
    align-items: center;
}

/* main section:nth-of-type(5) ul.sliding-transition {
    transition: transform 0.5s ease-in-out;
} */

main section:nth-of-type(5) ul li {
    flex: 0 0 100%;
    transition: transform 1s ease;
}

main section:nth-of-type(5) ul li img {
    width: 100%;
    height: auto;
    /* object-fit: cover; */
    /* border-radius: 0; */
    /* flex-basis: content; */
}

main section:nth-of-type(5) > button {
    top: 50%;
    position: absolute;

    background-color: var(--slideshow-button-background);
    color: var(--slideshow-button-text);
    border: none;

    /* z-index: 30; */
    cursor: pointer;

    transform: translateY(-50%);
    /* transition: 1s ease-in; */
}

main section:nth-of-type(5) > button:hover {
    background-color: var(--slideshow-button-background-hover);
}

main section:nth-of-type(5) > button:active {
    background-color: var(--slideshow-button-background-hover);
    scale: 1.1;
}

/* pijltje naar rechts */
main section:nth-of-type(5) > button:first-of-type {
    right: 0%;
}
/* pijltje naar links */
main section:nth-of-type(5) > button:last-of-type {
    left: 0%;
}