* {
    box-sizing: border-box
}

body {
    font-family: Raleway hand, cursive;
    font-size: 1.5em;
    background: var(--nav-bg-color)
}

h1, h2, h3, h4, h5, h6 {
    font-family: Raleway, cursive;
    display: block
}

h1 {
    font-size: 2em;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .3)
}

h2 {
    font-size: 1.7em
}

h3 {
    font-size: 1.4em
}

h4 {
    font-size: 1.1em
}

h5 {
    font-size: 1em
}

h6 {
    font-size: .8em
}

h1.title {
    margin-bottom: 20px
}

a {
    transition: all .3s ease
}

content {
    width: 100%
}

footer {
    text-align: center;
    padding: 40px
}

footer ul.social-icons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px
}

footer ul.social-icons li {
    height: 70px;
    padding: 20px
}

footer ul.social-icons a:hover img {
    cursor: pointer;
    filter: invert(50%) sepia(100%) hue-rotate(180deg) saturate(5)
}

footer ul.social-icons li img {
    height: 100%
}

footer span.contract {
    font-size: .8em
}

.contract a {
    color: #fff;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.contract a:hover {
    color: #262626
}

header {
    padding-top: 120px
}

.banner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center
}

.banner img {
    width: 100%
}

nav {
    font-family: Raleway, cursive;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--nav-bg-color);
    z-index: 999;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-evenly
}

nav .logo {
    height: 100%
}

nav .logo img {
    height: 100%
}

nav .menu {
    width: 100%;
    max-width: 1200px;
    height: 80px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    transition: all .3s ease
}

nav .menu ul {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center
}

nav .menu a {
    font-size: 1.15em;
    color: var(--nav-link-color);
    text-decoration: none
}

nav .menu a:hover {
    color: var(--nav-hover-color);
    letter-spacing: 4px
}

nav .social-icons img {
    height: 25px;
    margin: 0 10px;
    transition: all .3s ease
}

nav .social-icons img:hover {
    cursor: pointer;
    filter: invert(50%) sepia(100%) hue-rotate(180deg) saturate(5)
}

nav.scroll .menu {
    height: 40px
}

section#nft {
    background-color: var(--nft-bg-color);
    color: var(--nft-text-color)
}

section#nft .title {
    color: var(--nft-title-color)
}

section#nft .text-and-image .text {
    order: var(--nft-text-order)
}

section#about-section {
    background-color: var(--about-bg-color);
    color: var(--about-text-color)
}

section#about-section .title {
    color: var(--about-title-color)
}

section#about-section .text-and-image .text {
    order: var(--about-text-order)
}

section#faq-section {
    background: rgb(255,255,255);
    background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(243,35,154,0.4) 33%, rgba(245,100,74,0.4) 66%, rgba(255,255,255,1) 100%);
    background-position: center;
}

section#faq-section .title {
    color: var(--faq-title-color);
    margin: 20px auto;
    text-align: center;
    font-size: 3em
}

section#links-section {
    background-color: var(--faq-bg-color)
}

section#links-section .title {
    color: var(--faq-title-color);
    margin: 20px auto;
    text-align: center;
    font-size: 3em
}

section#team-section {
    background-color: white;
}

section#team-section .title {
    color: var(--team-title-color);
    margin: 20px auto;
    text-align: center;
    font-size: 3em
}

section {
    position: relative;
    padding: 25px;
    box-sizing: border-box
}

section .content {
    max-width: 1200px;
    margin: 0 auto
}

.text-and-image {
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.text-and-image .text, .text-and-image .image {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 10px
}

.text-and-image .text {
    width: 50%;
    order: 1
}

.text-and-image .image {
    width: 50%;
    order: 1;
    border-radius: 5%;
}

.text-and-image .text p {
    margin: 10px 0;
    line-height: 1.1em
}

.text-and-image .btn {
    margin-top: 25px;
}

.text-and-image .image img, .text-and-image .image video {
    width: 100%;
    max-width: 500px
}

.text-and-image .image video {
    border: 4px solid #fff;
    border-radius: 20px;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, .2)
}

section#social-section {
    background-color: rgb(245, 36, 154);
    color: #fff
}

section#social-section .social-row {
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-evenly
}

section#social-section .social-row li {
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px
}

section#social-section .social-row a {
    color: #fff;
    text-decoration: none
}

