/*
 * ---------------
 *  COMMON STYLES
 * ---------------
 */

/* Styles for the BODY element */
* {
    box-sizing: border-box; /* Sets the box-sizing to border-box */
}
body {
    background-color: #F1FAEE; /* Sets the background color to #F1FAEE */
    font-family: Jura; /* Sets the font family to Jura */
    margin: 0; /* Sets the margin to 0 */
    width: 100%; /* Sets the width to auto */
}
/* Styles for the h1 element */
h1 {
    color: #E63946; /* Sets the text color to #E63946 */
    text-align: center; /* Sets the text alignment to center */
    font-size: 45px; /* Sets the font size to 45px */
    font-weight: bold; /* Sets the font weight to bold */
    letter-spacing: -1%; /* Sets the letter spacing to -1% */
    -webkit-text-stroke-width: 1px; /* Sets the stroke width to 1px */
    -webkit-text-stroke-color: #E63946; /* Sets the stroke color to #E63946 */
    margin-top: 130px ; /* Sets the margin to 0 */
}
/* Styles for the p element */
p {
    color: #000000; /* Sets the text color to #000000 */
    font-size: 30px; /* Sets the font size to 30px */
    letter-spacing: -1%; /* Sets the letter spacing to -1% */
    text-align: center; /* Sets the text alignment to center */
}
pre {
    font-family: Jura;
    font-size: 20px;
    font-weight: lighter;
    
}

/* --------------------------------
 * Header and Footer Styles
 * -------------------------------- 
 */
/* Styles for the HEADER element */
header {
    display: flex; /* Sets the display to flex */
    justify-content: space-around; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content */
    margin: 0; /* Sets the margin to 0 */
    position: fixed; /* Sets the position to static */
    top: 0; /* Sets the top to 0 */
    width: 100%; /* Sets the width to auto */
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    text-align: center; /* Sets the text alignment to center */
    background-color: #1D3557; /* Sets the background color to #1D3557 */
    padding: 0px; /* Sets the padding to 20px */
    z-index: 3;
}
header div {
    margin: 0px 30px; /* Adds some space between the images */
    display: flex;
    align-items: center; /* Vertically center the content */
}
header div a {
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    text-decoration: none; /* Removes the underline from the text */
}
header div a:hover {
    color: #FFFFFF; /* Sets the text color to #E63946 */
    cursor: pointer; /* Sets the cursor to pointer */
    transition: box-shadow 0.3s ease;
}


/* off-screen-menu */

/* Styles for the off-screen-menu */
.off-screen-menu {
    background-color: #1D3557; /* Sets the background color to #1D3557 */
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    min-height: 250px; /* Sets the minimum height to 400px */
    height: auto; /* Sets the height to auto */
    min-width: 250px; /* Sets the minimum width to 300px */
    width: auto; /* Sets the width to 25% */
    position: fixed; /* Sets the position to fixed */
    top: 100px; /* Sets the top to 100px */
    left: -1000px; /* Sets the left to -1000px */
    display: flex; /* Sets the display to flex */
    flex-direction: column; /* Sets the flex direction to column */
    justify-content: center; /* Horizontally centers the content */
    align-items:center; /* Vertically centers the content */
    text-align: center; /* Sets the text alignment to center */
    font-size: 30px; /* Sets the font size to 30px */
    transition: .3s ease; /* Adds a transition effect with ease timing */
    margin-left: 0px; /* Sets the margin left to 0px */
    border-bottom-right-radius: 20px;
}

.off-screen-menu h3 {
    padding-top:10px;
    margin:0;
    margin-bottom: 15px;
}

/* Styles for the active state of the off-screen-menu */
.off-screen-menu.active {
    left: 0; /* Sets the left to 0 */
}

/* Styles for the hover state of the off-screen-menu links */
.off-screen-menu a:hover {
    color: #E63946; /* Sets the text color to #E63946 */
}

/* Styles for the off-screen-menu links */
.off-screen-menu a {
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    text-decoration: none; /* Removes the underline from the text */
    font-weight: lighter; /* Sets the font weight to lighter */
}

