@import url('https://fonts.googleapis.com/css2?family=Farro:wght@300;400;500;700&family=Nerko+One&display=swap');

html, body {
    height: 100%;
    margin: 0;
    /*padding-bottom: 2em;*/
}

.swal2-popup {
    font-family: "Farro", serif;
    max-width: 80%;
    margin-right: 2em;
    margin-bottom: 15em;
}

/* WEBSHOP.PHP */
.webshop-navbar {
    background: linear-gradient(90deg, rgba(11,163,19,1) 0%, rgba(9,121,36,1) 50%, rgba(0,119,4,1) 100%);
    padding: 1em;
    font-family: "Farro", serif;
}

.webshop-navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#webshop-name {
    display: inline;
    float: left;
    color: white;
    padding: 1em;
}

.webshop-navbar li a {
    float: right;
    color: white;
    display: block;
    text-align: center;
    text-decoration: none;
    padding: 1em;
    border-radius: 10px;
    background-color: darkgreen;
}

.webshop-info h1 {
    font-family: "Nerko One", cursive;
    text-align: center;
    font-size: 2em;
    color: rgb(66, 66, 66);
}

.webshop-img {
    width: 100%;
    height: auto;
    background-image: url(img/webshop-banner.png);
    background-position: center;
    background-size: cover;
}

.webshop-ad {
    margin-top: -0.5em;
    width: 98.35%;
    background: linear-gradient(90deg, rgba(11,163,19,1) 0%, rgba(9,121,36,1) 50%, rgba(0,119,4,1) 100%);
    padding: 1em;
}

.webshop-ad h6 {
    font-family: "Farro", serif;
    text-align: center;
    font-size: larger;
}

.webshop-ad p {
    font-family: "Farro", serif;
    text-align: center;
    font-size: smaller;
}

.webshop-ad h6, .webshop-ad p {
    color: white;
    margin-top: 0;
    margin-bottom: 0;
}

.webshop-ad a {
    text-decoration: underline;
    color: white;
}

.webshop-box-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    place-items: center;
    align-items: self-start;
    gap: 0;
}

.webshop-box-1 {
    font-family: "Farro", serif;
    padding: 1em;
    border-radius: 10px;
    text-align: center;
    margin: 0.7em;
    border: 1px solid darkgreen;
    padding-top: 0;
    margin-top: 1em;
}

.webshop-box-2 {
    font-family: "Farro", serif;
    padding: 1em;
    border-radius: 10px;
    text-align: center;
    margin: 0.7em;
    border: 1px solid darkgreen;
    padding-top: 0;
    margin-top: 1em;
}

.webshop-box-1 p {
    font-size: smaller;
}

.webshop-box-1 i {
    border-radius: 50%;
    width: 1em;
    height: 1em;
    margin-top: -0.8em;
    background-color: darkgreen;
    color: white;
    padding: 1em;

}

.webshop-box-1 p {
    margin-top: -2em;
}

.webshop-box-2 p {
    font-size: smaller;
}

.webshop-box-2 i {
    border-radius: 50%;
    width: 1em;
    height: 1em;
    margin-top: -0.8em;
    background-color: darkgreen;
    color: white;
    padding: 1em;

}

.webshop-box-2 p {
    margin-top: -2em;
}

@media screen and (min-width: 1250px) {
    .webshop-box-1 {
        margin-left: 15em;
    }

    .webshop-box-2 {
        margin-right: 15em;
    }
}

@media screen and (max-width: 700px) {
    .webshop-ad h6, .webshop-ad p {
        margin-right: 2em;
    }

    .webshop-img img {
        height: 100px;
        width: auto;
        
    }
}

.webshop-trailer {
    margin-top: 1.5em;
}

.webshop-trailer h4 {
    font-family: "Farro", serif;
    text-align: center;
    width: 80%;
    margin: auto;
}

#webshop-page {
    padding: 0;
    margin: 0;
}

/* INDEX.HTML PAGE */
#login-page {
    background-image: url("https://www.touristserver.nl/img/147752/kapshoeve-buitenspeeltuin-kinderen-spelen.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-height: 90%;
}

.login-logo {
    text-align: center;
    margin-bottom: -5em;
    margin-top: 1em;
}

.login-logo img {
    height: 7em;
    width: auto;
}

