/* FONTS */
@import url("https://use.typekit.net/sqk0ejc.css");
@import url("https://use.typekit.net/sqk0ejc.css");
@import url("https://use.typekit.net/bic1wir.css");


/* GENERAL */
html {
    scroll-behavior: smooth;
}

body {
    background-color: black;
    color: white;
}

* {
    margin: 0px;
}

.top-container {
    text-align: center;
    margin-top: -5vh;
}

.name {
    font-family: "bodega-sans", sans-serif;
    font-weight: 800;
    font-size: 12vw;
    padding-top: 10vh;
    margin-bottom: -2.5vh;
}

#homeName {
    margin: auto;
    z-index: 1;
}

.subtitle {
    font-family: "instrument-sans-variable", sans-serif;
    font-weight: 400;
    font-size: 3.5vw;
    padding-bottom: 25vh;
}


.container {
    display: flex;
    max-width: 100%;
    padding-bottom: 0.5rem;
}

#about {
    text-align: center;
    font-size: 12vw;
    margin-bottom: 15px;
}

.eemaanItem {
    width: 450px;
    background-color: #DB6600;
    padding: 10px;
    margin: auto;
}

#eemaanImg {
    width: 450px;
}

.two {
    height: 25vh;
}

.main {
    color: white;
    flex: 1;
    margin-left: 20px;
}


button {
    font-family: 'instrument-sans-variable', sans-serif;
    font-size: 24px;
    font-weight: 400;
    border: none;
    margin: auto;
}

button:hover {
    text-decoration: underline;
}


#workNavItem {
    flex-direction: column;
}

.home-nav,
.home-page-nav {
    display: flex;
    margin: auto;
    justify-content: center;
}

.home-nav {
    padding-top: 2.5vh;
    padding-bottom: 2.5vh;
}

.home-page-nav {
    gap: 7vw;
    padding-bottom: 20vh;
}

.home-nav-item a {
    font-family: "bodega-sans", sans-serif;
    font-size: 72px;
    font-weight: 400;
    letter-spacing: 2px;
    text-decoration: none;
    color: White;
}

.home-nav-item, .resumeButton, .contactButton a:hover {
    color: #DB6600;
    transition: ease-in-out 250ms;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    font-weight: 800;
}

.works-menu {
    padding: 1vw;
    border: 1px solid black;
}

.works-Row {
    display: flex;
    padding-bottom: 3vh;
}

.bubbleImage {
    border: 1px solid black;
}

.card {
    max-width: 48%;
    margin: auto;
    gap: 1vw;
    background: black;
}

.card img {
    width: 100%;
}


.workTitle_home {
    font-family: 'bodega-sans', sans-serif;
    font-size: 48px;
    color: white;
    background-color: black;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.right {
    margin-left: 45vw;
    margin-right: 5vw;
}

.left {
    margin-left: 5vw;
    margin-right: 45vw;
}

.workTitle_home:hover {
    scale: 1.2;
    transition: ease-in-out 250ms;
}

.nav-item a {
    margin: auto;
    font-family: "bodega-sans", sans-serif;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0.3rem;
    text-align: center;
    color: white;
    text-decoration: none;
    padding: 2.5vh 7.5vw 1.25vh 7.5vw;

}

.nav-item a:hover {
    text-decoration: underline;
    transition: ease-in-out 200ms;
    color: #DB6600;
    text-align: center;
}

.onSite {
    position: fixed;
    z-index: 3;
    justify-content: center;

}

body::-webkit-scrollbar {
    display: none;
    overflow-x: scroll;
}

.filler {
    width: 100%;
    height: 400px;
}

#works-menu {
    background-color: #DB6600;
    text-align: center;
    max-height: 10000px;
    padding-top: 2rem;
    padding-bottom: 2rem;
    column-gap: 50px;
}

#Olympics_Tickets {
    padding-bottom: 44px;
}

#rickerThumbnail {
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.img-placeholder {
    width: 700px;
    height: 600px;
}

.work-container {
    background-color: black;
    padding-bottom: 1.5rem;
}

.work-img-placeholder {
    display: flex;
    justify-content: center;
    z-index: 0;
}

#esportsHeader {
    max-width: 600px;
}


#EXRCheader {
    max-width: 70%;
}

#digitalReport,
#sacSystem {
    font-size: 3.5vw;
}

#transitCardsContainer {
    display: flex;
    gap: 1.2rem;
    margin: auto;
    max-width: 775px;
}

