/*==================
Landing Page
==================*/

.landing-bg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100vh - 80px);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.landing-bg-gradient {
    width: 100vw;
    position: absolute;
    bottom: 0;
    z-index: -1;
    min-width: 1000px;
}

.landing-headers {
    min-width: 300px;
    width: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 4rem;
    text-align: center;
    font-family: var(--ff-title);
    color: var(--co-title);
}

.landing-headers h1 {
    font-size: 6em;
}

.landing-headers h3 {
    font-size: var(--fs-xl);
}

@media (max-width: 800px) {

    .landing-headers h1 {
        font-size: 4em;
    }

}

.newsletter-form {
    display: flex;
    margin-top: 2rem;
    border-radius: 16px;
    width: 80%;
    min-width: 350px;
}

.newsletter-email {
    border: 2px solid #cdd0f3;
    border-right: none;
    margin: 0;
    font-family: var(--ff-text);
    font-size: var(--fs-m);
    padding: 0.75rem;
    width: 100%;
    border-radius: 16px 0 0 16px;
    transition: 250ms;
}

.newsletter-email:focus,
.newsletter-email:not(:placeholder-shown) {
    border: 2px solid #868dfc;
    border-right: none;
    outline: none;
}

.newsletter-submit {
    border: 2px solid #cdd0f3;
    border-left: none;
    border-radius: 0 16px 16px 0;
    font-family: var(--ff-text);
    font-size: var(--fs-m);
    padding: 1rem;
    outline: none;
    transition: 250ms;
    background-color: #cdd0f3;
    color: #ffffff;
    cursor: pointer;
}

.newsletter-email:focus+.newsletter-submit {
    border: 2px solid #868dfc;
    border-left: none;
}

.newsletter-email:not(:placeholder-shown)+.newsletter-submit {
    background-color: #868dfc;
    border: 2px solid #868dfc;
    border-left: none;
}

/*==================
Bridge Background
==================*/

