*
{
    scroll-behavior: smooth;
    text-decoration: none;
    margin: 0;
    padding: 0;

    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    font-family: 'Roboto', sans-serif;


    --main-background: linear-gradient(135deg, #222a30 0%, #36383d 100%);
    --main-background-inverted: linear-gradient(-135deg, #222a30 0%, #36383d 100%);
    --main-button-color: #50B46C;
    --main-button-text-color:#FFFFFF;
    --main-text-color:#FBFBFB;
    --main-small-text-color:#C7C7C9;

    --main-padding-left: 5vw;
}
 
/* De hele body */
body
{
    background: var(--main-background);
    color:var(--main-text-color);
}

p /* Geef ale text default color */
{
    color: var(--main-small-text-color);
}

nav ul /* Nav list style */
{
    padding-top: 2.5%;
}

nav ul li /* Nav list item style */
{
    display: inline;
    padding-left: 2vw;
    transition-duration: 1s;
    
}

nav ul li a /* Nav links */
{
    color: var(--main-small-text-color);
}

nav ul h3 /* Nav logo */
{
    color: var(--main-text-color);
    /*display: inline;*/
    float: left;
    padding-left: var(--main-padding-left);
    /*padding-right: 1.5vw;*/
}

img /*Images on page*/
{
    margin-top: 2vh;
    max-width: 100%;
    border-radius: 5px;
    
}

hr /* Line break */
{
    margin-top: 2vh;
    color: #36383d;
}

.mainContent /*Main grid for content*/
{
    display: grid;
    grid-template-columns: auto auto;
    clear: both;
}

.content /* content item */
{
    display: grid;
    width: 25vw;
    padding-top: 10vh;
    padding-left: var(--main-padding-left);
    padding-bottom: 10vh;
}

.contentTitle /*main title content*/
{
    padding-bottom: 0vh;
}

.contentHalf /*Change size of content to half*/
{
    width: 50vw;
}

.contentFull /*take up full space*/
{
    width: 90vw;
}

.content p /*p tag in content*/
{
    padding-top: 2.5vh;
}

.content h1 /* h1 tag in content*/
{
    font-size: 4vw;
}

.contentLeft /*Make content "float" left*/
{
    grid-column: 1/4;
    justify-self: end;
    margin-right:10vw;
}

.contentRight /*push content to end "float" right*/
{
    justify-self: end;
    margin-right:10vw;
}

.contentRightFar /* to the right without padding*/
{
    justify-self: end;
}

.button /* main button class*/
{
    background-color: var(--main-button-color);
    color: var(--main-button-text-color);
    

    padding-left: 15px;
    padding-right: 15px;

    padding-top: 15px;
    padding-bottom: 15px;

    border-radius: 25px;

    justify-self: start;

    margin-top: 2.5vh;
    

}


.toggleMenu /* To gide menu when needed */
{
    display: hidden;
}

#sideMenuText /*On mobile close/open text*/
{
    position: absolute;
    left:-8%;
    top:50%;
    transform: rotate(-90deg);
    user-select: none;
    transition-duration: 1s;
}

.mouseClick /*Change mouse to grab*/
{
    cursor: grab;
}

/* 

Content TAGS start

*/
.lang
{
    border-radius: 10px;
    padding: 5px;
    margin: auto;
    margin-left: 0;
    background-color: #50B46C;
    display: inline-block;
}

.langC
{
    border-radius: 10px;
    padding: 5px;
    margin: auto;
    margin-left: 0;
    background-color: #5084B5;
    display: inline-block;
}

.langDNF
{
    border-radius: 10px;
    padding: 5px;
    margin: auto;
    margin-left: 0;
    background-color: #6C50B4;
    display: inline-block;
}

.langP
{
    border-radius: 10px;
    padding: 5px;
    margin: auto;
    margin-left: 0;
    background-color: #7377ad;
    display: inline-block;
}
.langCS
{
    border-radius: 10px;
    padding: 5px;
    margin: auto;
    margin-left: 0;
    background-color: #2862e9;
    display: inline-block;
}

/*

END TAGS

*/

.c /*Clear class*/
{
    clear: both;
    padding-top: 2.5vh;
}

input /*Style form inputs*/
{
    background: #222a30;
    border: 2px solid #36383d;
    width: 100%;
    height: 4vh;
    border-radius: 4px;
    color: var(--main-text-color);
    font-size: medium;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.dn /*Hide stuff (for JavaScript)*/
{
    display: none;
}

textarea /*Main message style for form*/
{
    background: #222a30;
    border: 2px solid #36383d;
    width: 100%;
    height: 10vh;
    border-radius: 4px;
    color: var(--main-text-color);
    font-size: medium;
}



.formBox /*box where form is in*/
{
    
    padding: 10%;
    background: #222a30;
    border: 2px solid #36383d;
    border-radius: 4px;


}

.actionMsg /*Message has been send action message*/
{
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    background-color: #50B46C;
    color: var(--main-button-text-color);

    transition-duration: 1s;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
}

a /*Main link color*/
{
    color: var(--main-small-text-color);
}

a:hover
{
    text-decoration: underline;
}

footer /*Footer grid*/
{
    display: grid;
    align-items: center;
    justify-items: center;
    grid-auto-flow: column;
    position: relative;
    bottom: 0;
    left: 0;
    padding-top: 1vh;
    width: 100%;
    background: #222a30;
    margin-top: 10vh;
    z-index: -1;
}

footer ul /* footer list */
{
    display: grid;
    align-items: center;
    justify-items: center;
    grid-auto-flow: row;
}

footer ul li /* footer list item*/
{
    padding-top: 1vh;
    padding-bottom: 1vh;
    list-style-type:none;
}


@media only screen and (max-width: 600px) /* Media querry*/
{
    nav ul li /*Change nav to fit mobile*/
    {
        /*display: none;*/
        display: block;
        float: right;
        clear: both;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 1em;
    }

    nav ul /*Change nav to fit mobile*/
    {
        width: 200px;
        background: var(--main-background-inverted);
        border-bottom-left-radius: 10%;
        float: right;
        display: grid;
        position: fixed;
        right: -160px;
        opacity: 50%;
        height: 25vh;
        transition-duration: 1s;
    }

    /*nav ul:hover
    {
        right: 0;
    }*/

    nav ul h3 /*Change nav to fit mobile*/
    {
        margin: auto;
    }

    .mainContent /*Change grid to columns*/
    {
        grid-template-columns: auto;
        padding:0;
        margin:0;
        /*row-gap: 500px;*/
        margin-left: var(--main-padding-left);
        margin-right: var(--main-padding-left); /*Right krijgt precies dezelfde padding als left.*/
        
    }

    .content
    {
        width: 100%;
        padding:0;
        margin:0;
        padding-top: 10vh;
    }

    .dn
    {
        display: inline;
    }

    footer
    {
        grid-auto-flow: row;
    }
    
}