html { font-size: 1em; color: white; font-size: 20px; font-family: "Poppins", sans-serif; }
body { background-image: linear-gradient(rgb(50,55,71), rgb(50,55,71)); display: flex; flex-direction: column; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

#header { padding: 60px 0 10px 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; gap: 10px; }
.header-element { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }

.hero-image { width: 100vw; box-shadow: 0 0 7px black; }
.name-badge { overflow: hidden; font-size: 1.5rem; }
.hero-header { font-size: 1.5rem; text-shadow: 0 0 7px black; }
.hero-sub { font-size: 0.8rem; color: #C5283D; text-shadow: 0 0 2px black; }
.badge-header { color: #C5283D; text-align: center; text-shadow: 0 0 2px black; font-size: 1rem; }

#personal-projects, #commercial-projects { color: rgb(240, 240, 240); padding-bottom: 10px; display: flex; flex-direction: column; align-items: center; }
#personal-projects { background-color: rgb(50, 148, 115); }
#commercial-projects { background-color: rgb(115, 50, 148); }

#project-main-body { color: rgb(240, 240, 240); padding: 20px 20px; background-color: rgb(50, 148, 115); }

.nav-bar { z-index: 1; min-height: 60px; display: flex; justify-content: space-between; padding: 0 1rem 0 1rem; background-color: #C5283D; position: fixed; left: 0; right: 0; box-shadow: 0 0 7px rgb(49,49,49); }
.nav-bar-spacer { min-height: 60px; display: flex; justify-content: space-between; padding: 0 1rem 0 1rem; background-color: #C5283D; }
.offsite-nav-container { display: flex; align-items: center; gap: 1rem; }
.page-nav-container { display: none; align-items: center; gap: 2rem; }

a { text-decoration: none; color: #01A7C2; transition-duration: .5s; }
a:hover { color: rgb(199, 189, 178); }
a > .nav-indicator { height: 1px; width: 0; background-color: rgba(203, 172, 136, 0); transition-duration: .5s; }
a:hover > .nav-indicator { width: 100%; background-color: rgb(203, 172, 136); }
.nav-item { align-items: center; color: #000; }

.project-grid { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
.project-tile { width: 300px; height: 300px; background-color: red; overflow: hidden; position: relative; }
.project-tile > img { width: 100%; height: 100%; }

.project-overlay { display: flex; flex-direction: column; color: black; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition-property: all; transition-duration: 0.25s; }
.project-overlay-light { background-color: rgba(241, 241, 241, 0.5); }
.project-overlay-dark { background-color: rgba(49, 49, 49, 0.98); color: #C5283D; }
.project-overlay:hover { opacity: 1; }
.project-overlay-body { flex: 1; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; font-size: 28px; }
.project-overlay-footer { font-size: 14px; padding-left: 10px; }

/* #C5283D */
/* #01A7C2 */
/* #cbac88 */
@media (prefers-color-scheme: light){
    
}

@media (min-width: 576px) {
    #header { padding-top: 70px; }
    .hero-image { width: 35vw; border-radius: 20px; }
    .hero-sub { width: 40vw; }
}

@media (min-width: 768px) {
    .page-nav-container { display: flex; }
    #header { padding: 100px 0 40px 0; }
    .hero-image { width: 40vw; }
}

@media (min-width: 992px) {
    #header { padding: 80px 20px 20px 20px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; gap: 10px; box-shadow: inset 0 0 7px black; }
    .header-element { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }

    .hero-image {  width: 450px; height: 450px; border-radius: 20px; box-shadow: 0 0 7px black; }
    .name-badge { overflow: hidden; font-size: 1.5rem; }
    .hero-header { font-size: 2rem; text-shadow: 0 0 7px black; }
    .hero-sub { font-size: 1rem; color: #C5283D; text-shadow: 0 0 2px black; }
    .badge-header { color: #C5283D; text-align: center; text-shadow: 0 0 2px black; }
}

@media (min-width: 1200px) {
    #header { padding: 0; min-height: 75vh; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; gap: 10px; box-shadow: inset 0 0 7px black; }
    .header-element { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; flex-direction: column; }
    #personal-projects, #commercial-projects { padding: 0 200px 10px 200px; }

    .hero-image {  width: 500px; height: 500px; border-radius: 20px; box-shadow: 0 0 7px black; }
    .name-badge { overflow: hidden; font-size: 1.5rem; }
    .hero-text { font-size: 10rem; color: #C5283D; }
    .hero-header { font-size: 4rem; text-shadow: 0 0 7px black; }
    .hero-sub { font-size: 1rem; color: #C5283D; text-shadow: 0 0 2px black; }
    .badge-header { color: #C5283D; text-align: center; text-shadow: 0 0 2px black; }

    #project-main-body { padding: 20px 50px; }
}

@media (min-width: 1400px) {
}