.landing-banner {
    position: absolute;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    bottom: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.landing-container {
    display: flex;
    align-items: flex-end;
    position: absolute;
    align-self: center;
}

.landing-bridge {
    min-width: 300px;
    width: 50vw;
    padding: 0 3rem;
    height: 150px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.landing-bridge::before {
    content: "";
    width: 150%;
    height: 150px;
    background-repeat: repeat-x;
    position: absolute;
    z-index: -1;
    background-size: contain;
    background-image: url('/static/images/home/landing-bridge-back.png');
}

.landing-bridge::after {
    content: "";
    width: 150%;
    height: 150px;
    background-repeat: repeat-x;
    position: absolute;
    z-index: 1;
    background-size: contain;
    background-image: url('/static/images/home/landing-bridge-front.png');
}

.landing-car {
    position: absolute;
    bottom: 40px;
    border-radius: 8px 8px 0 0;
}

.car-right-1 {
    background-color: #7a5ba1;
    width: 80px;
    height: 30px;
    transform: translate(-40vw);
    animation: car-move-right 7.31s infinite linear;
}

.car-right-2 {
    background-color: #3dc6fa;
    width: 70px;
    height: 25px;
    transform: translate(-40vw);
    animation: car-move-right 5.03s infinite 1s linear;
}

.car-right-3 {
    background-color: #c563f8;
    width: 91px;
    height: 34px;
    transform: translate(-40vw);
    animation: car-move-right 6.73s infinite 2s linear;
}

.car-left-1 {
    background-color: #6a518c;
    width: 82px;
    height: 28px;
    z-index: -1;
    transform: translate(40vw);
    animation: car-move-left 5.66s infinite 2.4s linear;
}

.car-left-2 {
    background-color: #05a7e5;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 40px;
    z-index: -1;
    transform: translate(40vw);
    animation: car-move-left 8.94s infinite 0.67s linear;
}

.car-left-3 {
    background-color: #a555ce;
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 40px;
    z-index: -1;
    transform: translate(40vw);
    animation: car-move-left 8.94s infinite 0.67s linear;
}

.landing-banner img {
    min-width: 500px;
    width: 30vw;
}

@keyframes car-move-right {
    from {
        transform: translate(-50vw);
    }

    to {
        transform: translate(50vw);
    }
}

@keyframes car-move-left {
    from {
        transform: translate(50vw);
    }

    to {
        transform: translate(-50vw);
    }
}

/*==================
What is XdHacks?
==================*/
.intro-xd {
    padding: 4rem 3rem 2rem 3rem;
    background-color: var(--co-bg-secondary);
}

.intro-xd h2 {
    font-size: var(--fs-xxl);
    margin-bottom: 1rem;
    font-family: var(--ff-title);
    color: var(--co-title);
}

.intro-xd p {
    font-size: var(--fs-m);
    line-height: var(--fs-xl);
    font-family: var(--ff-text);
    color: var(--co-text);
}

.mission-xd {
    margin-top: 2rem;
    display: flex;
}

.mission-statement {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 2rem;
}

@media screen and (max-width: 1000px) {
    .mission-xd {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
    }

    .mission-statement {
        margin-top: 2rem;
        margin-left: 0;
    }
}


/*==================
Crossroads
==================*/
.crossroads-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.crossroads-canvas {
    width: 42.5vw;
    align-self: center;
}

@media screen and (max-width: 1000px) {
    .crossroads-canvas {
        width: 80vw;
    }
}

.car-blue .car-c0 {
    fill: #3dc6fa;
}

.car-blue .car-c1 {
    fill: #06a9e8;
}

.car-blue .car-c2 {
    fill: #045e81;
}

.car-blue .car-c3 {
    fill: #06b6f9
}

.car-pink .car-c0 {
    fill: #e94e78;
}

.car-pink .car-c1 {
    fill: #d84d73;
}

.car-pink .car-c2 {
    fill: #6b3a46;
}

.car-pink .car-c3 {
    fill: #b54a66
}

.car-white .car-c0 {
    fill: #f0f0f0;
}

.car-white .car-c1 {
    fill: #d5d5d5;
}

.car-white .car-c2 {
    fill: #9e9e9e;
}

.car-white .car-c3 {
    fill: #dddddd
}

.car-purple .car-c0 {
    fill: #7a5ba2;
}

.car-purple .car-c1 {
    fill: #6b508e;
}

.car-purple .car-c2 {
    fill: #47355d;
}

.car-purple .car-c3 {
    fill: #745699
}

.traffic-lights {
    transition: 0.1s;
}

/*==================
Hackathon Introduction
==================*/

.hackathon-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--co-bg-secondary);
    padding: 2rem 3rem;
}

/*==================
What is a Hackathon?
==================*/

.hackathon-intro h2 {
    font-size: var(--fs-xxl);
    margin-bottom: 2rem;
    font-family: var(--ff-title);
    color: var(--co-title);
}

.mock-site {
    border: 4px solid #edeffe;
    border-radius: 8px;
    width: 60vw;
    height: 33.75vw;
    min-width: 800px;
    min-height: 450px;
    overflow: hidden;
    background-color: #edeffe;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.mock-site-btns {
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.mock-site-btns div {
    margin-right: 0.5rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.mock-site-btn-1 {
    background-color: #32c747;
}

.mock-site-btn-2 {
    background-color: #fdbb40;
}

.mock-site-btn-3 {
    background-color: #fc5753;
}

.mock-site-nav {
    display: flex;
}

.mock-site-nav li {
    list-style: none;
    padding: 0.4rem 1.5rem;
    border-radius: 8px 8px 0 0;
    background-color: #fbfbfb;
    box-sizing: border-box;
    display: flex;
    position: relative;
    font-family: var(--ff-text);
    font-size: var(--fs-s);
    color: var(--co-text);
    cursor: pointer;
}

.mock-site-nav li:focus {
    background-color: var(--co-bg-secondary);
    font-weight: 700;
    outline: none;
}

.mock-site-nav li:not(:last-of-type)::after {
    content: "";
    position: absolute;
    border-right: 1px solid var(--co-border);
    width: 100%;
    height: 20px;
    margin-left: -1.5rem;
    z-index: 1;
}

.mock-site-nav li.mock-site-active {
    background-color: var(--co-bg-secondary);
    cursor: default;
}

.mock-site-window {
    background-color: var(--co-bg-secondary);
    flex-grow: 1;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
}

.mock-site-page {
    display: none;
}

.mock-site-page.mock-site-active {
    display: block;
}

@media screen and (max-width: 850px) {
    .mock-site {
        width: 90vw;
        min-width: 0;
        height: 100%;
    }

    .mock-site-nav li {
        padding: 0.4rem 0.75rem;
    }

    .mock-site-btns div {
        display: none;
    }

    .mock-site-nav li:not(:last-of-type)::after {
        margin-left: -0.75rem;
    }
}

/*==================
Hackathon Definition
==================*/
#page-def {
    padding: 2rem;
    font-family: var(--ff-text);
    color: var(--co-text);
}

#page-def h4 {
    font-size: var(--fs-xl);
    font-family: var(--ff-title);
    color: var(--co-title);
}

