:root {
    --fontColor: #3E3E3E;
    --accentColor: #FFDC26;
    --backgroundColor: #E7E7E7;
    --modeBreakPoint: 1350px;
}

* {
    margin: 0;
    padding: 0;

    transition-duration: 0.2s;
    
    font-family: 'Inter', sans-serif;
}

body {
    width: 100vw;
    min-height: 100vh;

    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    align-items: center;

    background-color: var(--backgroundColor);
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mobileSection {
    width: 100vw;
    min-height: 100vh;

    position: relative;
    top: 0;
    left: 0;
}

.desktopSection {
    width: 460px;
    height: 80vh;

    overflow: auto;
}


#navigationContainer {
    width: 100vw;

    background-color: var(--accentColor);

    position:fixed;
    left: 0;
    bottom: 0;

    display: flex;
    flex-direction: row;
}

#navigationContainer h3 {
    width: 50%;
    height: 40px;

    color: white;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1350px) {
    .contentContainer {
        width: calc(100% - 80px);
        max-width: 450px;
    }

}

@media (min-width: 1350px) {
    .contentContainer {
        width: 100%;
    }
    
}