/*page créée par Leon Bergmann / 19-Juin-2021*/


/* 
code for the whole page
___________________________________________________________
*/

#background {
    background-image: url(../Images/shiekahbackground.jpg);
    background-position: center;
    background-repeat: repeat-y;
    background-size: 100%;
    align-items: center;
    color: white;
    
    
}


/*
_____________________________________________________________
*/


/*
code for the Navigation Buttons
--------------------------------------------------------------
*/

.NavigationButtons {
    text-align: center;
    position: sticky;
}

.LynelReference,
.HinoxReference,
.MoldugaReference,
.StoneTalusReference,
.StartPageReference {
    margin: 0mm;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 15px;
    display: inline-block;
    border: 1px solid black;
    text-decoration: none;
    padding: 8px 32px;
    background-color: lightslategray;
    -moz-appearance: button;
    -ms-appearance: button;
    -o-appearance: button;
    -webkit-appearance: button;
    appearance: button;
    text-decoration: none;
    color: #000;
    padding: 0.2em 0.4em;
}

.LynelReference:hover,
.HinoxReference:hover,
.MoldugaReference:hover,
.StoneTalusReference:hover,
.StartPageReference:hover {
    background-color: gray;
    color: white;
}

.LynelReference {
    margin: 0mm;
    margin-left: 2%;
}


/*
----------------------------------------------------------------------
*/


/* 
code for the different text formats
=======================================================================
*/

.Title {
    text-align: center;
    font-size: 30px;
    margin: 10px;
    margin-bottom: 30px;
    color: white;
    
}




#date {
    color: white;
}



/*
=======================================================================
*/


/*
Code for the Subclasses and containers(except slider container and dragscroll)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

.Map {
    display: none;
}

#MapNavigation {
    position: sticky;
    position: -webkit-sticky;
    left: 0;
    top: 50%;
    display: flex;
    flex-direction: column;
}

#Icons {
    color: white;
}
.Container {
    display: flex;
    flex-direction: row;
}
#Logo{
    height:200px;
    width:auto;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/


/*
Code for the slider containers an the slides
#################################################################################
*/

.SliderContainer {
    align-self: center;
    Max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
}


/*###############################################################################
*/


/*
Code for the slider and Zoom Buttons
¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
*/

.button {
    width: 300px;
    height: 60px;
}

.Zoombutton {
    width: 60px;
}

.Zoombutton,
.leftButton,
.rightButton {
    margin: 0mm;
    cursor: pointer;
    display: inline-block;
    display: inline-block;
    border: 1px solid black;
    text-decoration: none;
    background-color: lightslategray;
    width: 40px;
    height: 30px;
    margin-bottom: 5px;
}


/*
¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
*/


/*Code for the Dragscroll, to scroll the Map by Dragging
-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_
*/

.dragscroll {
    margin-bottom: 20px;
    overflow: auto;
    padding: 20px;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: -o-grab;
    cursor: grab;
    margin: 30px auto;
}

.dragscroll:active {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: -o-grabbing;
    cursor: grabbing;
}


/*-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_-_

*/


/*
Code for the media querries
°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
*/

@media screen and (max-width: 992px) {
    /*changements in the Navigation Bar Code for the Smartphone version
        ---------------------------------------------------------------------------------
        */
    .NavigationButtons {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }
    .LynelReference,
    .HinoxReference,
    .MoldugaReference,
    .StoneTalusReference,
    .StartPageReference {
        width: 100%;
        margin-bottom: auto;
        margin-left: 0;
        font-size: 30px;
    }
    /*--------------------------------------------------------------------------------
         */
    /*Changements in the text format code in the Smartphone version
        ================================================================================
        */
    .Title {
        font-size: 20px;
    }
    /*================================================================================
        */
    /*Changements in the Code of the slider and Zoom Buttons for the Mobile Version
        ¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
        */
    .Zoombutton,
    .leftButton,
    .rightButton {
        width: 80px;
        height: 60px;
        font-size: 30px;
    }
    /*¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬
        */
}


/*°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°*/