/*////////////////////////////////////////////////////////////////////
// Copyright 2025 (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';
}

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

body > div {
    margin-left: 10%;
}

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

nav {
    display: absolute;
    position: fixed;
    
    height: 80px;
    width: 100%;
    
    padding: 20px 0px;
    
    background-color: var(--nav-bg-color);
    
    box-shadow: 0px 0px 10px black;
}

#nav_bar {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    
    height: 100%;
    padding: 0px 25px;
    margin: 0px 20px;
    border-radius: 20px;
    
    background-color: var(--navbar-color); 
}

.nav_bar_button {
    margin: 15px;
    
    font-family: 'MerriweatherSans';
    font-size: 1.75em;
    
    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;
}

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

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: 1280px) {
    /* TABLET LANDSCAPE */
    
}

@media screen and (max-width: 1000px) {
    /* TABLET PORTRAIT */
    .nav_bar_button {
        font-size: 1.5em;
        font-size: 2.4vw;
        font-weight: 725;
    }
}

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