.mini-container {
    background-color: #F83D0C;
    padding: 10px;
    margin-left: 80px;
    margin-right: 80px;
    border-radius: 15px;
}

.annoyingAssFlyer {
    display: flex;
    max-width: 1000px;
    justify-content: center;
    margin: auto;
    column-gap: 20px;
    padding: 5px;
}

.exrc-flyer {
    max-width: 500px;
    margin: auto;
    border-radius: 5px;
}

.exrc-postcards {
    max-width: 500px;
    flex-direction: column;
}

.postcardItem {
    max-width: 450px;
    margin-bottom: 20px;
    border-radius: 5px;

}

.planning-container {
    display: flex;
    max-width: 1000px;
    margin: auto;
}

.foleonVideo {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: center;
    padding: 20px;
    border-radius: 5px;
}

.work-title {
    font-family: "bodega-sans", sans-serif;
    font-weight: 800;
    font-size: 6.5vw;
    text-align: center;
    color: white;
    background-color: none;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 35px;
    padding-bottom: 20px;
    z-index: 2;
}

#brisbane {
    font-size: 6.525vw;
}

#ricker {
    font-size: 7.5vw;
}

.tags-container {
    display: flex;
    margin: 1rem 27rem;
}

.tag {
    padding: 10px;
    background-color: #130026;
    border-radius: 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-weight: 400;
    font-size: 18px;
}

.yapping-container {
    font-family: "arboria", sans-serif;
    background-color: black;
    width: 100vw;
}

.capstoneImg {
    width: 775px;
}

.capstoneImg,
.capstoneImg img {
    margin: auto;
    max-width: 100%;
    justify-content: center;
}

.stylesheet {
    max-width: 775px;
    margin: auto;
    justify-content: center;
}

.stylesheet img{
    width: 100%;
}

.heading {
    font-family: "bodega-sans", sans-serif;
    font-size: 52px;
    font-weight: 500;
    padding-top: 1.05rem;
    padding-bottom: 1.05rem;
    padding-left: 16rem;
    padding-right: 16rem;
    color: white;
    letter-spacing: 2px;
}

.majorHeading {
    font-size: 64px;
    font-weight: 800;
    letter-spacing: 5px;
    padding-top: 1.5rem;
    padding-left: 11rem;
    padding-right: 11rem;
    text-align: center;
}

.subheading {
    font-size: 24px;
}

.contactText,
.blueContactText a {
    font-family: 'arboria', sans-serif;
    font-weight: 700;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    text-decoration: underline;
}

.contactText {
    background-color: #F4A300;
    color: #130026;
    text-decoration: underline;
    margin-left: auto;
    margin-right: auto;
}

.contactText a:hover {
    background-color: #130026;
    color: #F4A300;
    transition: ease-in-out 100ms;
}

.blueContactText {
    margin-left: 100px;
    margin-right: 100px;
}

.blueContactText a:hover {
    background-color: white;
    color: #014CA9;
    transition: ease-in-out 100ms;
}

.text {
    font-family: "instrument-sans-variable", sans-serif;
    line-height: 1.35rem;
    font-weight: 300;
    size: 48px;
    background-color: black;
    color: white;
    padding: 1rem 16rem 2rem 16rem;
    margin-bottom: -15px;
}

.aboutWrapper {
    display: flex;
    margin: auto;
    justify-content: center;
    padding-left: 5rem;
    padding-right: 5rem;
    margin-bottom: 5vh;
}

.contactWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-size: 64px;
}

.aboutText {
    margin: auto;
    padding-left: 5rem;
    padding-right: 3rem;
    font-size: 18px;
    line-height: 1.6rem;
}

.bodyLink {
    font-family: "instrument-sans-variable", sans-serif;
    color: #DB6600;
    size: 48px;
    text-decoration: underline;
    padding: none;
    margin: none;
}

ul {
    margin-left: 1.1rem;
    color: #DB6600;
    font-weight: 800;
}

.mBullet {
    color: #DB6600;
    font-weight: 800;
}

.olympicContainer {
    padding: 1rem 4rem 1.5rem 3rem;
}

.posterContainer,
#rickerContainer {
    display: flex;
    gap: 2rem;
    justify-content: center;
    background: none;
    padding-bottom: 5vh;
}

.posterStuff {
    max-width: 775px;
}

#posterDev {
    gap: 1.5rem;
}

.posterDevItem {
    max-width: 250px;
}