/* Styles for the navHamMenu */
.navHamMenu {
    padding: 5px; /* Sets the padding to 5px */
    width: 70px; /* Sets the width to 60px */
    height: 70px; /* Sets the height to 60px */
    margin: 0px; /* Sets the margin to 0px */
    display: flex; /* Sets the display to flex */
    background-color: #457B9D; /* Sets the background color to #457B9D */
    border-radius: 10px; /* Sets the border radius to 10px */
    cursor:pointer; /* Sets the cursor to pointer */
    transition: box-shadow 0.3s ease; /* Adds transition effect to box-shadow */
}
/* Apply box-shadow effect when hovering over nav */
.navHamMenu:hover {
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3); /* Adds shadow effect on hover */
}
/* Styles for the ham-menu */
.ham-menu {
    /*height: 70px;  /*Sets the height to 60px */
    width: 70px; /* Sets the width to 60px */
    margin: 0px; /* Sets the margin to 0px */
    padding: 0px; /* Sets the padding to 0px */
    position: relative; /* Sets the position to relative */
}

/* Styles for the spans inside the ham-menu */
.ham-menu span {
    display: block; /* Displays the element as a block */
    width: 100%; /* Sets the width to 100% */
    height: 5px; /* Sets the height to 5px */
    background-color: #FFFFFF; /* Sets the background color to #FFFFFF */
    border-radius: 25px; /* Sets the border radius to 25px */
    position: absolute; /* Sets the position to absolute */
    top: 50%; /* Sets the top to 50% */
    left: 50%; /* Sets the left to 50% */
    transform: translate(-50%, -50%); /* Translates the element to center */
    transition: .3s ease; /* Adds a transition effect with ease timing */
}
/* Styles for the first span inside the ham-menu */
.ham-menu span:nth-child(1) {
    top: 25%; /* Sets the top to 25% */
}
/* Styles for the third span inside the ham-menu */
.ham-menu span:nth-child(3) {
    top: 75%; /* Sets the top to 75% */
}
/* Styles for the active state of the first span inside the ham-menu */
.ham-menu.active span:nth-child(1) {
    top: 50%; /* Sets the top to 50% */
    transform: translate(-50%, -50%) rotate(-45deg); /* Translates and rotates the element */
}
/* Styles for the active state of the second span inside the ham-menu */
.ham-menu.active span:nth-child(2) {
    top: 50%; /* Sets the top to 50% */
    transform: translate(-50%, -50%) rotate(45deg); /* Translates and rotates the element */
}
/* Styles for the active state of the third span inside the ham-menu */
.ham-menu.active span:nth-child(3) {
    top: 50%; /* Sets the top to 50% */
    transform: translate(-50%, -50%) rotate(-45deg); /* Translates and rotates the element */
}