.login-wrapper {
    font-family: "Farro", serif;
    display: grid;
    place-items: center;
    height: 90%;
}

.login-content {
    text-align: center;
    color: white;
    background: linear-gradient(90deg, rgba(11,163,19,1) 0%, rgba(9,121,36,1) 50%, rgba(0,119,4,1) 100%);
    border-radius: 7px;
    padding: 2.5em;
}

.login-element {
    padding: 1.5em;
    background-color: white;
    border-radius: 7px;
}

.login-element input {
    text-align: center;
    font-family: "Farro", serif;
    padding: 0.8em;
    margin: 0.5em;
    border-radius: 15px;
    border: 1px solid darkgreen;
}

.login-element button {
    margin-top: 0.8em;
    width: 60%;
    background: none;
    border-radius: 10px;
    border: none;
    color: darkgreen;
    font-size: 1em;
}

.login-new {
    margin-top: 1em;
}

.login-new a {
    font-size: smaller;
    text-decoration: underline;
    color: white;
}

.login-warning {
    text-align: center;
    margin: auto;
    margin-top: 1em;
    padding: 0.5em;
    background-color: orangered;
    border-radius: 10px;
    width: 60%;
}

.login-warning p {
    text-align: center;
    font-family: "Farro", serif;
    color: white;
    font-size: smaller;
}

.login-warning i {
    float: left;
    margin-left: 1em;
    font-size: larger;
}

/* ADMIN.PHP */
#no-staff a {
    color: white;
}

.admin-login-content {
    text-align: center;
    color: white;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,49,1) 50%, rgba(0,212,255,1) 100%);
    border-radius: 7px;
    padding: 2.5em;
}

/* ADMIN_START.HTML */
.admin-title-content {
    text-align: center;
    font-family: "Farro", serif;
    color: white;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,49,1) 50%, rgba(0,212,255,1) 100%);
    width: 50%;
    margin: auto;
    padding: 0.5em;
    border-radius: 10px;
    margin-top: 1em;
}

.admin-code {
    font-family: "Farro", serif;
    text-align: center;
    margin: auto;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    border-radius: 10px;
    width: 70%;
    padding: 1em;
    margin-top: 1em;
}

.admin-code-generator input {
    margin-top: 1em;
}

.admin-code-generator input[type='email'] {
    margin-top: 1em;
    font-family: "Farro", serif;
    transition-duration: 200ms;
    padding: 1em;
    border-radius: 10px;
    text-decoration: none;
    margin-bottom: 1em;
    border: 1px solid white;
    text-align: center;
    width: 50%;
}

.admin-code-generator input[type='email']:hover {
    border: 1px solid black;
}

.admin-code-generator input[type='submit'] {
    margin-top: 1em;
    font-family: "Farro", serif;
    transition-duration: 200ms;
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,49,1) 50%, rgba(0,212,255,1) 100%);
    padding: 1em;
    color: white;
    border-radius: 10px;
    text-decoration: none;
    border: none;
}

.admin-code-generator input[type='submit']:hover {
    background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(54,4,22,1) 50%, rgba(1,68,82,1) 100%);
}

/* START.HTML PAGE */
.message-wrapper {
    width: 100%;
}

.message-item img {
    width: 80%;
    height: auto;
}

#start-message-1 {
    transform: translateX(-100%);
    animation-name: loadingMessage1;
    animation-duration: 1s;
    animation-delay: 0.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

#start-message-2 {
    transform: translateX(100%);
    animation-name: loadingMessage2;
    animation-duration: 1s;
    animation-delay: 3.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    float: right;
    margin-top: -4em;
}

#start-message-3 {
    transform: translateX(-100%);
    animation-name: loadingMessage1;
    animation-duration: 1s;
    animation-delay: 5.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    margin-top: -4em;
}

#start-message-4 {
    transform: translateX(100%);
    animation-name: loadingMessage2;
    animation-duration: 1s;
    animation-delay: 7.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    float: right;
    margin-top: -4em;
}

#start-message-5 {
    transform: translateX(-100%);
    animation-name: loadingMessage1;
    animation-duration: 1s;
    animation-delay: 9.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    margin-top: -4em;
}

#start-message-6 {
    transform: translateX(100%);
    animation-name: loadingMessage2;
    animation-duration: 1s;
    animation-delay: 11.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    float: right;
    margin-top: -4em;
}

