/*////////////////////////////////////////////////////////////////////
// Copyright 2026 (c) Yanko Lemoine
//
// This program and the accompanying materials are made
// available under the terms of the Eclipse Public License 2.0
// which is available at https://www.eclipse.org/legal/epl-2.0/
//
// SPDX-License-Identifier: EPL-2.0
////////////////////////////////////////////////////////////////////*/

/* FONTS */

@font-face {
    /* <weight> value between 300 to 800 */
    font-family: 'MerriweatherSans'; 
    src: 
        local('MerriweatherSans'),
        url('/assets/fonts/MerriweatherSans-VariableFont_wght.ttf') format('truetype');
}

/* GLOBAL STYLE */

html {
    --bg-color: #63747A;
    --h1-color: #FFFFFF;
    --h2-color: #102830;
    --h3-color: #FFFFFF;
    --nav-bg-color: #99AAB0;
    --navbar-color: #545E61;
    --table-bg-color: var(--bg-color);
    --thead-bg-color: #50646B;
    --tbody-bg-color: #A1BAC2;
    
    background-color: var(--bg-color);
    font-family: 'MerriweatherSans';
}

.hidden {
    display: none;
}

body {
    margin: 0px;
    margin-bottom: 10vh;
}

body > div {
    margin: 0% 10%;
}

header {
    height: 150px;
    width: 100%;
}

nav {
    position: fixed;

    user-select: none;
    
    height: 80px;
    width: 100%;
    
    padding: 20px 0px;
    
    background-color: var(--nav-bg-color);
    
    box-shadow: 0px 0px 10px black;

    z-index: 3;
}

nav a:hover {
    color: unset;
    text-decoration: none;
}

#nav_bar {
    height: 100%;
    padding: 0px 25px;
    margin: 0px 20px;
    border-radius: 20px;
    
    background-color: var(--navbar-color); 
}

#nav_bar_buttons {
    display: flex;
    align-items: center;
    justify-content: space-around;

    height: 100%;
}

#nav_bar_title {
    display: none;
}

#show_buttons {
    display: none;
}

.nav_bar_button {
    margin: 15px;
    
    font-family: 'MerriweatherSans';
    font-size: 1.5em;
    
    font-weight: 750;
    color: white;
    
    transition:
        color 0.5s ease-out;
}

.nav_bar_button:hover {
    color: #2EC9FF;
}

h1 {
    color: var(--h1-color);
    font-size: 3em;
    font-weight: 800;
    
    text-shadow: 2px 2px 5px black;
}

h2 {
    color: var(--h2-color);
    font-size: 2.5em;
    font-weight: 750;
}

h3 {
    color: var(--h3-color);
    font-size: 1.75em;
    font-weight: 750;
    
    text-shadow: 0px 0px 5px black;
}

h4 {
    font-size: 1em;
}

a {
    text-decoration: none;
    color: unset;
}

a:hover {
    color: #FFF;
    text-decoration: underline;
}

table {
    border: #283236 2px solid;
    background-color: var(--bg-color);
}

thead {
    background-color: var(--thead-bg-color);
    color: white;
}

tbody {
    background-color: var(--tbody-bg-color);
}

th, td {
    text-align: center;
    font-size: 1.5vw;
    padding: 10px;
}

/* GLOBAL MEDIA RULES */

@media screen and (max-width: 1200px) {
    /* TABLET LANDSCAPE */
    #nav_bar .nav_bar_button {
        font-size: 1.18em;
    }
}

@media screen and (max-width: 1000px) {
    /* TABLET PORTRAIT */
    
    h1 {
        margin-top: 0;
    }

    nav {
        height: 60px;
        padding: 0;
    }

    #nav_bar {
        background-color: var(--nav-bg-color);
        margin: 0;
        padding: 0;
        border-radius: 0;
        display: flex;

        z-index: 1;
    }

    #nav_bar_title {
        display: flex;

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        font-size: 1.8em;
        text-align: center;
        font-weight: 700;
        color: white;
    }

    #show_buttons {
        display: flex;
        justify-content: center;
        position: absolute;

        right: 5px;
        top: 50%;
        transform: translateY(-50%);

        font-size: 2.7em;
        font-weight: 800;
        color: white;

        background-color: #2c3133;
        height: 50px;
        width: 50px;
        border-radius: 5px;
        line-height: 1;

        cursor: pointer;

        font-family: Verdana, Geneva, Tahoma, sans-serif;
    }

    #show_buttons:hover {
        background-color: var(--navbar-color);
    }

    #nav_bar_buttons {
        display: flex;
        flex-direction: column;

        position: absolute;
        top: 60px;

        width: 100vw;

        transition: 
            top 1s,
            visibility 1s,
            z-index 1s;
        z-index: 0;
    }

    #nav_bar_buttons.hidden {
        top: -400px;
        visibility: hidden;
        z-index: -1000;
    }

    .nav_bar_button {
        width: 100%;
        margin: 0;
        border-block: rgba(0, 0, 0, 0.5) solid 0.5px;
        padding: 20px;
        text-align: center;
        background-color: var(--navbar-color);

        transition: color 0s;
    }

    .nav_bar_button:hover {
        background-color: #527b88;
        color: white;
        cursor: pointer;
    }
}

@media screen and (max-width: 680px) {
    /* SMARTPHONES */

    body {
        text-align: center;
        p {
           text-align:justify; 
        }
        
    }
    
    body > div {
        margin: 0% 5%;
    }

    h1 {
        font-size: 2em;
        
    }

    h2 {
        color: var(--h2-color);
        font-size: 1.6em;
    }

    h3 {
        color: var(--h3-color);
        font-size: 1em;
    }
    
    nav {
        gap: 0px;
    }
    
    #nav_bar_title {
        display: flex;

        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);

        font-size: 4.2vw;
        text-align: center;
        font-weight: 700;
        color: white;
        
        width: auto;
    }
}