#page-def p {
    margin-bottom: 0.5rem;
}

.hack-div {
    margin-bottom: 1.5rem;
}

.hack-def {
    display: flex;
    align-items: center;
}

.hack-def-audio {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #05a7e5;
    width: 32px;
    height: 32px;
    margin-right: 16px;
    border-radius: 50%;
    border: 1px solid var(--co-border);
}

.noun-type {
    background-color: #efefef;
    font-size: var(--fs-s);
    padding: 0.25rem;
    font-weight: 700;
    border-radius: 4px;
}

.hack-desc {
    margin-left: 1rem;
}

.hack-desc p:last-child {
    color: var(--co-text-l)
}

.hack-synonyms {
    display: flex;
}

.hack-synonyms ul {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    margin-top: -0.5rem
}

.hack-synonyms li {
    font-size: var(--fs-s);
    padding: 0.25rem 0.5rem;
    border-radius: 16px;
    border: 1px solid var(--co-border);
    margin: 0.25rem 0.25rem;
    list-style: none;
}

/*==================
Hack Page
==================*/
#page-hack.mock-site-active {
    display: flex;
    align-items: stretch;
    height: 100%;
    font-family: var(--ff-text);
    font-size: var(--fs-m);
}

.hack-sidebar {
    min-width: 150px;
    border-right: 1px solid var(--co-border);
    padding: 1rem 0;
    background-color: var(--co-bg-secondary);
}

.hack-sidebar div {
    padding: 0.25rem 1rem;
    color: var(--co-text)
}

.hack-sidebar div:first-child {
    background-color: #f0f0f0;
}

.hack-sidebar .fa-html5 {
    margin-right: 0.25rem;
    color: orangered;
}

.hack-sidebar .fa-css3 {
    margin-right: 0.25rem;
    color: #2965f1;
}

.hack-sidebar .fa-js {
    margin-right: 0.25rem;
    color: yellow;
    background-color: #202020;
    line-height: var(--fs-s);
}

.hack-code {
    padding: 1rem;
    flex-grow: 1;
    font-size: var(--fs-l);
}

.hack-code h4 {
    font-weight: 500;
}

.code-string {
    color: rgb(218, 141, 0);
}

.code-res {
    color: rgb(139, 0, 139);
}

.code-var {
    color: rgb(86, 175, 204);
}

.code-syn {
    color: var(--co-border);
}

.code-elem {
    color: rgb(55, 55, 177);
}

.code-com {
    color: rgb(42, 126, 42);
}

#code-change::after {
    content: "|";
    position: absolute;
    margin-left: -3px;
}

#code-change.code-still::after {
    animation: cursor-blink 1s infinite 0.5s;
}

@keyframes cursor-blink {
    0% {
        content: "|";
    }

    50% {
        content: "";
    }

    100% {
        content: "|";
    }
}

@media screen and (max-width: 850px) {
    #page-hack.mock-site-active {
        flex-direction: column;
    }

    .hack-sidebar {
        display: flex;
        border-right: none;
        border-bottom: 1px solid var(--co-border);
        padding: 0;
    }

    #page-hack code {
        font-size: var(--fs-xl);
    }
}




/*==================
Engage
==================*/
#page-engage.mock-site-active {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.engage-head {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--co-border);
    padding: 0.5rem 1rem;
}