.message-img {
    text-align: center;
    transform: translateX(-100%);
    animation-name: loadingMessage1;
    animation-duration: 1s;
    animation-delay: 5.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.message-img img {
    margin-left: 2.5em;
    margin-top: -3em;
    width: 55%;
    height: auto;
}

.start-continue {
    text-align: center;
    margin-top: 2em;
    transform: translateY(100%);
    opacity: 0;
    animation-name: loadingResponse1;
    animation-duration: 1s;
    animation-delay: 8.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.start-continue button {
    background: none;
    border: 1px solid black;
    border-radius: 10px;
    padding: 1em;
    width: 50%;
    font-family: "Farro", serif;
    margin-top: 1em;
}

.start-continue p {
    font-family: "Farro", serif;
}

@keyframes loadingMessage1 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes loadingMessage2 {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes loadingResponse1 {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


/* LOADPAGE.HTML */
.loadPage-Lola {
    font-family: "Farro", serif;
    text-align: center;
    margin: auto;
    width: 80%;
    margin-top: 2em;
    position: absolute;
    left: 2.5em;
    animation-name: loadingOne;
    animation-duration: 4s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}

.loadPage-Lola img {
    width: 80%;
    height: auto;
}

.loadPage-info {
    opacity: 0;
    font-family: "Farro", serif;
    text-align: center;
    margin: auto;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    width: 80%;
    border-radius: 10px;
    margin-top: 1em;
    animation-name: loadingTwo;
    animation-duration: 4s;
    animation-delay: 4s;
    animation-fill-mode: forwards;
}

.loadPage-info img {
    width: 20%;
    height: auto;
}

.loadPage-info h6 {
    margin-top: -0.7em;
}

.loadPage-top {
    opacity: 0;
    font-family: "Farro", serif;
    text-align: center;
    margin: auto;
    margin-top: 1em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    padding: 1em;
    padding-bottom: 0;
    width: 80%;
    border-radius: 10px;
    animation-name: loadingThree;
    animation-duration: 4s;
    animation-delay: 7s;
    animation-fill-mode: forwards;
}

.loadPage-top img, .loadPage-top h4, .loadPage-top h1 {
    margin: 0;
}

.loadPage-middle {
    opacity: 0;
    font-family: "Farro", serif;
    text-align: center;
    margin: auto;
    margin-top: 1em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    padding: 1em;
    padding-bottom: 0;
    width: 80%;
    border-radius: 10px;
    animation-name: loadingThree;
    animation-duration: 4s;
    animation-delay: 10s;
    animation-fill-mode: forwards;
}

.loadPage-middle img, .loadPage-middle h4, .loadPage-middle h1 {
    margin: 0;
}

.loadPage-bottom {
    opacity: 0;
    font-family: "Farro", serif;
    text-align: center;
    margin: auto;
    margin-top: 1em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    padding: 1em;
    padding-bottom: 0;
    width: 80%;
    border-radius: 10px;
    animation-name: loadingThree;
    animation-duration: 4s;
    animation-delay: 14s;
    animation-fill-mode: forwards;
}

.loadPage-bottom img, .loadPage-bottom h4, .loadPage-bottom h1 {
    margin: 0;
}

@keyframes loadingOne {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-100px);
    }
}

@keyframes loadingTwo {
    0% {
        opacity: 0;
        transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes loadingThree {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* LOLAUITLEG.PHP */
#bodyPhone {
    background: url(img/phone.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.uitleg-Lola {
    font-family: "Farro", serif;
    text-align: center;
    margin: auto;
    width: 100%;
    margin-top: 1em;
    position: absolute;
}

.uitleg-Lola img {
    width: 90%;
    height: auto;
}

#lola-uitleg-notif1 {
    transform: translateY(-200%);
    animation-name: lolaUitleg1;
    animation-duration: 12.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

#lola-uitleg-notif2 {
    transform: translateY(-200%);
    animation-name: lolaUitleg2;
    animation-duration: 10s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 10s;
}

#lola-uitleg-notif3 {
    transform: translateY(-300%);
    animation-name: lolaUitleg3;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    animation-delay: 18s;
}

@keyframes lolaUitleg1 {
    0% {
        transform: translateY(-200%);
    }

    25% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(0);
    }

    75% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-200%);
    }
}

@keyframes lolaUitleg2 {
    0% {
        transform: translateY(-200%);
    }

    25% {
        transform: translateY(-100%);
    }

    50% {
        transform: translateY(-100%);
    }

    75% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(-200%);
    }
}

