/* ===================== CSS Section Style Imports ===================== */
/* - Main Page CSS - */
@import url(./css/main/main.css);

/* - About Page CSS - */
@import url(./css/about/about-page.css);    /* - About Page CSS - */

/* - Project Page CSS - */
@import url(./css/project/project.css);     /* - Project Page CSS - */

/* - News Page CSS - */
@import url(./css/news/news.css);           /* - News Page CSS - */

/* - Contact Page CSS - */
@import url(./css/contact/contact.css);     /* - Contact Page CSS - */

/* ===================== Font Imports ===================== */
/* - Roboto Nusx Bold Italic -*/
@font-face {
    font-family: Roboto_Nusx-bold-italic;
    src: url(./assets/fonts/Roboto\ _Nusx\ Bold\ Italic.ttf);
}

/* - Roboto Nusx Bold -*/
@font-face {
    font-family: Roboto_Nusx-bold;
    src: url(./assets/fonts/Roboto\ _Nusx\ Bold.ttf);
}

/* - Roboto Nusx Italic -*/
@font-face {
    font-family: Roboto_Nusx-italic;
    src: url(./assets/fonts/Roboto\ _Nusx\ Italic.ttf);
}

/* - Roboto Nusx -*/
@font-face {
    font-family: Roboto_Nusx;
    src: url(./assets/fonts/Roboto\ _Nusx.ttf);
}

/* - Roboto Geo Arm Mt -*/
@font-face {
    font-family: Roboto_Geo-arm-mt;
    src: url(./assets/fonts/Roboto_Geo_Arm_Mt.ttf);
}

/* - Roboto Geo Arm Mt Bold -*/
@font-face {
    font-family: Roboto_Geo-arm-mt-bold;
    src: url(./assets/fonts/Roboto_Geo_Arm_Mt_Bold.ttf);
}

/* - Roboto Geo Arm Nus Bold -*/
@font-face {
    font-family: Roboto_Geo-arm-nus-bold;
    src: url(./assets/fonts/Roboto_Geo_Arm_Nus_Bold.ttf);
}

/* - Roboto Regular-*/
@font-face {
    font-family: Roboto_Regular;
    src: url(./assets/fonts/Roboto\ _Nusx.ttf);
}

/* ===================== Roots ===================== */
:root {
    /* - === Font Family === - */
    --Roboto-N-B-I: Roboto_Nusx-bold-italic;
    --Roboto-N-B: Roboto_Nusx-bold;
    --Roboto-N-I: Roboto_Nusx-italic;
    --Roboto-N: Roboto_Nusx;

    --Roboto-G-A-M: Roboto_Geo-arm-mt;
    --Roboto-G-A-M-B: Roboto_Geo-arm-mt-bold;
    --Roboto-G-A-N-B: Roboto_Geo-arm-nus-bold;
    --Roboto-Regular: Roboto_Regular;

    /* - === Font Size === - */
    --title-font-size: 28px;
    --subtitle-font-size: 21px;
    --paragraph-font-size: 16px;
    --small-paragraph-font-size: 14px;
    --very-small-paragraph-font-size: 9px;

    /* - === Colors === - */
    --text-color: #C7C7C7;
    --text-color-secondary: rgb(63, 63, 63);
    --color-three: #DFDFDF;
    --active-color-main: #000000;
    --active-color-secondary: #A7C2E9;

    /* - === Margins === - */
    --div-margin: 4.688rem; /* - 75px = 4.688rem - */

    /* - === Padding === - */ 
    --section-padding: 1.875rem; /* - 30px = 1.875rem  - */
}

/* ===================== Generals ===================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--Roboto-Regular), sans-serif;
    scroll-behavior: smooth;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
    color: var(--text-color-secondary);
}

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.first-paragraph {
    display: none;
}

/* === Footer === */
footer {
    border: 1px solid black;
    padding: 1rem 0rem;
}

.footer-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    padding: 0rem 1.8rem;
    font-family: var(--Roboto-N);
    font-size: 12px;
}

/* === Wrapper on Media Query === */

@media only screen and (min-width: 1605px) {
    .wrapper {
        padding: 0rem 17.313rem;
    }

    .first-paragraph {
        display: block;
    }

    /* === Footer === */

    .footer-container {
        padding: 0;
        margin: 0;
    }
}