@import "desktop.css";

body {
    padding: 20px 50px;
	font-size: 15px;
}

header .nav {
    margin: 0px 0px 0px 40px;
    font-size: 16px;
}

.overlay {
    padding: 30px;
    box-sizing: border-box;
}

h1 {
    font-size: 24px;
}

h2 {
    font-size: 28px;
    margin: 10px 0px 0px 0px;
}

h3 {
    font-size: 14px;
	margin-top: 30px;
    margin-left: 30px;
	margin: 10px 0px 0px 0px;
}

h4{
	font-size:16px;
	margin:0px;
}

.viewport {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
}

.intro {
    flex-grow: 1;
    display: flex;
    align-items: center;
    text-align: left;
    transform: translateY(-20%);
}

.intro h1 {
    font-size: 44px;
}

.home-wrapper {
	min-height: calc(100vh - 80px);
}

.project-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
	display: flex;
    flex-direction: column;
    min-height: calc(100vh - 80px);
    justify-content: space-between;
    box-sizing: border-box;
}

.project1 {
    margin: 56px 0px 0px 0px;
}

.project2 {
    margin: 40px 0px 0px 0px;
}

.project-wrapper h2 {
    font-size: 40px;
}

.project-wrapper h3 {
    font-size: 18px;
    margin-top: 10px;
}

.gallery {
    margin-bottom: 15px;
}

.home-wrapper {
    grid-row-gap: 20px;
}

footer{
	margin-top: auto;
}

footer a{
	font-size: 16px;
}

.footer-icon {
    width: 24px;
    height: 24px;
}

/* Tablet content follows the same guide as the fixed header. */
@media (min-width: 768px) and (max-width: 1199px) {
    body:not(.carousel-home) {
        margin-inline: 0;
        padding-inline: var(--page-gutter, 40px);
    }
    .category-page .category-intro { max-width: none; }
    .project-wrapper > .project1 { margin-bottom: 0; }
    .project-wrapper > .project2 { margin-top: 16px; }
    .project-wrapper > .project2 > p:has(+ p > .live-site-button) { margin-bottom: 14px; }
    .home-wrapper > *,
    .project-wrapper > * { min-width: 0; }
    body .overlay-menu { padding-inline: var(--page-gutter, 40px); }
    .overlay-nav { width: 100%; }
    .overlay-menu .overlay-nav a { margin-inline: 0; }
    .overlay-menu .close-button {
        right: var(--page-gutter, 40px);
        top: var(--site-header-top);
    }
}

/* Selected student work section labels on tablet. */
@media (min-width: 768px) and (max-width: 1199px) {
    .project-wrapper > .project3.student-work-section > h2,
    .project-wrapper > .project3.core-student-works > h2 { font-size: 16px; }
}

/* Use the same content-to-navigation and navigation-to-footer rhythm on tablet. */
@media (min-width: 768px) and (max-width: 1199px) {
    .project-wrapper {
        --tablet-stack-gap: 20px;
    }
    .project-wrapper:has(> .project-nav) { justify-content: flex-start; }
    .project-wrapper > .project3 { margin-bottom: 0; }
    .project-wrapper > .project-nav { margin-top: calc(30px - var(--tablet-stack-gap)); }
    .project-wrapper > footer { margin-top: calc(30px - var(--tablet-stack-gap)); }
}
@media (min-width: 768px) and (max-width: 865px) {
    .project-wrapper { --tablet-stack-gap: 4px; }
}