@keyframes lolaUitleg3 {
    0% {
        transform: translateY(-300%);
    }

    100% {
        transform: translateY(-200%);
    }
}

/* UITLEG.PHP PAGE */
.question-hint {
    font-family: "Farro", serif;
    text-align: center;
    background-color: #003a00;
    border-radius: 10px;
    padding: 0.8em;
    max-width: 60%;
    color: white;
    margin: auto;
    margin-top: 5em;
    font-size: smaller;
}

.question-hint:hover {
    cursor: pointer;
}

.question-hint i {
    font-size: larger;
    margin-bottom: 1em;
}

/* VRAAG1.HTML PAGE */
.title-wrapper {
    text-align: center;
}

.title-content {
    font-family: "Farro", serif;
}

.lola-msg img {
    width: 80%;
    height: auto;
    transform: translateY(-200%);
    animation-name: notifIn;
    animation-duration: 5.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
}

.lola-msg-2 img {
    width: 80%;
    height: auto;
    transform: translateY(-400%);
    animation-delay: 11s;
    animation-name: notifIn2;
    animation-duration: 5.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    
}

.lola-msg-3 img {
    width: 80%;
    height: auto;
    transform: translateY(-200%);
    animation-name: notifIn4;
    animation-duration: 5.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.lola-msg-4 img {
    width: 80%;
    height: auto;
    transform: translateY(-350%);
    animation-name: notifIn3;
    animation-delay: 5s;
    animation-duration: 5.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.lola-msg-5 img {
    width: 80%;
    height: auto;
    transform: translateY(-350%);
    animation-name: notifIn3;
    animation-duration: 5.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.lola-uploader img {
    transform: translateY(-300%);
    animation-delay: 5.5s;
    animation-name: notifIn;
    animation-duration: 5.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
}

.walkie-talkie {
    opacity: 0;
    margin: auto;
    margin-top: -15em;
    background-color: #003a00;
    width: 80%;
    border-radius: 10px;
    padding: 1em;
    animation-delay: 10s;
    animation-name: audioIn;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.walkie-talkie-question a {
    background-color: darkgreen;
    color: white;
    padding: 1em;
    display: block;
    margin-bottom: 1em;
}

.toiletgebouw-question {
    opacity: 0;
    margin: auto;
    margin-top: -15em;
    background-color: #003a00;
    width: 80%;
    border-radius: 10px;
    padding: 1em;
    animation-delay: 3s;
    animation-name: questionIn;
    animation-duration: 2.5s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    font-family: "Farro", serif;
    color: white;
}

.toiletgebouw-question a {
    background-color: darkgreen;
    color: white;
    padding: 1em;
    display: block;
    margin-bottom: 1em;
}

.question-context {
    font-family: "Farro", serif;
    width: 80%;
    margin: auto;
}


@keyframes notifIn {
    0% {
        transform: translateY(-300%);
    }

    25% {
        transform: translateY(-20%);
    }

    50% {
        transform: translateY(-20%);
    }

    75% {
        transform: translateY(-20%);
    }

    100% {
        transform: translateY(-300%);
    }
}

@keyframes notifIn2 {
    0% {
        transform: translateY(-400%);
    }

    50% {
        transform: translateY(-230%);
    }

    100% {
        transform: translateY(-230%);
    }
}

@keyframes notifIn3 {
    0% {
        transform: translateY(-300%);
    }

    25% {
        transform: translateY(-20%);
    }

    50% {
        transform: translateY(-20%);
    }

    75% {
        transform: translateY(-20%);
    }

    100% {
        transform: translateY(-20%);
    }
}

@keyframes notifIn4 {
    0% {
        transform: translateY(-350%);
    }

    25% {
        transform: translateY(-130%);
    }

    100% {
        transform: translateY(-130%);
    }
}

@keyframes audioIn {
    0% {
        transform: translateY(300%);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes questionIn {
    0% {
        transform: translateY(300%);
        opacity: 0;
    }

    100% {
        transform: translateY(85%);
        opacity: 1;
    }
}

.rps {
    display: grid;
    place-items: center;
}

.rps img {
    display: none;
    width: 80%;
    height: auto;
}