.engage-head img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 1rem;
    object-fit: contain;
}

.engage-head p {
    font-family: var(--ff-title);
    font-weight: 700;
}

.engage-chat {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    flex: 1 1 200px;
    overflow: scroll;
}

.engage-chat::-webkit-scrollbar {
    display: none;
}

.engage-chat-self {
    align-self: flex-end;
}

.engage-chat-them {
    align-self: flex-start;
    display: flex;
}

.engage-chat-them img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-right: 1rem;
    object-fit: contain;
    align-self: flex-end;
}

.engage-chat-them div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.engage-chat-them p,
.engage-chat-them h4 {
    padding: 0.5rem 1rem;
    max-width: 400px;
    margin-right: 2rem;
    background-color: var(--co-bg);
    margin-bottom: 0.25rem;
}

.engage-chat-them p {
    border-radius: 4px 16px 16px 16px;
}

.engage-chat-them h4 {
    font-weight: 500;
    border-radius: 16px 16px 16px 4px;
}

.engage-chat-self {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.engage-chat-self p {
    padding: 0.5rem 1rem;
    max-width: 400px;
    background-color: #c563f8;
    margin-bottom: 0.25rem;
    color: #ffffff;
    margin-left: calc(45px + 3rem);
}

.engage-chat-self p {
    border-radius: 16px 4px 4px 16px;
}

.engage-chat-self p:first-child {
    border-radius: 16px 16px 4px 16px;
}

.engage-chat-self p:last-child {
    border-radius: 16px 4px 16px 16px;
}

.engage-chat-type {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--co-border);
    padding: 0.5rem 1rem;
}

.engage-chat-type input {
    color: var(--co-text);
    font-family: var(--ff-text);
    font-size: var(--fs-s);
    border-radius: 32px;
    padding: 0.5rem 1rem;
    border: none;
    flex-grow: 1;
    border: 1px solid var(--co-border);
    transition: 0.5s;
}

.engage-chat-type input:focus {
    background-color: var(--co-bg);
    outline: none;
}

.engage-chat-type button {
    background-color: #c563f8;
    color: #ffffff;
    border-radius: 32px;
    padding: 0.5rem 1rem;
    margin-left: 1rem;
    border: none;
    cursor: pointer;
}


/*==================
Learning
==================*/
#page-learn.mock-site-active {
    display: flex;
    align-items: stretch;
    flex-grow: 1;
    font-family: var(--ff-text);
    font-size: var(--fs-m);
}

.learn-sidebar {
    min-width: 150px;
    width: 20%;
    border-right: 1px solid var(--co-border);
    padding: 1.25rem;
    box-sizing: border-box;
    background: linear-gradient(to top, var(--co-bg) 40%, var(--co-bg-secondary) 80%);
    display: flex;
    flex-direction: column;
}

.learn-sidebar img {
    width: 100%;
    align-self: center;
}

.learn-sidebar text {
    font-family: var(--ff-title);
}

.learn-sidebar svg {
    width: 100%;
}

.learn-sidebar ul {
    margin-top: 2rem;
}

.learn-sidebar ul li {
    font-size: var(--fs-s);
    list-style: none;
    margin-bottom: 0.1rem;
}

.learn-sidebar ul li a:hover {
    text-decoration: underline;
}

.learn-article {
    padding: 2rem;
}

.learn-article h4 {
    font-size: var(--fs-xl);
}

.learn-from-xdhacks {
    font-family: var(--ff-text);
    font-size: var(--fs-s);
    color: var(--co-text);
    margin-bottom: 1.5rem;
}

.learn-article p a:hover {
    text-decoration: underline;
}

.learn-article p {
    margin-bottom: 1rem;
}


/*==================
Network
==================*/
#page-network.mock-site-active {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    overflow: hidden;
}

#page-network h4 {
    margin-top: 1rem;
    position: absolute;
    max-width: 80vw;
    text-align: center;
}

.network-link {
    stroke: #999;
}

.network-node {
    cursor: grab;
}

.network-node:active {
    cursor: grabbing;
}

#network-graph {
    max-height: 600px;
}



