@charset "utf-8";

/*
Styles for
Home Page
*/

@media (prefers-color-scheme: dark) {
    body {
        color: #eee;
        background: #242323;
    }
}


body {
    margin: 0;
    position: relative;
    min-width: 320px;
    width: 100%;
    display: block;
    font-family: Arial;
}

h1 {
    text-align: center;
    margin: 0%;
    box-shadow: 0vh 0vh 0vh rgba(255, 255, 255, 0.2);
    text-shadow: -0.1vh -0.1vh 0 #585858;
}




ul {
    font-family: Arial;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #02b875;
    bottom: 0;
    height: 5vh;
    font-size: 1.8vh;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 1.5vh 1.7vh;
    text-decoration: none;
}

.Info {
    width: 1.8vh;
}

li a:hover:not(.active) {
    background-color: #04AA6D;
}

.active {
    background-color: #006b44;
}

.card {
    width: 96%;
    height: 20%;
    background: #02b875;
    box-sizing: border-box;
    color: #FFF;
    margin: 2%;
    margin-top: 1%;
    box-shadow: 0vh 0.2vh 1.8vh -0.4vh rgba(0, 0, 0, 0.75);
    font-size: 1.8vh;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.card div {
    padding: 2.5vh;
}


.card .switch {
    display: flex;
    text-align: center;
    align-items: center;
    box-shadow: 0vh 0vh 0vh rgba(255, 255, 255, 0.2);
    text-shadow: -0.1vh -0.1vh 0 #585858;
    font-size: 4vh;
    opacity: 0;
    transition: opacity 0.1s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
}

#LeftSwitch {
    padding-right: 5vh;
    background: linear-gradient(to right, #00000030 75%, #00000000);
}

#RightSwitch {
    padding-left: 5vh;
    background: linear-gradient(to left, #00000030 75%, #00000000);
}

.card .switch:hover {
    opacity: 0.85;
}

#RightSwitch:active,
#LeftSwitch:active {
    opacity: 1;
}

.slideLeft {
    animation: slideInToLeft 1s ease-out;
}

.slideRight {
    animation: slideInToRight 1s ease-in-out;
}




@keyframes slideInToLeft {
    0% {
        translate: 0vw 0vw;
        opacity: 1;
    }

    50% {
        translate: 100vw 0vw;
        opacity: 0;
    }

    50.001% {
        translate: -100vw 0vw;
        opacity: 0;
    }

    100% {
        translate: 0vw 0vw;
        opacity: 1;
    }
}

@keyframes slideInToRight {
    0% {
        translate: 0vw 0vw;
        opacity: 1;
    }

    50% {
        translate: -100vw 0vw;
        opacity: 0;
    }

    50.001% {
        translate: 100vw 0vw;
        opacity: 0;
    }

    100% {
        translate: 0vw 0vw;
        opacity: 1;
    }
}


/* Possison */


div.Right {
    position: absolute;
    left: 100vw;
}



/* reload*/


@media only screen and (max-width: 980px) {
    div.arrowbox {
        display: none;
        visibility: hidden;
        opacity: 0.0;
        position: absolute;
        left: -99999999px;
    }

    div.Reload {
        display: none;
        visibility: hidden;
        opacity: 0.0;
        position: absolute;
        left: -99999999px;
    }

    div.Center {

        transition: left 1s;
        height: 35vh;
        width: 98.5vw;
    }

    div.Left {

        height: 35vh;
        width: 98.5vw;
        transition: left 1s;
    }
}


@media only screen and (min-width: 981px) {
    div.arrowbox {

        font-family: Arial;
        box-shadow: 0px 0px 0.5vw rgba(0, 0, 0, 0.75);
        background-color: #02b875;
        color: white;
        position: absolute;
        top: 85vh;
        right: 2vw;
        opacity: 0;
        transition: opacity 0.25s;
        font-size: 4vh;
        border-radius: 5%;
        text-align: center;
        width: 10.67vh;
        height: 2.67vh;
        padding: 1vw 0px 0.8vw 0px;
        line-height: 0.5;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
    }

    div.Reload {
        box-shadow: 0px 0px 0.5vw rgba(0, 0, 0, 0.75);
        background-color: #02b875;
        color: white;
        position: absolute;
        top: 23.5vh;
        right: 2vw;
        opacity: 0;
        transition: opacity 0.25s;
        font-size: 2vh;
        border-radius: 5%;
        text-align: center;
        width: 10.67vh;
        height: 2.67vh;
        padding: 1vw 0px 0.8vw 0px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    div.Reload:hover {
        opacity: 0.9;
    }

    div.Reload:active {
        background-color: #006b44;
    }

    /* New Arrow */

    div.arrowbox:hover {
        opacity: 0.9;
    }

    div.arrowbox:active {
        background-color: #006b44;
    }

    div.slidecontainer {
        position: absolute;
    }

    div.Center {
        position: absolute;
        left: 0px;
        transition: left 1s;
        height: 70vh;
        width: 98.5vw;
    }

    div.Left {
        position: absolute;
        left: -100vw;
        transition: left 1s;
        height: 70vh;
        width: 98.5vw;
    }
}