@charset "UTF-8";
/* THE FOLLOWING:   General HTML and text stylings */
html {scroll-behavior: smooth;}

h1,h2,h3,h4,h5,h6,a {font-family: 'Moderustic', sans-serif;}
p,li,label {font-family: 'Titillium Web', sans-serif;}

/* Universal Classes */
.accent-color {color: #ffc300;}
.active-nav {position: relative}
    .active-nav::after {
        content: "";
        position: absolute;
        bottom: -100%;
        left: 50%;
        transform: translateX(-50%);
        width: 5px;
        height: 5px;
        background-color: #ffc300;
        border-radius: 50%;
        opacity: 0%;
        transition: all .3s ease-in-out;
    }
    .active-final-position::after {bottom: -5% !important; opacity: 100%;}

/* Misc Stuff */
#home {scroll-margin-top: 80px;}
#about, #portfolio {
    scroll-margin-top: 60px;
}

header {
    position: sticky;
    padding: 0 5%;
    top: 0px;
    z-index: 999;
    color: white;
    background-color: #252526;
    transition: all .5s ease-in-out;
}
    .scrolled-header {
        box-shadow: 0px 5px 8px rgba(0, 0, 0, .5);
    }

header h1 {
    margin-right: 10%;
}

.nav-link {
    color: white !important;
}

.navbar-toggler-icon {
    filter: invert(100%);
}

footer {
    padding: 2% 0;
    background-color: #252526;
    color: white;
}
footer > div {
    margin: 0 auto;
    padding: 0 5%;
}
footer svg {
    margin-right: 20px;
    width: 20px;
    height: auto;
    color: #ffc300;
}

/* COLLAPSE BREAKPOINT */
@media screen and (max-width: 992px) {
    .active-nav::after {
        display: none;
    }
    #info {
        display: grid;
        grid-template-columns: 100%;
    }
    #info img {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 55%;
        height: auto;
        justify-self: baseline;
    }
    #info ul {
        display: none;
    }
    .project-shelf {
        grid-template-columns: 100%;
    }
}

/* BETWEEN BREAKPOINT */
@media screen and (min-width: 660px) and (max-width: 994px) {
    #text { grid-area: text;}
    #card-1 {grid-area: card-1;}
    #card-2 {grid-area: card-2;}
    #portfolio {
        grid-template-columns: 50% 50%;
        grid-template-areas: 
            "text text"
            "card-1 card-2";
        min-height: fit-content;
        padding: 5% 5%;
    }
    #portfolio .card {
        justify-self: center;
    }

}

/* SMALLEST BREAKPOINT */
@media screen and (max-width: 660px) {
    #home {
        grid-template-columns: 100%;
    }
    #info img {
        display: none;
    }
    #portfolio {
        min-height: fit-content;
        grid-template-columns: 100%;
        padding: 5% 5%;
    }
    #portfolio .card {
        margin: 2% 0;
        justify-self: center;
        width: 100%;
        height: auto;
    }
}

/* SCREEN BIG */
@media screen and (min-width: 1400px) {
    .big-screen-light {
        background-color: #3e3e42;
        width: 100%;
    }
    .big-screen-dark {
        background-color: #2d2d30;
        width: 100%;
    }
    .big-screen-light > section,
    .big-screen-dark > section,
    .project-shelf,
    footer > div,
    nav {
        max-width: 1400px;
    }
    nav {
        padding: 0 5% !important;
    }
    .big-screen-light > section,
    .big-screen-dark > section {
        padding-left: 0px;
        padding-right: 0px;
    }
    nav {margin: 0 auto;}
    .project-shelf {margin: 5% auto; padding: 2%;}
    .project-shelf p {font-size: 18px;}
    .project-shelf h2 {font-size: 38px;}
}