/* HTML */
html {
    scroll-behavior: smooth;
}

/* Body */
body {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* Header */
header {
    display: flex;

    width: 100%;
    height: 640px;

    background: radial-gradient(ellipse at center, #202020, #000000);
}

    /* div with logo */
    #logo {
        display: flex;

        align-items: center;
        justify-content: left;
        
        width: 36%;
        height: 100px;

        left: 14%;

        position: fixed;
    
        z-index: 1;
    }
    /* Logo img */
    #logo > img {
        height: 50px;
        width: 75px;

        cursor: pointer; 
    }
    /* Paragraph with time inside logo*/
    #time {
        position: absolute;
        
        width: 65px;
        height: 24px;

        margin-top: 28px;
        margin-left: 4px;

        text-align: center;

        color: #B91818;

        font-size: 1.8em;

        cursor: pointer; 

        font-family: "Digital", sans-serif;
    }
    /* Digital font for the time in logo */
    @font-face {
        font-family: "Digital";
        src: url("../fonts/digital-7/digital-7.ttf") format("truetype");
    }

    /* Nav */
    nav {
        display: flex;

        align-items: center;
        justify-content: right;
        
        width: 50%;
        height: 100px;

        right: 14%;

        color: white;
        font-family: Alata, "sans-serif";

        float: right;

        position: fixed;

        z-index: 1;
    }

    /* ul */
    nav > ul {
        padding: 0;
        margin: 0;

        display: flex;

        justify-content: right;
        align-items: center;

        gap: 30px;
    }

    /* li + a */
    nav > ul > li {
        list-style: none;
    
        cursor: pointer;
    }
    nav > ul > li > a {
        text-decoration: none;
        color: white;
    }
    nav > ul > li > a:hover {
        color: #DA0000;
    }
    /* Specified styles for opening and closing animation at hamburger menu */
    /* Define the animation for opening the nav */
    @keyframes slideIn {
        from {
            opacity: 0;
        } to {
            opacity: 1;
        }
    }

    /* Define the animation for closing the nav */
    @keyframes slideOut {
        from {
            opacity: 1;
        } to {
            opacity: 0;
        }
    }

    /* When the nav is active (visible) */
    nav.active {
        display: flex;
        animation: slideIn 0.5s forwards;
    }

    /* Adding transition to smoothly hide the nav */
    nav.closing {
        animation: slideOut 0.5s forwards;
    }


    /* Special class used on specified axis*/
    .top-bg {
        background-color: rgba(0, 0, 0, 1); /* Semi-transparent black (adjust alpha as needed) */
        transition: background-color 0.5s ease;
    
        padding: 0px 28px;
        margin: 10px 0px;

        border-radius: 24px;
    }

    /* Hamburger menu */
    .menu-button-container {
        display: none;
    
        justify-content: right;
        align-items: center;

        right: 14%;

        height: 100px;
        width: 36%;

        position: fixed;
    
        z-index: 1;
    }
    
    #menu-toggle {
        display: none;
    }
    
    .menu-button,
    .menu-button::before,
    .menu-button::after {
        display: block;
    
        background-color: #B91818;
    
        position: absolute;
        
        height: 4px;
        width: 30px;
        
        transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
        border-radius: 2px;
    
        cursor: pointer;
    }
    .menu-button::before {
        content: '';
        margin-top: -8px;
    }
    .menu-button::after {
        content: '';
        margin-top: 8px;
    }
    
    #menu-toggle:checked + .menu-button-container .menu-button::before {
        margin-top: 0px;
        transform: rotate(405deg);
    }
    #menu-toggle:checked + .menu-button-container .menu-button {
        background: rgba(255, 255, 255, 0);
    }
    #menu-toggle:checked + .menu-button-container .menu-button::after {
        margin-top: 0px;
        transform: rotate(-405deg);
    }

    /* References = last ul item */
    ul > #documentation {
        padding: 10px 20px;
        background-color: #DA0000;
    }
    ul > #documentation:hover {
        background-color: white;
        color: #DA0000;
    }
    ul > #documentation:hover > a {
        color: #DA0000;
    }

    /* Billboard */
    #billboard {
        display: flex;
        
        width: 100%;

        justify-content: center;
        align-items: center;

        flex-direction: column;

        position: absolute;

        top: 225px;

        z-index: 0;
    }
    #billboard > h1 {
        font-family: Alata, "sans-serif";
        font-size: 96px;

        color: #DA0000;
    
        margin: 0;
    }
    #billboard > h3 {
        font-family: Alata, "sans-serif";
        font-size: 32px;
        color: #810000;
            
        margin: 0;
    }


