/* Variables */
:root {
    --app-height: 100vh;
    --sidebar-width: 300px;
    --navbar-height: 75px;
    --timeline-line-width: 3px;
    --timeline-circle-weight: 7; /* Must be odd, so that it centers perfectly */
    --timeline-circle-translate-value: calc(var(--timeline-line-width) * ((var(--timeline-circle-weight) - 1) / 2) * -1);
}

/* Font */
.content-regular {
    font-family: "Siemreap", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.heading-regular {
    font-family: "Moul", serif;
    font-weight: 400;
    font-style: normal;
}

/* Styling */
* {
    transition: ease-out 150ms;
    scroll-behavior: smooth;
}
body {
    background-color: #F0F0F0;
    overflow: hidden;
    position: relative;
}
#main {
    width: 100vw;
}
#main, #sidebar, #content {
    height: var(--app-height);
    max-height: var(--app-height);
}

/* Navigation Bar */
#navbar {
    height: 0px;
}
/* Sidebar */
#sidebar > * {
    width: var(--sidebar-width);
}
@media (max-width: 991.98px) {
    #navbar {
        height: var(--navbar-height);
        border-bottom: 1px solid var(--bs-border-color);
    }
    #sidebar {
        width: 0px;
    }
    #sidebar.visible-mobile-sidebar {
        width: var(--sidebar-width);
    }
    #scroll-area.visible-mobile-sidebar {
        filter: blur(1px)
    }
}
@media (min-width: 992px) {
    #sidebar {
        width: var(--sidebar-width);
    }
}

/* Display Area */
#scroll-area {
    overflow-y: scroll;
    /* scroll-snap-type: y mandatory; */
}
#scroll-area > * {
    width: 100%;
    /* scroll-snap-align: start; */
}

/* Home Section */
#section-home {
    height: var(--app-height);
    background-image: url("images/ehf12.jpg");
    background-position: center;
}
#section-home .card {
    background-color: rgba(0,0,0, 0.5);
}

/* Education Section - Timeline */
.timeline {
    display: grid;
}
@media (max-width: 991.98px) {
    .timeline {
        grid-template-columns: var(--timeline-line-width) 1fr;
    }
}
@media (min-width: 992px) {
    .timeline {
        grid-template-columns: 1fr var(--timeline-line-width) 1fr;
    }
}
.timeline-line {
    position: relative;
    background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
    width: var(--timeline-line-width);
    height: 100%;
}
.timeline-circle {
    width: calc(var(--timeline-line-width) * var(--timeline-circle-weight));
    height: calc(var(--timeline-line-width) * var(--timeline-circle-weight));
    border-radius: 50%;
    background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
    transform: translate(var(--timeline-circle-translate-value), var(--timeline-circle-translate-value));
}

/* Contact Section */
#contact-methods i {
    width: 2rem;
}
#contact-methods a {
    width: 19rem;
}