section#social-section .social-row a:hover {
    color: #262626
}

section#social-section .social-row a:hover img {
    cursor: pointer;
    filter: invert(50%) sepia(100%) hue-rotate(130deg) saturate(5)
}

section#social-section .social-row img {
    height: 40px;
    transition: all .3s ease;
    margin-bottom: 5px
}

section#social-section .social-row li .link {
    display: block;
    font-size: .9em
}

nav .connection-widget {
    margin: 0;
    font-size: .6em
}

nav .connection-widget .btn span {
    display: none
}

#faq-section .faq h2 {
    color: var(--faq-question-color);
    margin-bottom: 5px
}

#faq-section .faq p {
    color: var(--faq-answer-color);
    margin-bottom: 5px;
    line-height: 1.1em
}

#faq-section .faq li {
    margin-bottom: 25px
}

#team-section .team {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap
}

#team-section .team h3, #team-section .team span {
    text-align: center
}

#team-section .team h3 {
    color: var(--team-name-color)
}

#team-section .team span {
    color: var(--team-title-color)
}

#team-section .team li {
    margin-bottom: 25px;
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    box-sizing: border-box
}

#team-section .team .avatar {
    width: 100%;
    height: 250px;
    border-radius: 20px;
    background-size: cover;
    margin-bottom: 10px;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    border: 4px solid #fff;
    box-shadow: 5px 5px 0 rgba(0, 0, 0, .2)
}

#team-section .team .avatar video {
    width: 100%;
    transition: all .1s ease;
    opacity: 0;
    display: inline
}

#team-section .team li:hover video {
    opacity: 1
}

@media screen and (max-width: 1200px) {
    #team-section .team li {
        width: 50%
    }
}

@media screen and (max-width: 800px) {
    .badge {
        right: -10px !important
    }

    .text-and-image .image, .text-and-image .text {
        text-align: center;
        width: 100%
    }

    .text-and-image .image {
        order: 1
    }
}

@media screen and (max-width: 640px) {
    h1.title {
        font-size: 2em !important
    }

    section {
        padding: 20px 12px
    }

    #faq-section h2 {
        font-size: 1.3em
    }

    #faq-section p {
        font-size: .9em
    }

    section#social-section .social-row img {
        height: 28px
    }

    section#social-section .social-row li .link {
        font-size: .75em
    }

    section#info .info-row li .big, section#info.scroll .info-row li .big {
        font-size: 1.2em
    }

    section#info .info-row li .small, section#info.scroll .info-row li .small {
        font-size: .8em
    }

    section#info .info-row li {
        line-height: .8em
    }

    .connection-widget {
        max-width: 100%;
        margin: 25px auto 0
    }

    .text-and-image .image, .text-and-image .text {
        text-align: center;
        width: 100%
    }

    .text-and-image .image {
        order: 1;
        padding: 10px 40px
    }

    .countdown .number {
        font-size: 2em
    }

    .countdown-part {
        min-width: 80px;
        margin: 0 5px
    }

    #team-section .team li {
        width: 100%
    }
}

.anchor {
    position: relative;
    top: -80px
}

.scrolled .anchor {
    top: -80px
}

.mobile-menu {
    display: none
}

@media screen and (max-width: 800px) {
    header {
        z-index: 10000
    }

    .mobile-menu {
        display: unset;
        position: absolute;
        right: 20px;
        font-size: 32px
    }

    nav .menu ul {
        height: 0;
        overflow: hidden;
        position: absolute;
        flex-direction: column;
        top: 120px;
        background: #1b2222;
        z-index: 1000;
        padding-top: 10px;
        padding-bottom: 10px;
        opacity: 0;
        transition: all .3s ease
    }

    .scrolled nav .menu ul {
        top: 80px
    }

    nav .menu ul li {
        padding-top: 10px;
        padding-bottom: 10px
    }

    nav .menu ul.expanded {
        height: unset;
        opacity: 1
    }
}

.btn.btn-discord-whitelist {
    font-size: 28px
}

.smaller {
    font-size: .65em;
    opacity: .75
}

.network-warning-spacer {
    height: 80px
}

@media screen and (max-width: 1100px) and (min-width: 801px) {
    nav .menu ul {
        margin-left: 10px
    }

    nav .menu a {
        font-size: .8em
    }

    nav .social-icons img {
        height: 20px
    }
}