/* Styles for the off-screen-lang */
.off-screen-lang {
    background-color: #1D3557; /* Sets the background color to #1D3557 */
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    min-height: 250px; /* Sets the minimum height to 200px */
    height: auto; /* Set height to auto to allow content to expand beyond minimum height */
    min-width: 250px; /* Sets the minimum width to 200px */
    width: auto; /* Set width to auto to allow content to expand beyond minimum width */
    position: fixed; /* Sets the position to fixed */
    top: -1000px; /* Sets the top to 100px */
    right: 0px; /* Sets the right to -1000px */
    display: flex; /* Sets the display to flex */
    flex-direction: column; /* Sets the flex direction to column */
    justify-content: center; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content */
    text-align: center; /* Sets the text alignment to center */
    font-size: 30px; /* Sets the font size to 30px */
    transition: .3s ease; /* Adds a transition effect with ease timing */
    margin-right: 0px; /* Sets the margin right to 0px */
    border-bottom-left-radius: 20px;
    z-index: 1;
}
/* Styles for the active state of the off-screen-lang */
.off-screen-lang.active {
    top: 100px; /* Sets the right to 0 */
}
/* Styles for the div elements inside the off-screen-lang */
.off-screen-lang div {
    display: flex; /* Sets the display to flex */
    align-items: center; /* Vertically centers the content */
    margin: 0 10px; /* Sets the margin to 0 10px */
    justify-content: right; /* Aligns the content to the left */
}
.off-screen-lang h3 {
    padding-top:10px;
    margin:0;
    margin-bottom: 15px;
    margin-top: 0px;
}
/* Styles for the images inside the off-screen-lang */
.off-screen-lang img {
    margin-right: 10px; /* Sets the right margin to 10px */
    width: 40px; /* Sets the width to 30px */
    height: 30px; /* Sets the height to 20px */
    border-radius: 10px;
}
/* Styles for the hover state of the off-screen-lang links */
.off-screen-lang a:hover {
    color: #E63946; /* Sets the text color to #E63946 */
}
/* Styles for the off-screen-lang links */
.off-screen-lang a {
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    text-decoration: none; /* Removes the underline from the text */
    font-weight: lighter; /* Sets the font weight to lighter */
}
/* Styles for the navLangMenu */
.navLangMenu {
    padding: 0px; /* Sets the padding to 0px */
    width: 70px; /* Sets the width to 70px */
    height: 70px; /* Sets the height to 70px */
    margin: 0px; /* Sets the margin to 0px */
    display: flex; /* Sets the display to flex */
    background-color: #457B9D; /* Sets the background color to #457B9D */
    border-radius: 10px; /* Sets the border radius to 10px */
    cursor:pointer; /* Sets the cursor to pointer */
    transition: box-shadow 0.3s ease; /* Adds transition effect to box-shadow */
}
/* Apply box-shadow effect when hovering over nav */
.navLangMenu:hover {
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3); /* Adds shadow effect on hover */
}
/* Styles for the lang-menu */
.lang-menu {
    height: 70px; /* Sets the height to 70px */
    width: 70px; /* Sets the width to 70px */
    margin: 0px; /* Sets the margin to 0px */
    padding: 0px; /* Sets the padding to 0px */
    position: relative; /* Sets the position to relative */
}

/* Styles for the images inside the lang-menu */
.lang-menu img {
    position: absolute; /* Sets the position to absolute */
    border-top-left-radius: 10px; /* Sets the border radius for the top left corner to 10px */
    border-top-right-radius: 10px; /* Sets the border radius for the top right corner to 10px */
    width: 100%; /* Sets the width to 100% */
    height: 45px; /* Sets the height to 45px */
    top: 0; /* Sets the top to 0 */
    left: 0; /* Sets the left to 0 */
}

/* Styles for the second span inside the lang-menu */
.lang-menu span:nth-child(2) {
    display: block; /* Displays the element as a block */
    width: 50%; /* Sets the width to 50% */
    height: 5px; /* Sets the height to 5px */
    background-color: #FFFFFF; /* Sets the background color to #FFFFFF */
    border-radius: 25px; /* Sets the border radius to 25px */
    position: absolute; /* Sets the position to absolute */
    bottom: 10px; /* Sets the bottom to 10px */
    left: 50%; /* Sets the left to 50% */
    transform: translate(-87%) rotate(30deg); /* Translates and rotates the element */
    transition: .3s ease; /* Adds a transition effect with ease timing */
}

/* Styles for the third span inside the lang-menu */
.lang-menu span:nth-child(3) {
    display: block; /* Displays the element as a block */
    width: 50%; /* Sets the width to 50% */
    height: 5px; /* Sets the height to 5px */
    background-color: #FFFFFF; /* Sets the background color to #FFFFFF */
    border-radius: 25px; /* Sets the border radius to 25px */
    position: absolute; /* Sets the position to absolute */
    bottom: 10px; /* Sets the bottom to 10px */
    right: 50%; /* Sets the right to 50% */
    transform: translate(87%) rotate(-30deg); /* Translates and rotates the element */
    transition: .3s ease; /* Adds a transition effect with ease timing */
}

/* Styles for the active state of the second span inside the lang-menu */
.lang-menu.active span:nth-child(2) {
    bottom: 10px; /* Sets the bottom to 10px */
    transform: translate(-87%) rotate(-30deg); /* Translates and rotates the element */
}

