@import url("./components/constants.css");
@import url("./components/background.css");
@import url("./components/navigation.css");
@import url("./home.css");
@import url("./code.css");
@import url("./about.css");
@import url("./timeline.css");

* {
    margin: var(--FLAG-OFF) auto;
    padding: var(--FLAG-OFF);
    box-sizing: border-box;
    color: var(--text-color);
    font-family: sans-serif;
    font-weight: 600;
}

header {
    height: 10vh;
    width: 100%;
}

.container {
    display: flex;
    height: 90vh;
    max-width: 1250px;
    width: 90%;
    margin: var(--FLAG-OFF) auto;
    position: relative;
}

#left-side,
#right-side {
    width: 50%;
    position: relative;
}

#left-side {
    z-index: var(--FLAG-ON);
}

.text {
    font-size: 5vw;
}

.cleardot {
    list-style-type: none;
}

.absolute {
    position: absolute !important;
}

.relative {
    position: relative;
    display: block;
}


iframe {
    height: 100%;
    scroll-behavior: unset;
}

.bordered {
    border-radius: 10px;
}


@keyframes fromLeftToRight {
    0% {
        left: -10px;
        opacity: var(--FLAG-OFF);
    }

    100% {
        left: var(--FLAG-OFF);
        opacity: var(--FLAG-ON);
    }
}

@keyframes fromRightToLeft {
    0% {
        right: -10px;
        opacity: var(--FLAG-OFF);
    }

    100% {
        right: var(--FLAG-OFF);
        opacity: var(--FLAG-ON);
    }
}

@keyframes scaleDown {
    0% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes fromBottomToTop {
    0% {
        bottom: -10px;
        opacity: var(--FLAG-OFF);
    }

    100%{
        opacity: var(--FLAG-ON);
        bottom: var(--FLAG-OFF);
    }
}