@media screen and (max-width: 1100px) {
    .mint-title {
        font-size: 3em
    }
}

@media screen and (max-width: 600px) {
    .wallet-connected {
        display: none
    }

    #wallet-section .connection-widget {
        margin-left: 0
    }

    .mint-title {
        font-size: 1.65em
    }
}

.banner-overlay, .mint-soldout-top {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em
}

@media screen and (max-width: 600px) {
}

.banner-overlay a {
    box-shadow: 0 10px 10px #00000099
}

.team-socials a {
    color: #fff;
    font-size: 28px;
    text-shadow: 2px 2px 0 #00000066;
    margin-top: 5px
}

.team .avatar {
    position: relative
}

.team-socials {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    position: absolute;
    bottom: 10px;
    right: 10px
}

.btn[disabled] {
    border: none !important;
    color: #fff !important;
    box-shadow: unset !important
}

#your-gallery-section, #gallery-section {
    background-color: #ffffff
}

section#your-gallery-section .title, section#gallery-section .title, section#media-section .title {
    color: var(--roadmap-title-color);
    margin: 20px auto;
    text-align: center;
    font-size: 3em
}

#media-section {
    background: #8150b1
}

.media-grid img {
    padding: 15px;
    background: #543377;
    object-fit: contain
}


#media-section p {
    text-align: center
}

.media-title {
    font-size: 1.25em;
    text-transform: uppercase
}

.media-grid a {
    color: #fff;
    text-decoration: none
}

.media-credit {
    margin-top: 8px;
    opacity: .75;
    font-size: .75em;
    flex-direction: row
}

.media-credit span {
    opacity: .65;
    display: unset
}

.media-credit a {
    text-decoration: underline
}

@media screen and (max-width: 1000px) {
    .your-gallery-grid > *, .gallery-grid > *, .media-grid > * {
        width: calc(33.333% - 20px);
        margin: 10px
    }
}

@media screen and (max-width: 600px) {
    .your-gallery-grid > *, .gallery-grid > *, .media-grid > * {
        width: calc(50% - 20px)
    }
}

.bio {
    margin-top: 15px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, .75);
    font-size: .8em;
    width: 100%
}

.team h3 {
    font-size: 1em
}

.bio a {
    color: #fff
}

.lds-ripple {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
    margin-left: auto;
    margin-right: auto
}

.lds-ripple div {
    position: absolute;
    border: 4px solid #fff;
    opacity: 1;
    border-radius: 50%;
    animation: lds-ripple 1s cubic-bezier(0, .2, .8, 1) infinite
}

.lds-ripple div:nth-child(2) {
    animation-delay: -.5s
}

@keyframes lds-ripple {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1
    }
    100% {
        top: 0;
        left: 0;
        width: 72px;
        height: 72px;
        opacity: 0
    }
}

.countdown h2 {
    color: #fff;
    font-size: 2.5em;
    margin-bottom: 10px
}

.modal .popup .btn-close {
    background: #4a3c56;
    font-size: 1em
}

.modal .popup .btn-close:hover {
    background: #2a2330
}

.modal .popup .btn-tweet {
    background: #262626
}

.modal .popup .btn-tweet:hover {
    background: #262626
}

.btn-tweet > i {
    margin-right: 10px
}

@media screen and (max-width: 360px) {
    .mint-amount {
        padding: 5px
    }

    input[type=range] {
        height: 18px
    }

    .mint-amount select {
        padding: 5px;
        font-size: .75em
    }

    .mint-whitelisted {
        font-size: .75em
    }

    .mint-title {
        font-size: 1.5em
    }

    .btn {
        padding: 10px;
        font-size: 1em
    }
}

.hidden-2 {
    opacity: 0
}

@keyframes wiggle {
    from {
        transform: rotate(15deg) scale(1)
    }
    to {
        transform: rotate(5deg) scale(1.05)
    }
}

.admin .btn {
    padding: 6px;
    font-size: .8em
}

.go-form {
    display: flex;
    width: 100%;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px
}

.go-form span {
    white-space: nowrap;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center
}

.go-form > input {
    width: 100%;
    margin-right: 10px;
    border: none;
    padding: 10px;
    border-radius: 5px
}

.go-form > .btn {
    margin-top: 0;
    padding: 5px 10px;
    font-size: .75em
}

body {
    font-family: Raleway;
}