#digitalMediaMockup {
    max-width: 1000px;
    display: flex;
    justify-content: center;
    padding-bottom: 25px;
}

strong {
    font-weight: 800;
}

.mini-title {
    color: white;
    background-color: #F83D0C;
}

.teammateLink {
    font-family: 'arboria', sans-serif;
    color: #F83D0C;
    background-color: white;
    font-weight: 700;
    font-size: 18px;
    margin: 0px;
    padding: 0px;
    text-decoration: underline;
}

.erm {
    background-color: white;
    width: 100%;
    display: flex;
    justify-content: center;
}

.erm2 {
    max-width: 775px;
    display: flex;
    margin: auto;
}

.erm3 {
    display: flex;
    flex-direction: column;
    max-width: 70vw;
    margin: auto;
    row-gap: 20px;
    padding-bottom: 20px;
}

.exhibitSketchesContainer {
    display: flex;
    gap: 1rem;
}

.exhibitSketchItem {
    margin: auto;
    max-width: 325px;
    max-height: 325px;
    background: lightgrey;
}

.finalPosters {
    display: flex;
    justify-content: auto;
    max-width: 500px;
}

.finalPoster-item {
    max-width: 50%;
    border-radius: 15px;
}

#exhibitDiagram {
    max-width: 1000px;
    display: flex;
    justify-content: center;
    padding-bottom: 0.5rem;
    border-radius: 5px;
}

#sketchContainer {
    display: flex;
    background-color: white;
}

#roughSketch1 {
    max-width: 25%;
    margin-left: 13vw;
}

#rs2 {
    margin-left: -5vw;
}

.sketchItem {
    max-width: 55%;
    display: flex;
    justify-content: center;
    margin: auto;
}

.moodboards {
    max-width: 600px;
    ;
}

.logomarks {
    display: flex;
    justify-content: center;
}

.sketches {
    max-width: 775px;
    margin: auto;
    display: flex;
    justify-content: center;
    gap: 1.2rem;
}

#pixelPerfectWireframes {
    flex-direction: column;
    margin: auto;
    gap: 1.2rem;
    max-width: 775px;
}

#initImg {
    max-width: 75%;
    margin: auto;
    display: flex;
    justify-content: center;
}

.exrc-sketches {
    max-width: 425px;
}

.sketch-item {
    width: 60%;
    height: 60%;
}

.draftContainer {
    display: flex;
    background-color: white;
}

.letter {
    flex-direction: column;
    text-align: center;
}

.dropCapdrafts {
    max-width: 775px;
}

#wave-studies {
    margin-left: auto;
    margin-right: auto;
    max-width: 775px;
    padding-left: 4rem;
    padding-right: 4rem;
    background: none;
    justify-content: center;
    display: flex;
}

#moodboard {
    max-width: 775px;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
}

#adjusted-img {
    padding-top: 6.5px;
    padding-bottom: 6.5px;
    background-color: #f0ecec;
}

.CTA {
    display: flex;
}

.CTABrandingRow {
    flex-direction: row;
    margin: auto;
    gap: 1.2rem;
}

.CTABrandingItem {
    width: 300px;
    height: 300px;
    margin: auto;
    background-color: lightgrey;
}

.spreads-container {
    display: grid;
    margin: auto;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
}

.spread-item {
    width: 500px;
}

.headerImg {
    width: 100vw;
}

.mockupImages {
    max-width: 1920px;
    z-index: 0;
    background: none;
}

.ppMockup {
    max-width: 40%;
    margin: -30px -80px 0px -80px;
    z-index: 0;
    display: flex;
    justify-content: center;
}

#mmmMockup {
    max-width: 50%;
}

#exrc {
    margin-bottom: 20px;
    z-index: 0;
}

#rickerLibrary {
    width: 33%;
    margin-left: 400px;
    margin-right: 400px;
}

.footer {
    font-size: 15px;
    padding: 5rem 5rem 2rem 5rem;
    display: flex;
    background-color: black;
}

#logoPlacement {
    justify-content: center;
    margin: 0px;
}

.valorant-container {
    display: flex;
    flex-direction: column;
    background-color: white;
}

.slideShowImage {
    max-width: 100%;
    margin: auto;
    display: flex;
}

.spacer {
    margin-top: 1.2rem;
    margin-bottom: 1.4rem;
    height: 1.2rem;
    background-color: black;
}

#FGC_overlays {
    width: 800px;
    margin: auto;
}