/*==================
How to Join Us
==================*/
.join-us {
    background-color: #dbdefd;
}

.join-us-content {
    padding: 2rem 3rem 3rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.join-us-content h2 {
    color: var(--co-title);
    font-size: var(--fs-xxl);
    margin: 1rem 0;
    text-align: center;
}

.join-us-content>p {
    font-size: var(--fs-m);
    color: var(--co-title);
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}

.join-us-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.join-us-card {
    margin: 1rem;
    background-color: var(--co-bg-secondary);
    padding: 2rem;
    width: 250px;
    height: 300px;
    border-radius: 16px;
    box-shadow: 5px 10px 10px #888888;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.5s;
}

.join-us-cards>a:focus {
    outline: none;
}

.join-us-card:hover,
.join-us-cards>a:focus .join-us-card {
    transform: translateY(-16px);
}

.join-us-card>img {
    height: 100px;
    width: auto;
    margin: 1rem 0 2rem 0;
}

.join-us-card>h4 {
    text-align: center;
    margin-bottom: 1rem;
    color: var(--co-title);
}

.join-us-card>p {
    color: var(--co-text);
}

/*==================
Rounds
==================*/
.cities {
    background-color: #dbdefd;
    display: flex;
    flex-direction: column;
}

.background-wave {
    width: 100%;
    padding-top: 1rem;
    background-color: var(--co-bg-secondary);
    justify-self: flex-start;
}

.background-wave-bottom {
    padding-top: 0;
    justify-self: flex-end;
}

.cities h2 {
    color: var(--co-title);
    font-size: var(--fs-xxl);
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: center;
}

.cities>p {
    font-size: var(--fs-m);
    color: var(--co-title);
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}

.cities-list {
    display: flex;
    align-items: flex-end;
    overflow-x: scroll;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.cities-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.cities-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: 0.25s;
}

.cities-list::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}

.cities-list::-webkit-scrollbar-track {
    opacity: 0;
}

.cities-list>a:focus {
    outline: none;
}

.city-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.city-item>img {
    width: 300px;
    height: 300px;
    object-fit: contain;
    object-position: left bottom;
    filter: drop-shadow(0px 0px 0px #dbdefd);
    transition: 0.5s;
}

.city-item:hover>img,
.cities-list>a:focus>.city-item>img {
    filter: drop-shadow(10px 10px 2px var(--co-border));
}


.city-item>p {
    position: absolute;
    font-size: var(--fs-l);
    color: var(--co-text);
    opacity: 0.25;
    top: 16px;
    transition: 0.5s;
}

.city-item:hover>p {
    opacity: 1;
    top: 0px;
}

.your-city {
    flex: 0 0 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.your-city>p {
    color: var(--co-title);
    font-weight: 700;
}

.your-city a {
    color: #ffffff;
    background-color: #868dfc;
    padding: 1rem;
    border-radius: 32px;
    margin-top: 1rem;
    cursor: pointer;
}

/*==================
Sponsors
==================*/

.sponsors {
    padding: 2rem 3rem;
    background-color: var(--co-bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sponsors h2 {
    font-size: 32px;
    color: var(--co-title);
    margin: 16px 0;
    text-align: center;
}

.sponsors p {
    font-size: 16px;
    color: var(--co-title);
    text-align: center;
    margin-bottom: 16px;
}

.sponsor-list-container {
    overflow: hidden;
    max-width: 1200px;
    width: 90vw;
}

.sponsor-list {
    display: flex;
    width: 1200px;
}

.sponsor-list-1 {
    animation: scroll-sponsors-1 20s linear infinite;
}

.sponsor-list-2 {
    animation: scroll-sponsors-2 20s linear infinite;
}

.sponsor-list img {
    width: 100px;
    padding: 10px;
    height: 100px;
    object-fit: contain;
}

.button-large {
    color: #ffffff;
    background-color: #868dfc;
    padding: 1rem;
    border-radius: 32px;
    margin-top: 1rem;
    cursor: pointer;
    font-size: large;
}

@keyframes scroll-sponsors-1 {
    from {
        transform: translateX(0px);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes scroll-sponsors-2 {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0px);
    }
}