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


/* 
code for the whole page
___________________________________________________________
*/

#General {
    background-image: url(../Images/shiekahbackground.jpg);
    background-position: center;
    background-repeat: repeat-y;
    background-size: 100%;
    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: whitesmoke;
}


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


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

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

.subtitle {
    text-align: center;
    font-size: 20px;
    padding-bottom: 5px;
}

.TextGeneralInfo {
    width: 45%;
    padding: 5px;
    border: 3px solid lightslategray;
}

.attacktext {
    margin: 3em;
    text-align: justify;
}


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


/*
code for the different pictures 
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
*/

.Boss {
    height: auto;
    width: 45%;
    border: 3px solid lightslategray;
    align-self: center;
}


/*
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
*/


/*
code for the Tables
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
*/

.StatTable,
td,
th {
    text-align: center;
    border: 2px solid lightslategray;
    border-collapse: collapse;
}

.table {
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

.DropList {
    text-align: center;
    justify-items: center;
    align-content: center;
}

.StatTable {
    width: 50%;
    margin-bottom: 25px;
    align-self: center;
}

.DropList {
    text-align: center;
    justify-items: center;
    align-content: center;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}


/*
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
*/


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

.generalInformations {
    display: flex;
    align-self: center;
    align-content: center;
    flex-flow: row;
    justify-content: space-around;
}

.allStats {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}

.attack {
    display: flex;
    flex-direction: column;
}


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


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

@media screen and (max-width: 992px) {
    /*Changements in the Code of the whole page for the smartphone Verion
    _________________________________________________________________________________
    */
    #General {
        width: 100%;
        padding: 0%;
        margin: 0%;
    }
    /*_________________________________________________________________________________
    */
    /*changements in the Navigation Bar Code for the Smartphone version
    ---------------------------------------------------------------------------------
    */
    .LynelReference,
    .HinoxReference,
    .MoldugaReference,
    .StoneTalusReference,
    .StartPageReference {
        width: 98%;
        margin-bottom: auto;
        margin-left: 0;
        font-size: 30px;
    }
    /*--------------------------------------------------------------------------------
    */
    /*Changements in the text format code in the Smartphone version
    ================================================================================
    */
    .Title {
        font-size: 60px;
    }
    .Text {
        font-size: 30px;
        width: auto;
    }
    .text {
        font-size: 30px;
        width: auto;
    }
    .TextGeneralInfo {
        margin-right: auto;
        margin-left: auto;
        width: 96%;
    }
    /*================================================================================
    */
    /*Changements in the picture code for the mobile version
    '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    */
    .Boss {
        width: 90%;
        margin-right: auto;
        margin-left: auto;
        padding: 0%;
    }
    /*
    '''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''
    */
    /*Changements in the Table code for the mobile version
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    */
    .StatTable {
        width: 100%;
        font-size: 20px;
        margin: 0;
        margin-bottom: 50px;
        overflow-x: scroll;
    }
    .DropList {
        width: 88%;
        font-size: 30px;
        margin-left: auto;
        margin-right: auto;
        overflow-x: scroll;
    }
    .StatTable {
        margin: 0%;
        width: 96%;
        font-size: 30px;
    }
    .table {
        margin-bottom: 50px;
    }
    /*^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    */
    /*changements in the Code for the Subclasses and containers(except slider container)
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    */
    .generalInformations {
        width: 100%;
        margin-right: 0%;
        margin-left: 0%;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .generalInformations {
        display: flex;
        flex-direction: column;
        width: 98%;
        margin-right: auto;
        margin-left: auto;
        padding: 0%;
        overflow-x: scroll;
    }
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    */
}


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