@font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/Inter-ExtraBold.woff2?v=3.13") format("woff2"),
            url("../fonts/Inter-ExtraBold.woff?v=3.13") format("woff");
}

@font-face {
    font-family: 'Inter';
    font-style:  normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Inter-Regular.woff2?v=3.13") format("woff2"),
            url("../fonts/Inter-Regular.woff?v=3.13") format("woff");
}

:root {
    --brand-line-color:  rgb(255, 204, 0);
    --brand-topic-color: rgb(0, 217, 181);
    --brand-joke-color:  rgb(93, 160, 239);
    --brand-color: black;
    --main-color: #fc0;
    --def-color: #fc0;
}

body {
    font: 62.5%/1.4 "Inter", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: black;
    font-size: 18px;
    background: var(--main-color);
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-weight: 400;
    user-zoom: none;
    transition: background 350ms cubic-bezier(0.215,0.61,0.355,1);
}


body.first__theme--line  { --main-color: var(--brand-line-color) }
body.first__theme--topic { --main-color: var(--brand-topic-color)}
body.first__theme--joke  { --main-color: var(--brand-joke-color) }

* {
    box-sizing: border-box;
}

canvas {
    position: fixed;
    touch-action: none;
    width: 100%;
    height: 100%;
    top: -60px;
    left: 0;
    z-index: -1;
    opacity: .1;
    transition: all 350ms cubic-bezier(0.215,0.61,0.355,1);
    transition-delay: 0.2s;
}

main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    padding: 0;
    margin: 0;
    z-index: 10;
    /* overflow: hidden; */
    box-sizing: border-box;
    /* height: calc(var(--vh, 1vh) * 100); */
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

section {
    flex: 1;
    max-width: 60vw;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10vh 0;
}

h1 {
    font-size: 6vh;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.04em;
    box-sizing: border-box;
    text-align: center;
    flex: 1;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
}

header nav {
    display: flex;
    justify-content: space-between;
    padding: 60px;
    align-items: flex-start;
    color: black;
    position: relative;
}

header nav a {
    color: black;
}


footer {
    width: 320px;
    /* min-height: 250px; */
    display: flex;
    flex-direction: column;
    /* padding-bottom: 5vh; */
    justify-content: center;
    align-items: center;
    position: relative;
}

aside {
    display: flex;
    height: 60px;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 100px;
    width: 100%;
    transition: all 250ms cubic-bezier(0.215,0.61,0.355,1);
}

select {
    flex: 1 0 auto;
    padding: 0 20px;
    padding-left: 30px;
    border: 0;
    border-radius: 0;
    height: 100%;
    color: black;
    font-family: inherit;
    font-size: 16px;
    line-height: 34px;
    letter-spacing: 0.2px;
    outline: none;
    width: 68%;
    background-color: transparent;
    -webkit-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E  %3Cpath d='M6 9.65685L7.41421 11.0711L11.6569 6.82843L15.8995 11.0711L17.3137 9.65685L11.6569 4L6 9.65685Z' fill='currentColor'/%3E  %3Cpath d='M6 14.4433L7.41421 13.0291L11.6569 17.2717L15.8995 13.0291L17.3137 14.4433L11.6569 20.1001L6 14.4433Z' fill='currentColor'/%3E%3C/svg%3E") no-repeat right 15px center / 20px;
    box-shadow: 19px 0 0 -18px rgba(0, 0, 0, 0.2);
}

.nsfw {
    width: 35%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.nsfw label {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: row;
    left: 0;
    top: 0;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 11px;
    line-height: 1;
    user-select: none;
    -moz-user-select: none;
    font-family: inherit;
    font-weight: 800;
}

.nsfw label::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    box-shadow: 0 0 0 2px black;
    box-sizing: border-box;
    transition: all 350ms cubic-bezier(0.215,0.61,0.355,1);
    margin-right: 10px;
    border-radius: 100px;
}

.nsfw input:checked ~ label::before {
    box-shadow:0 0 0 2px black, inset 0 0 0 10px black;
}

.nsfw input {
    position: absolute;
    left: -99999px;
}

.form__button {
    width: 80%;
    display: flex;
    position: relative;
}

#generate_button {
    width: 100%;
    justify-content: flex-start;
    padding-left: 20px;
}

#copy_button {
    width: 40%;
    background-color: var(--main-color);
    color: black;
    position: absolute;
    z-index: 1;
    height: 40px;
    top: 10px;
    right: 10px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
}

#copy_button svg {
    margin-right: 5px;
}

.generate {
    display: flex;
    background-color: black;
    height: 60px;
    border: 0;
    padding: 0;
    margin: 0;
    color: white;
    justify-content: center;
    align-items: center;
    outline: none;
    cursor: pointer;
    font-size: 14px;
    transition: all 250ms cubic-bezier(0.215,0.61,0.355,1) ;
    color: var(--main-color);
    border-radius: 100px;
    margin-top: 20px;
    box-shadow: 0 0 0 0px black;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    box-sizing: border-box;
}

.generate svg {
    width: 24px;
    height: 24px;
    margin-right: 10px;
    transition: all 250ms cubic-bezier(0.215,0.61,0.355,1);
    transform: scale(0.8);
}

.generate:active {
    transition-delay: 0 !important;
}

#generate_button:hover svg {
    transform: scale(1.1);
}


.creators {
    text-align: center;
    color: black;
    padding: 20px 0;
    font-size: 14px;
}

.creators a {
    color: black;
}

.animate {
    transition: all 350ms cubic-bezier(0.215,0.61,0.355,1);
}

.loading .animate,
.loading canvas {
    opacity: 0;
    -webkit-transform: translate3d(0,2rem,0);
    -ms-transform: translate3d(0,2rem,0);
    transform: translate3d(0,2rem,0);

}