/* Styles for the active state of the third span inside the lang-menu */
.lang-menu.active span:nth-child(3) {
    bottom: 10px; /* Sets the bottom to 10px */
    transform: translate(87%) rotate(30deg); /* Translates and rotates the element */
}


/* Styles for the FOOTER element */
footer {
    display: flex; /* Sets the display to flex */
    justify-content: center; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content */
    margin: 0; /* Sets the margin to 0 */
    width: 100%; /* Sets the width to auto */
    background-color: #1D3557; /* Sets the background color to #1D3557 */
    padding: 20px; /* Sets the padding to 20px */
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    text-align: center; /* Sets the text alignment to center */
}
/* Styles for the div elements inside the footer */
footer div {
    margin: 0 30px; /* Adds some space between the images */
}
/* Styles for the .infoTitle class */
.infoTitle {
    font-size: 3vw; /* Sets the font size to 35px */
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    text-align: center; /* Sets the text alignment to center */
    font-weight: normal; /* Sets the font weight to normal */
    line-height: 1.2; /* Sets the line height to 1.2 */
    white-space: nowrap;
}
/* Styles for the .infoParagraph class */
.infoParagraph {
    font-size: 2vw; /* Sets the font size to 20px */
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    text-align: center; /* Sets the text alignment to center */
    font-weight: lighter; /* Sets the font weight to lighter */
    line-height: 1.2; /* Sets the line height to 1.2 */
    white-space: nowrap;
    white-space: pre;
}
.infoParagraph a:link, .infoParagraph a:visited {
    color: #FFFFFF; /* Sets the text color to #FFFFFF */
    text-decoration: none; /* Removes the underline from the text */ 
}

footer img {
    height: auto;
    max-width: 100%;
}


@media (max-width: 850px) {
    h1 {
        font-size: 5.5vw; /* Sets the font size to 45px */
    }
    .infoTitle {
        font-size: 4vw; /* Sets the font size to 35px */
    }
    /* Styles for the .infoParagraph class */
    .infoParagraph {
        font-size: 3vw; /* Sets the font size to 20px */
    }

    footer div {
        margin: 0 5px; /* Adds some space between the images */
    }
    
}

@media (max-width: 800px) {
    h1 {
        margin-top: 80px;
    }
    .HeaderCenter a {
        font-size: 3vw;
        white-space: nowrap;
    }
    .HeaderCenter a img {
        width: 60px;
        height: 60px;
    }
    .header{
        height: 50px;
    }
    .navHamMenu, .navLangMenu, .lang-menu, .hamMenu {
        width: 40px;
        height: 40px;
    }
    /* Styles for the spans inside the ham-menu */
    .ham-menu span, .lang-menu span {
        height: 2px;
    }
    .lang-menu span:nth-child(2) {
        height: 2px;
        bottom: 7px;
        width: 45%;
        transform: translate(-90%) rotate(30deg);

    }
    .lang-menu span:nth-child(3) {
        height: 2px;
        width: 45%;
        bottom: 7px;
        transform: translate(90%) rotate(-30deg);

    }
    .lang-menu.active span:nth-child(2) {
        bottom: 7px; /* Sets the bottom to 10px */
        transform: translate(-90%) rotate(-30deg); /* Translates and rotates the element */
    }
    .lang-menu.active span:nth-child(3) {
        bottom: 7px; /* Sets the bottom to 10px */
        transform: translate(90%) rotate(30deg); /* Translates and rotates the element */
    }

    .lang-menu img {
        height: 25px;
    }

    .off-screen-menu.active, .off-screen-lang.active {
        top: 60px;
    }

    /* Styles for the off-screen-menu */
    .off-screen-menu {
        top: 60px;
        font-size: 4vw;
        width: auto;
        min-width: 150px;
        height: auto;
        min-height: 200px;
    }
    .off-screen-lang {
        font-size: 4vw;
        width: auto;
        min-width: 150px;
        height: auto;
        min-height: 200px;
    }
}