@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital@1&display=swap');
@import url('http://fonts.cdnfonts.com/css/gotham');

html {
    scroll-behavior: smooth;
    cursor: url("assets/cursor-02.svg") 20 20, auto;
}


body {
    background: linear-gradient(#000F02, #122900);
    overflow-x: hidden;
    text-align: center;
}

body a {
    text-decoration: none;
}

.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}


.cyco {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.cyco-logo {
    max-width: 80%;
    width: 720px;
    margin-top: 120px;
    margin-bottom: 120px;
    z-index: 2;
}

.countdown {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: -10px;
    font-family: 'Gotham', sans-serif;
    font-weight: 900;
    margin: auto;
}

.countdown div {
    color: #fff;
    flex-basis: 100px;
    z-index: 2;
}

.countdown div p {
    font-size: 60px;
    margin-bottom: 0px;
    margin-left: 20px;
}

.countdown div span {
    padding-left: 25px;
}

#day {
    background-image: linear-gradient(180deg,
            hsl(0deg 100% 60%) 0%,
            hsl(6deg 100% 59%) 10%,
            hsl(12deg 100% 57%) 20%,
            hsl(18deg 100% 56%) 30%,
            hsl(24deg 100% 55%) 40%,
            hsl(30deg 100% 54%) 50%,
            hsl(36deg 100% 52%) 60%,
            hsl(42deg 100% 51%) 70%,
            hsl(48deg 100% 50%) 80%,
            hsl(54deg 100% 48%) 90%,
            hsl(60deg 100% 47%) 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#hour {
    background-image: linear-gradient(180deg,
            hsl(60deg 100% 47%) 0%,
            hsl(64deg 100% 49%) 10%,
            hsl(67deg 100% 51%) 20%,
            hsl(71deg 100% 53%) 30%,
            hsl(74deg 100% 55%) 40%,
            hsl(78deg 100% 56%) 50%,
            hsl(82deg 100% 58%) 60%,
            hsl(85deg 100% 60%) 70%,
            hsl(89deg 100% 62%) 80%,
            hsl(92deg 100% 64%) 90%,
            hsl(96deg 100% 66%) 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#min {
    background-image: linear-gradient(180deg,
            hsl(96deg 100% 66%) 0%,
            hsl(104deg 100% 63%) 10%,
            hsl(113deg 100% 61%) 20%,
            hsl(121deg 100% 59%) 30%,
            hsl(130deg 100% 57%) 40%,
            hsl(138deg 100% 55%) 50%,
            hsl(146deg 100% 52%) 60%,
            hsl(155deg 100% 50%) 70%,
            hsl(163deg 100% 48%) 80%,
            hsl(171deg 100% 45%) 90%,
            hsl(180deg 100% 43%) 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#sec {
    background-image: linear-gradient(180deg,
            hsl(180deg 100% 43%) 0%,
            hsl(187deg 100% 46%) 10%,
            hsl(195deg 100% 49%) 20%,
            hsl(202deg 100% 52%) 30%,
            hsl(209deg 100% 55%) 40%,
            hsl(217deg 100% 58%) 50%,
            hsl(224deg 100% 61%) 60%,
            hsl(231deg 100% 65%) 70%,
            hsl(239deg 100% 67%) 80%,
            hsl(246deg 100% 71%) 90%,
            hsl(253deg 100% 74%) 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 200% auto;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.button {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 120px;
    cursor: url("assets/cursor-02.svg") 20 20, auto;
    max-width: 100%;
}

.button a {
    cursor: url("assets/cursor-02.svg") 20 20, auto;
}

.button-class {
    align-items: center;
    background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
    border: 0;
    border-radius: 24px;
    box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
    box-sizing: border-box;
    color: #FFFFFF;
    display: flex;
    font-family: 'Gotham', serif;
    font-weight: bold;
    font-size: 36px;
    justify-content: center;
    line-height: 1em;
    max-width: 100%;
    min-width: 140px;
    padding: 24px;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    position: relative;
    text-align: center;
    align-self: center;
    cursor: url("assets/cursor-01.svg") 20 20, auto;
    width: 320px;
    margin-top: 20px;
    margin-left: 12px;
    margin-right: 12px;
    z-index: 2;
}

.button-class:active,
.button-class:hover {
    outline: 0;
    background-image: linear-gradient(144deg, #00DDEB, #5B42F3 50%, #AF40FF);
    cursor: url("assets/cursor-01.svg") 20 20, auto;
}

.text_div {
    position: relative;
    color: rgba(240, 240, 240, 0.7);
    font-size: 30px;
    margin-left: 100px;
    margin-right: 100px;
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
    margin-top: 80px;
    z-index: 2;
}

.sponsor-text {
    position: relative;
    display: flex;
    justify-content: center;
    color: #fff;
    width: 100%;
    font-size: 30px;
    font-family: 'Gotham';
    font-weight: 900;
    height: auto;
}


.sponsor {
    display: flex;
    justify-content: center;
    text-align: center;
    align-self: center;
    margin-bottom: 100px;
}

.sponsor-image {
    height: 120px;
    display: flex;
    border-radius: 36px;
    background: #ffffff88;
    padding: 36px;

}


.creds {
    font-size: 30px;
    color: rgb(137, 183, 126);
    text-align: center;
    font-family: 'Gotham';
    font-weight: 500;
    height: 80px;
}


@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Light.woff') format('woff'),
        url('fonts/Gotham-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-LightItalic.woff') format('woff'),
        url('fonts/Gotham-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('fonts/Gotham-Book.woff') format('woff'),
        url('fonts/Gotham-Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Book';
    src: url('fonts/Gotham-BookItalic.woff') format('woff'),
        url('fonts/Gotham-BookItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Medium.woff') format('woff'),
        url('fonts/Gotham-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-MediumItalic.woff') format('woff'),
        url('fonts/Gotham-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-BoldItalic.woff') format('woff'),
        url('fonts/Gotham-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Bold.woff') format('woff'),
        url('fonts/Gotham-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-Black.woff') format('woff'),
        url('fonts/Gotham-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('fonts/Gotham-BlackItalic.woff') format('woff'),
        url('fonts/Gotham-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}