/* Main */
    /* Section with 3D-Model */
    #model-container {
        display: flex;

        flex-direction: column;

        text-align: center;

        width: 100%;
        height: auto;
        max-height: 778px;

        background-color: #EDEDED;
    }
    h2 {
        color: #DA0000;

        font-size: 64px;
        font-family: Alata, 'sans-serif';

        margin: 50px 0px 0px 0px;
    }
    /* Canvas for the 3D Model */
    #canvas-container {
        display: flex;

        justify-content: center;
        align-items: center;
        
        max-width: 1180px;
        width: 100%;
        
        height: auto;
        
        margin: 0 auto;
        
        position: relative;
        
        padding-bottom: calc(640 / 1180 * 100%); /* Maintain aspect ratio */
    }

    #canvas-container canvas {
        position: absolute;
        
        top: 0;
        left: 0;
        
        width: 100%;
        
        height: 100%;
    }


    /* Section with scheme */
    #ec-container {
        display: flex;

        flex-direction: column;

        text-align: center;

        width: 100%;
        height: 760px;
    
        background-color: #151515; 

        color: white;
    }
    .ec-insides-container {
        display: flex;

        width: 72%;
        height: 560px;

        padding-left: 14%;
        padding-right: 14%;
    
        align-items: center;

        flex-direction: row;
    }
    #ec-text-container {
        display: flex;

        text-align: left;

        align-items: center;

        width: 50%;
        height: 100%;

        padding: 0px 20px;

        font-size: 18px;
    }
    #ec-text-container > ul,ol > li {
        line-height: 1.5;
    }
    #ec-scheme-container {
        display: flex;

        width: 50%;
        height: 80%;
    }
    #ec-scheme-container > img {
        display: flex;

        width: 100%;

        object-fit: cover;
    }


    /* Section with individual parts */
    #individual-parts-container {
        display: flex;

        flex-direction: column;

        align-items: center;

        background-color: #EDEDED;

        padding-bottom: 100px;
    }
    #individual-parts-container > h2 {
        margin-bottom: -50px;
    }
    /* Individual parts div with text and img*/
    .part-container {
        width: 72%;
        height: 450px;

        margin-top: 100px;

        display: flex;
        flex-direction: row;

        align-items: center;

        background: radial-gradient(circle, #1D1D1D, #000000);

        color: white;
    }
    .part-description-container {
        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;

        width: 50%;
        padding: 30px;
    }
    .part-description-container > p {
        text-align: center;
    }

    /* h3 */
    h3 {
        font-size: 28px;
        font-family: Alata, 'sans-serif';

        margin: 0;
    }
    /* Img */
    .part-img-container {
        display: flex;
        
        width: 50%;
        padding: 30px;
    }
    .part-img-container > img {
        height: 400px;
        width: 100%;

        object-fit: cover;
    }


/* Footer */
footer {
    background-color: #B91818;

    display: flex;
}

    /* references in footer */
    footer a {
        color: #000000;
    }

    /* left part of the footer */
    #left-part-container {
        display: flex;

        justify-content: center;
        align-items: left;

        width: 36%;

        flex-direction: column;

        padding-left: 14%;
        padding-bottom: 20px;
    }
    #left-part-container > h3 {
        padding-top: 20px;
        padding-bottom: 40px;
    }
    #left-part-container > h3 > span {
        color: white;
    }
    /* div with mail */
    #mail-container {
        display: flex;

        align-items: center;
    }
    #mail-container > img {
        padding-right: 10px;
    }

    /* right part of the footer */
    #right-part-container {
        display: flex;

        justify-content: center;
        align-items: end;

        width: 36%;

        gap: 28px;

        flex-direction: column;

        padding-right: 14%;
        padding-bottom: 16px;
    }
    /* div with references */
    #references-container {
        display: flex;
        flex-wrap: nowrap;
    }
    #references-container > a {
        text-decoration: none;
    }
    #policies-container > a {
        margin-left: 12px;
        text-align: center;
    }