.ppSlideShowImage {
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    background: none;
    justify-content: center;
}

.finalYap {
    display: flex;
}

.yapHeading {
    text-align: center;
}

.link {
    font-size: 48px;
    color: white;
    font-family: "bodega-sans", sans-serif;
    font-weight: 300;
    color: white;
    letter-spacing: 2px;
    margin: auto;
}

#previous {
    margin-right: 50px;
    text-decoration: none;
}

#next {
    margin-left: 50px;
    text-decoration: none;
}

.link:hover,
#previous:hover,
#next:hover {
    scale: 1.05;
    text-decoration: underline;
    transition: ease-in-out 100ms;
    color: #DB6600;
}

.slideshow-container {
    display: flex;
    justify-content: center;
    width: 800px;
    margin: auto;
}

.socialMediaItem {
    margin: auto;
    width: 600px;
    margin-bottom: 1.2rem;
}

.socialMediaItem img,
.flyerItem img,
#SACPoster img,
.socMedItem img {
    max-width: 100%;
}

.olympicsSlideshow,
#digitalMediaMockup {
    max-width: 800px;
    justify-content: center;
}

.exhibitPlanning{
    max-width: 70vw; 
    margin: auto;
}

#exhibitPlanningLayout{
    display:flex; 
    gap:0.8vw;
}

#exhibitItem1{
max-width: 50vw;
}

#exhibitItem1{
    max-width: 20vw;
}

#exhibitItem1{
    max-width: 70vw; margin-top: 2.5vw
}

.caption {
    color: #f2f2f2;
    font-size: 15px;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width: 100%;
    text-align: center;
    background: none;
}

.numberText {
    font-family: "instrument-sans-variable", sans-serif;
    color: white;
    background-color: black;
    fill-opacity: 50%;
    font-size: 15px;
    font-weight: 400;
    padding: 8px 12px;
    position: relative;
    top: 2.5vw;
    z-index: 1;
}

.slideshow-container {
    display: flex;
    flex-direction: column;
}

.arrows {
    display: flex;
}

.prev,
.next {
    cursor: pointer;
    position: relative;
    top: 50%;
    margin: auto;
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 36px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    padding-bottom: 5vh;
}

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.fade {
    animation-name: fade;
    animation-duration: 1s;
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

.resumeButtonWrapper {
    margin: auto;
    justify-content: center;
    text-align: center;
    gap: 1.5vw;
    flex-direction: column;
    padding-bottom: 5vh;
}

.resumeButton,
.contactButton {
    background-color: black;
    color: white;
    font-family: 'bodega-sans', sans-serif;
    font-weight: 400;
    font-size: 64px;
    width: 400px;
    height: 100px;
    text-decoration: none;
}

.resumeButton:hover,
.contactButton:hover {
    transition: ease-in-out 250ms;
    color: #DB6600;
    font-weight: 800;
}

.resumeButton:hover {
    text-decoration: none;
}

svg {
    width: 15%;
}

#SACPoster {
    margin: auto;
    justify-content: center;
    width: 600px;
    padding-bottom: 2rem;
}

.SACItemRow {
    margin: auto;
    justify-content: center;
    display: flex;
    gap: 1rem;
}

#SacItem {
    width: 390px;
}

.SACVisResearch {
    margin: auto;
    justify-content: center;
    background-color: lightgrey;
    width: 775px;
    height: 500px;
    margin-bottom: 1rem;
}

.SACDraftItem {
    margin: auto;
    justify-content: center;
    background-color: lightgrey;
    width: 387.5px;
    height: 300px;
    gap: 0.8rem;
}

.flyerContainer {
    display: flex;
    margin: auto;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 5vh;
}

.flyerItem {
    width: 400px;
}

.socMedGraphicsContainer {
    margin: auto;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.2rem;
}

.socMedRow {
    display: flex;
    margin: auto;
    justify-content: center;
    gap: 1.5rem;
}

.socMedItem {
    width: 325px;
}

.externalLink {
    font-family: 'bodega-sans', sans-serif;
    font-weight: 00;
    letter-spacing: 2px;
    font-size: 48px;
    color: white;
    background-color: none;
    margin-bottom: 40px;

}

.externalLink:hover {
    transition: ease-in 200ms;
    background-color: #DB6600;
}

.backToTop {
    margin: auto;
    color: white;
    text-align: center;
    justify-content: center;
    padding: 2vw;
}


#footerMobile {
    display: none;
}