section.animate {
    transition-delay: 0.3s;
}

.generate.animate {
    transition-delay: 0.1s;
}

aside {
    transition-delay: 0.2s;
}

.creators {
    transition-delay: 0.4s;
}

#copy {
    position: absolute;
}

h2 {
    font-size: 60px;
    margin: 0;
    font-weight: 400;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 18;
    cursor: pointer;
}

@media screen and (max-width: 1024px) {
    h1 {
        font-size: 6vw;
    }
}

@media screen and (max-width: 415px) {
    header nav {
        padding: 30px 40px;
    }

    canvas {
        display: none !important;
    }

    nav a {
        display: none;
    }

    .share-button {
        margin: 0 !important;
    }

    header nav {
        justify-content: space-around;
    }

    /* main {
        padding: 20px 0 0 0;
    } */

    .alert {
        top: -40px !important;
    }

    section {
        padding: 0;
        max-width: 80vw;
    }

    section h1 {
        line-height: 1.4;
        user-select: all;
        -webkit-user-select: all;
        -moz-user-select: all;
    }

    .creators {
        padding-top: 2vh;
    }

    /* footer {
        padding-bottom: 0;
    } */

    [href="https://tiktok.com/@firstline.me"] {
        margin-left: 0 !important;
    }
}

body.generated section {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: all 140ms cubic-bezier(0.215,0.61,0.355,1);
}


.social__link {
    display: flex;
    margin-left: 10px;
}

.social__link svg {
    width: 24px;
    height: 24px;
}

.alert {
    background: white;
    transition: all 140ms cubic-bezier(0.215,0.61,0.355,1);
    transition-property: transform,opacity;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border-radius: 50px;
    overflow: hidden;
    display: flex;
    align-items: center;
    pointer-events: none;
    color: #222;
    padding: 14px 20px;
    font-size: 12px;
    line-height: 1;
    position: absolute;
    top: -80px;
    z-index: 20;
    opacity: 1;
    transition-delay: 0.1s;
}

.alert.hidden {
    transform: translate3d(0,3px,0);
    opacity: 0;
}

.first__social {
    display: flex;
    flex-direction: row;
    margin-left: auto;
}

.first__brands {
    display: flex;
    flex-direction: column;
    transition: all .4s;
    border-radius: 5px;
    position: absolute;
    z-index: 2;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E  %3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor'/%3E%3C/svg%3E") no-repeat 4px 4px/ 20px;
    padding-left: 25px;
    cursor: pointer;
    min-width: 120px;
    height: 30px;
    align-items: flex-start;
    box-sizing: border-box;
    left: 40px;
}

.first__brands:hover {
    height: auto;
}

.hover__brand--line  { --main-color: var(--brand-line-color)}
.hover__brand--topic { --main-color: var(--brand-topic-color)}
.hover__brand--joke  { --main-color: var(--brand-joke-color)}

.first__brand {
    font-weight: 800;
    text-decoration: none;
    transition: all 350ms cubic-bezier(0.215,0.61,0.355,1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align-last: left;
    font-weight: 800;
    border-radius: 4px;
    padding: 0 10px 0 35px;
    text-transform: uppercase;
    font-size: 12px;
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: auto 14px;
    height: 30px;
    width: 100%;
    margin-bottom: 5px;
    flex: 1 0 auto;
}

.first__brand--joke:hover  {background-color: var(--brand-joke-color)}
.first__brand--topic:hover {background-color: var(--brand-topic-color)}
.first__brand--line:hover {background-color: var(--brand-line-color)}

.first__brand--one:hover  {background-color: rgba(0, 0, 0, 0.1)}

.first__brand--two ,
.first__brand--three {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
}

.first__brands:hover .first__brand--two ,
.first__brands:hover .first__brand--three {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.first__brand--line {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='922' height='760' viewBox='0 0 922 760' fill='none'%3E%3Cpath d='M850.051 71.0234C827.545 48.5069 800.823 30.6453 771.412 18.4588C742.001 6.27238 710.478 0 678.642 0C646.806 0 615.283 6.27238 585.872 18.4588C556.461 30.6453 529.739 48.5069 507.233 71.0234L460.525 117.731L413.818 71.0234C368.357 25.563 306.699 0.0235637 242.409 0.0235642C178.118 0.0235647 116.46 25.563 70.9999 71.0234C25.5394 116.484 4.79004e-07 178.141 0 242.432C-4.79004e-07 306.723 25.5394 368.381 70.9999 413.841L117.708 460.549L386.494 729.335C427.38 770.222 493.67 770.222 534.557 729.335L803.343 460.549L850.051 413.841C872.567 391.335 890.429 364.614 902.615 335.203C914.802 305.792 921.074 274.268 921.074 242.432C921.074 210.597 914.802 179.073 902.615 149.662C890.429 120.251 872.567 93.5294 850.051 71.0234Z' fill='black'/%3E%3C/svg%3E") ;
}

.first__brand--topic {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760' fill='none'%3E%3Cpath d='M760 380C760 589.868 589.868 760 380 760C170.132 760 0 589.868 0 380C0 170.132 170.132 0 380 0C589.868 0 760 170.132 760 380Z' fill='black'/%3E%3C/svg%3E");
}

.first__brand--joke {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='848' height='760' viewBox='0 0 848 760' fill='none'%3E%3Cpath d='M339.825 48.5467C377.197 -16.1823 470.625 -16.1822 507.996 48.5468L834.668 614.36C872.04 679.089 825.326 760 750.583 760H97.2383C22.4957 760 -24.2184 679.089 13.1529 614.36L339.825 48.5467Z' fill='black'/%3E%3C/svg%3E") ;
}