#backToTop_button {
    color: white;
    margin: auto;
    text-decoration: none;
}

/* RESPONSIVE DESIGN */


@media only screen and (max-width: 1080px) {
    /* index */

    .top-container {
        padding-bottom: 6vh;
    }

    .container {
        text-align: center;
        flex-direction: column;
        padding-bottom: 5vh;
    }

    .name,
    #about,
    #contact {
        font-size: 80px;
    }

    .home-page-nav {
        max-width: 800px;
        flex-direction: column;
    }

    .home-page-nav a {
        font-size: 48px;
    }

    .subtitle {
        font-size: 28px;
        margin-top: -5px;
    }

    .nav-item a {
        padding: 10px;
        font-size: 30px;
        margin: 0rem;
    }

    .the-mega-container,
    .works-menu,
    .works-Row {
        display: Flex;
        flex-direction: column;
    }

    .works-menu,
    .works-Row {
        padding-bottom: none;
    }

    .card {
        width: 100%;
        background: none;
        gap: none;
    }

    .workTitle_home {
        font-size: 50px;
    }

    .backToTop {
        padding: 5vh;
    }

    /* about */
    .aboutWrapper {
        flex-direction: column;
        width: 100vw;
        padding-left: 0vw;
        padding-right: 0vw;
        margin: auto;
    }


    .aboutText {
        padding-left: 5vw;
        padding-right: 5vw;
        line-height: 1.5rem;
    }

    .heading {
        padding: 1rem;
    }

    #digitalReport,
    #sacSystem {
        font-size: 6.5vw;
    }

    .text {
        font-size: 18px;
        padding: 1rem;
    }

    .eemaanItem {
        max-width: 85vw;
        justify-content: center;
        margin: auto;
    }

    #eemaanImg {
        width: 100%;
        margin: auto;
        justify-content: center;
    }

    .workItem {
        font-size: 28px;
        margin-top: 25px;
        padding-top: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .worksImage {
        max-width: 85%;
    }

    .work-title {
        font-size: 12vw;
    }

    .heading {
        font-size: 30px;
    }

    .text {
        font-family: "instrument-sans-variable", sans-serif;
        font-variation-settings: "wght" 400, "wdth" 100;
    }

    .text-bottom {
        padding-bottom: 5vh;
    }

    .resumeButtonWrapper {
        max-width: 1080px;
    }

    #transitCardsContainer {
        width: 100vw;
    }

    /* exrc */

    .resumeButton {
        width: 100%;
    }

    #external{
        font-size: 4vh;
    }

    #SACPoster {
        max-width: 100vw;
    }

    .flyerContainer {
        flex-direction: column;
        width: 100vw;
    }

    .flyerItem {
        width: 100%;
    }

    .mockupImages {
        max-width: 75%;
    }

    .mini-container {
        max-width: 450px;
        margin: auto;
    }

    .externalLink {
        font-size: 24px;
    }

    .foleonVideo {
        max-width: 100vw;
        padding: none;
        border-radius: none;
        margin: auto;
        flex-direction: column;
    }

    .socMedRow {
        flex-direction: column;
    }

    /* esoprts */
    .slideshow-container,
    .mySlides,
    .slideShowImage {
        max-width: 100vw;
    }

    .prev, .next {
        font-size: 18px;
        padding: 8px;
        margin-bottom: 5vh;

    }

    span {
        display: none;
    }

    .socialMediaItem,
    #FGC_overlays {
        max-width: 100vw;
    }

    /* pixel perfect */
    .erm, #moodboard, .erm2, .erm3, .erm4{
        max-width: 100vw;
    }

    .sketches{
        flex-direction: column;
        max-width: 100vw;
    }

    /* model minority */
    .exhibitPlanning{
        max-width: 100vw;
    }

    .posterContainer, .posterContainer img{
        max-width: 100vw;
        flex-direction: column;
    }


    /* olympics */
    #brisbane, #ricker{
        font-size: 11vw;
    }

    #wave-studies{
        max-width: 100vw;
        justify-content: center;
        padding: none;
    }

    .finalPoster-item{
        max-width: 100vw;
    }

    /* footer */

    .footer {
        flex-direction: column;
        width: 100%;
        padding: 1vw;
        gap: 2vh;
        margin-top: 10vh;

    }

    #footerDesktop {
        display: none;
    }

    #footerMobile {
        display: flex;
    }

    .link {
        font-size: 28px;
    }

    #previous,
    #next {
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

}