html,
body {
    cursor: url('../img/cursor5.png'), default;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-family: "VT323", monospace;
    overflow: visible;
}

* {
    box-sizing: border-box;
    -webkit-user-select: none; /* Safari, Chrome, and newer versions of Edge */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard syntax */
    user-select: none; /* Standard syntax */
}

/*noinspection CssBrowserCompatibilityForProperties*/
.wrapcontainer {
    /* width: 100vw; */
    /* height: 100vh; */
    /* object-fit: cover; */
    /* position: absolute; */
    /* left: 0; */
    /* right: 0; */
    /* z-index: 0; */
    /* pointer-events: none; */

    width: 600px;
    height: 600px;
    margin-left: -300px;
    margin-top: -300px;
    top: 50%;
    left: 50%;
    position: absolute;

}

#particles-js {
    z-index: -3;
}

.particles-js-canvas-el {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    left: 0;
    right: 0;
    overflow: visible;
    background-size: cover;
    z-index: -3;
}

.musikbild {
    top: 0px;
    cursor: pointer;
    position: relative;
}

.bgvideo {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -5;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    overflow: visible;
    visibility: hidden;
}

#pattern,
#background {
    position: absolute;
    width: 100%;
    height: 100%;
}

#pattern {
    background: transparent url('../img/dot.png') repeat 0 0;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    opacity: 1;
}

.background {
    z-index: -3;
    width: 100%;
    height: 100%;
    position: absolute;
}


/**************************************
  font-size: ;
*************************************/
.font-size-14 {
    font-size: 14px;
}

.font-size-28 {
    font-size: 28px;
}

.text-animation-phrases h2 {
    font-size: 40px;
}

/**************************************
  font-weight: ;
*************************************/

.text-animation-phrases h2 {
    font-weight: 200;
}

/**************************************
  letter-spacing: ;
*************************************/

.main-paragraph {
    letter-spacing: 2px;
}

/**************************************
  line-height: ;
*************************************/

body,
html {
}

/**************************************
  text-align: ;
*************************************/
/*noinspection CssUnusedSymbol*/
#main,
.subscribe-email-label,
.rest-button,
.rest-button1,
#counter-area,
#counter,
#contact,
.contact-details-icon-container,
.contact-details-text {
    text-align: center;
}

#main,
#counter-area {
    pointer-events: all;
}

#main {
    width: 100%;
    height: 100%;
}

/**************************************
  text-transform: ;
*************************************/

.text-effect,
.main-paragraph {
    text-transform: uppercase;
}

/**************************************
  color: ;
*************************************/
/*noinspection CssConvertColorToRgbInspection,CssUnusedSymbol*/
#main,
#contact,
.social,
.cd-email a:hover,
.contact-details-text,
a.contact-details-text,
.rest-button,
.rest-button1,
.rest-button:hover,
.rest-button1:hover {
    color: #fff;
}


/*noinspection CssConvertColorToRgbInspection*/
.divider:after,
.divider:before {
    color: #428bca;
}

/**************************************
  background-color: ;
*************************************/

.switch-button-1,
.switch-button-3 {
    background-color: rgba(44, 44, 44, 0.52);
}

/**************************************
  background: ;
*************************************/

/*noinspection CssConvertColorToRgbInspection*/
.layer1 {
    background: linear-gradient(to right, transparent, #d3ae37, transparent);
}

/*noinspection CssConvertColorToRgbInspection*/
.layer2 {
    background: linear-gradient(transparent, #d3ae37, transparent);
}

/*noinspection CssConvertColorToRgbInspection*/
.layer3 {
    background: linear-gradient(transparent, #d3ae37, transparent);
}

/*noinspection CssConvertColorToRgbInspection*/
.layer4 {
    background: linear-gradient(to right, transparent, #d3ae37, transparent);
}

/*noinspection CssConvertColorToRgbInspection*/
.divider {
    background: #ddd;
}

/*noinspection CssConvertColorToRgbInspection*/
.divider:after,
.divider:before {
    background: #fff;
}

/**************************************
  border: ;
*************************************/

/*noinspection CssConvertColorToRgbInspection*/
.divider:after {
    border: 1px solid #f0f0f0;
}

/*noinspection CssConvertColorToRgbInspection*/
.divider:before {
    border: 1px solid #f0f0f0;
}

/******************************************************************
    BOX LAYER
******************************************************************/
/*noinspection CssConvertColorToRgbInspection*/

.box-object {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    background-color: rgb(24, 24, 24) !important;
    transition: all 2s, visibility 0s;
    z-index: -2;
    transform: rotateZ(-180deg);
}

/*noinspection CssConvertColorToRgbInspection*/
.box-object .box-object-inner-border {
    width: 90%;
    height: 90%;
    top: 5%;
    left: 5%;
    background-repeat: no-repeat;
    position: absolute;
    background-image: linear-gradient(#fff, #fff),
    linear-gradient(to right, #fff, #fff),
    linear-gradient(to bottom, #fff, #fff), linear-gradient(to left, #fff, #fff),
    linear-gradient(transparent, transparent);
    background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
    calc(100% - 8px) calc(100% - 8px);
    background-position: left top, left bottom, right bottom, right top, 1px 1px;
    background-color: rgb(24 24 24 / 85%) !important
}

.box-object .border-animation {
    animation: border_animation 9s ease-out forwards;
}

@keyframes border_animation {
    0% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left top, left bottom, right bottom, right top, 1px 1px;
    }
    33% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left bottom, right bottom, right top, left top, 1px 1px;
    }
    65% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left bottom, left bottom, right top, right top, 1px 1px;
    }
    100% {
        background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left bottom, left bottom, right top, right top, 1px 1px;
    }
}

.box-object .border-animation-2 {
    animation: border_animation_2 2s ease-out forwards;
}

@keyframes border_animation_2 {
    0% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left top, left bottom, right bottom, right top, 1px 1px;
    }
    100% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left bottom, right bottom, right top, left top, 1px 1px;
    }
}

.box-object .border-animation-3 {
    animation: border_animation_3 2s ease-out forwards;
}

@keyframes border_animation_3 {
    0% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left bottom, right bottom, right top, left top, 1px 1px;
    }
    100% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left top, left bottom, right bottom, right top, 1px 1px;
    }
}

.box-object .border-animation-4 {
    animation: border_animation_4 3s ease-out forwards;
}

@keyframes border_animation_4 {
    0% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left top, left bottom, right bottom, right top, 1px 1px;
    }
    50% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left bottom, right bottom, right top, left top, 1px 1px;
    }
    100% {
        background-size: 1px 50%, 50% 1px, 1px 50%, 50% 1px,
        calc(100% - 8px) calc(100% - 8px);
        background-position: left bottom, left bottom, right top, right top, 1px 1px;
    }
}

@keyframes show {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.box-to-romb {
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin-left: -250px;
    margin-top: -250px;
    background-color: rgba(25, 25, 25, 0.95) !important;
    transform: rotateZ(-45deg);
}

.box-to-romb2 {
    width: min(50vw, 50vh); /* Scale based on the smaller of viewport width or height */
    height: min(50vw, 50vh); /* Scale based on the smaller of viewport width or height */
    margin-left: -250px;
    margin-top: -250px;
    transform: rotateZ(0deg); /* Center the element and rotate */
    background-color: rgb(25 25 25 / 75%) !important;
}

.hide-effect {
    display: none !important;
    transition: 1s;
}

.show-effect {
    animation: show 3s linear;
}

/******************************************************************
    TEXT ANIMATION
******************************************************************/
.text-animation-phrases h2 {
    width: 100%;
    overflow: visible;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    /* position: absolute; */
    top: 0;
    left: 0;
    letter-spacing: 14px;
    text-align: center;
    line-height: 0px;
}

/*noinspection CssBrowserCompatibilityForProperties*/
.text-animation-phrases h2,
.text-animation-phrases h2 > span {
    height: 100%;
    /* Centering with flexbox */
    display: flex;
    flex-direction: row;
    box-pack: center;
    justify-content: center;
    flex-pack: center;
    align-items: center;
    flex-align: center;
    align-items: center;
}

.text-animation-phrases h2 > span {
    margin: 0 15px;
}

.text-animation-phrases h2 > span > span {
    display: inline-block;
    perspective: 1000px;
    transform-origin: 50% 50%;
}

.text-animation-phrases h2 > span > span > span {
    display: inline-block;
    color: transparent;
    transform-style: preserve-3d;
    /*noinspection CssBrowserCompatibilityForProperties*/
    transform: translate3d(0, 0, 0);
    /*animation: OpeningSequence 3s linear forwards;*/
    animation: none;
}

.text-animation-phrases.start h2 > span > span > span {
    animation: OpeningSequence 3s linear forwards;
}

@keyframes OpeningSequence {
    /*noinspection CssConvertColorToRgbInspection*/
    0% {
        text-shadow: 0 0 50px #fff;
        letter-spacing: 80px;
        opacity: 0;
        transform: rotateY(-90deg);
    }
    /*noinspection CssConvertColorToRgbInspection*/
    50% {
        text-shadow: 0 0 1px #fff;
        letter-spacing: 14px;
        opacity: 0.8;
        transform: rotateY(0deg);
    }
    /*noinspection CssConvertColorToRgbInspection*/
    85% {
        text-shadow: 0 0 1px #fff;
        opacity: 0.8;
        transform: rotateY(0deg) translateZ(100px);
    }
    /*noinspection CssConvertColorToRgbInspection*/
    100% {
        text-shadow: 0 0 10px #fff;
        opacity: 0;
        transform: translateZ(130px);
        pointer-events: none;
    }
}

@keyframes FadeIn {
    /*noinspection CssConvertColorToRgbInspection*/
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    /*noinspection CssConvertColorToRgbInspection*/
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

@keyframes FadeIn {
    /*noinspection CssConvertColorToRgbInspection*/
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    /*noinspection CssConvertColorToRgbInspection*/
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

@keyframes FadeIn {
    /*noinspection CssConvertColorToRgbInspection*/
    0% {
        opacity: 0;
        text-shadow: 0 0 50px #fff;
    }
    /*noinspection CssConvertColorToRgbInspection*/
    100% {
        opacity: 0.8;
        text-shadow: 0 0 1px #fff;
    }
}

/******************************************************************
    CONTENT
******************************************************************/
/**************************************
  VERTICAL ALIGN
**************************************/
.wrapper {
    position: relative;
    /* height: 100vh; */
    /* margin: 0 auto; */
    width: 100%;
    height: 100%;
}

.wrapper,
.logo,
.text-effect,
.main-paragraph,
.subscribe-form,
.switch-button-1,
.switch-button-3,
#counter,
.contact-details,
.contact-details-icon-container {
    /* display: table; */
    z-index: 0;
}

.vcenter {
    /* vertical-align: middle; */
    /* display: table-cell; */
    width: 100%;
    height: 100%;
}

/*noinspection CssUnusedSymbol*/
#main,
.logo,
.text-effect,
.main-paragraph,
#counter-area,
#counter,
.countdown,
.counter-line,
.social,
#contact,
.contact-details,
.contact-details-icon-container,
.contact-details-text {
    margin: 0 auto;
}

/**************************************
  DIVIDER
**************************************/
.divider {
    position: relative;
    width: 0;
    height: 1px;
    margin: 30px auto;
    transition: 2s;
}

.divider:after,
.divider:before {
    content: " ";
    width: 20px;
    height: 20px;
    position: absolute;
    background: rgba(109, 109, 109, 0.65);
    transform: rotate(45deg);
}

.divider:after {
    left: -23px;
    margin-top: -9px;
}

.divider:before {
    left: 100%;
    margin-top: -9px;
    margin-left: 2px;
}

/*noinspection CssUnusedSymbol*/
.divider-effect {
    width: 90%;
    transition: 2s;
}

/**************************************
  MAIN SECTION
**************************************/
body,
html {
    overflow: visible;
}

/** LOGO
**************************************/
.logo {
    position: relative;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding-bottom: 15px;
    padding-top: 35px;
}


/** MAIN H2
**************************************/
.text-effect {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    z-index: 0;
    opacity: 0;
    animation: show_text_effect 0.5s linear 1s forwards;
}

@keyframes show_text_effect {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.text-effect .text-animation-phrases {
    /* position: relative; */
    /* width: 100vw; */
    left: 0;
    z-index: 31;
    padding: 40px;
    top: 0;
    bottom: 0;
}

/** PARAGRAPH
**************************************/
.main-paragraph {
    position: relative;
    top: 70px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/** SUBSCRIBE FORM
**************************************/
.subscribe-form {
    position: relative;
    top: 0px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/** SWITCHING SECTIONS BUTTONS
**************************************/
.switch-button-1
{
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    cursor: pointer;
    transition: 0.5s;
    top: 0px;
}

.switch-button-3 {
    position: fixed;
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin: 0 auto;
    cursor: pointer;
    transition: 0.5s;
    bottom: 10%;
    left: calc(50% - 25px);
}

.switch-button-1 .vcenter,
.switch-button-3 .vcenter {
    transform: rotate(-45deg);
}

.switch-button-1 .layer1,
.switch-button-1 .layer2,
.switch-button-1 .layer3,
.switch-button-1 .layer4,
.switch-button-3 .layer1,
.switch-button-3 .layer2,
.switch-button-3 .layer3,
.switch-button-3 .layer4 {
    margin: 0 auto;
    line-height: 50px;
    position: absolute;
    content: "";
}

.switch-button-1 .layer1,
.switch-button-3 .layer1
{
    top: 0;
    left: 0;
    right: auto;
    width: 50px;
    height: 1px;
    z-index: -1;
    animation: impuls1 2s linear infinite;
}

@keyframes impuls1 {
    0% {
        width: 0;
        height: 1px;
    }
    10% {
        width: 50px;
        left: 0;
        right: auto;
    }
    10.9% {
        width: 50px;
        right: 0;
        left: auto;
    }
    20% {
        width: 0;
    }
    100% {
        width: 0;
        right: 0;
        left: auto;
    }
}

.switch-button-1 .layer2,
.switch-button-3 .layer2 {
    top: 0;
    left: 0;
    right: auto;
    width: 1px;
    height: 50px;
    z-index: -1;
    animation: impuls2 2s linear infinite;
}

@keyframes impuls2 {
    0% {
        height: 0;
        width: 1px;
    }
    10% {
        height: 50px;
        top: 0;
        bottom: auto;
    }
    10.9% {
        height: 50px;
        bottom: 0;
        top: auto;
    }
    20% {
        height: 0;
    }
    100% {
        height: 0;
        bottom: 0;
        top: auto;
    }
}

.switch-button-1 .layer3,
.switch-button-3 .layer3 {
    top: 0;
    left: auto;
    right: 0;
    width: 0;
    height: 50px;
    z-index: -1;
    animation: impuls2 2s 0.3s linear infinite;
}

@keyframes impuls2 {
    0% {
        height: 0;
        width: 1px;
    }
    10% {
        height: 50px;
        top: 0;
        bottom: auto;
    }
    10.9% {
        height: 50px;
        bottom: 0;
        top: auto;
    }
    20% {
        height: 0;
    }
    100% {
        height: 0;
        bottom: 0;
        top: auto;
    }
}

.switch-button-1 .layer4,
.switch-button-3 .layer4 {
    bottom: 0;
    left: 0;
    right: auto;
    width: 50px;
    height: 0;
    z-index: -1;
    animation: impuls1 2s 0.3s linear infinite;
}

@keyframes impuls1 {
    0% {
        width: 0;
        height: 1px;
    }
    10% {
        width: 50px;
        left: 0;
        right: auto;
    }
    10.9% {
        width: 50px;
        right: 0;
        left: auto;
    }
    20% {
        width: 0;
    }
    100% {
        width: 0;
        right: 0;
        left: auto;
    }
}

.switch-button-1 {
    transform: rotate(45deg);
    position: relative;
    top: 110px;
    left: 0px;
    right: 0;
    bottom: 0;
    margin: auto;
}

.switch-button-3 {
    transform: rotate(-135deg);
}

.switch-button-3 i {
    transform: rotate(180deg);
}

/**************************************
  COUNTER AREA SECTION
**************************************/
/*noinspection CssConvertColorToRgbInspection*/
#counter-area {
    width: 100%;
    height: 100%;
    color: #ffffff;
    /** COUNTER
    **************************************/
    /** SOCIAL ICONS
    **************************************/
}
/*noinspection CssConvertColorToRgbInspection*/

/**************************************
  CONTACT SECTION
**************************************/
#contact {
    display: none;
    width: 100%;
    color: #ffffff;
}


#contact.show-effect {
    display: block !important;
}

.box-object {
    animation: glow 1s ease-in-out infinite alternate;
}

.musikbild{
    border-radius: 50%;
    animation: glowicon 1s ease-in-out infinite alternate;
}

.musikbild:hover{
    border-radius: 50%;
    animation: glowiconactive 1s ease-in-out infinite alternate;
}

.switch-button-1{
    animation: glowicon 1s ease-in-out infinite alternate;
}

.switch-button-1:hover{
    animation: glowiconactive 1s ease-in-out infinite alternate;
}

.switch-button-3{
    animation: glowicon 1s ease-in-out infinite alternate;
}

.switch-button-3:hover{
    animation: glowiconactive 1s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.35), 0 0 5px 5px rgba(0, 42, 255, 0.35), 0 0 10px 10px rgba(0, 42, 255, 0.2);
    }
    to {
        box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.6), 0 0 10px 10px rgba(0, 187, 255, 0.5), 0 0 20px 20px rgba(0, 187, 255, 0.4);
    }
}

@keyframes glowicon {
    from {
        box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.2), 0 0 5px 5px rgba(0, 51, 255, 0.02), 0 0 8px 8px rgba(0, 13, 255, 0.2);
    }
    to {
        box-shadow: 0 0 5px 5px rgba(255, 255, 255, 0.4), 0 0 8px 8px rgba(0, 166, 255, 0.35), 0 0 11px 11px rgba(0, 187, 255, 0.3);
    }
}


@keyframes glowiconactive {
    from {
        box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.2), 0 0 3px 3px rgba(0, 255, 102, 0.2), 0 0 4px 4px rgba(0, 255, 21, 0.2);
    }
    to {
        box-shadow: 0 0 4px 4px rgba(255, 255, 255, 0.4), 0 0 5px 5px rgba(0, 255, 72, 0.35), 0 0 6px 6px rgba(0, 255, 42, 0.3);
    }
}

.explosion {
    position: absolute;
    width: 600px;
    height: 600px;
    pointer-events: none;
}

/*noinspection ALL,CssUnusedSymbol*/
.explosion .particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: pop 0.5s reverse forwards;
}

@keyframes pop {
    from {
        opacity: 0;
    }
    to {
        top: 50%;
        left: 50%;
        opacity: 1;
    }
}

iframe{
    animation: glowicon 1s ease-in-out infinite alternate;
    visibility: hidden;
    transition: all 1.5s ease-in-out;
    z-index: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    opacity: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.FPS {
    font-size: 24px;
    position: absolute;
    display: block;
    visibility: visible;
    top: 50%;
    left: calc(50% - 125px);
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    animation: pulsate2 1s ease-in-out infinite;
}

.background-image {
    z-index: -10;
    position: absolute;
}

.tooltip {
    background-color: rgba(0, 0, 0, 0.95);
    visibility: hidden;
    color: white;
    height: 460px;
    left: 50%;
    padding: 30px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    z-index: 10;
    border-radius: 10px;
    box-shadow: 0px 0px 20px 3px rgb(242 255 0);
}


.tooltip p {
    margin: 0;
    text-align: center;
    margin-bottom: 30px;
}

.tooltip button {
    position: relative;
    background-color: white;
    border: none;
    color: black;
    cursor: pointer;
    float: right;
    font-size: 16px;
    margin: 0;
    padding: 12px 24px;
    right: 75px;
    box-shadow: 0px 0px 1px 3px rgb(0 105 255);
}


@keyframes pulsate2 {
    0% {
        box-shadow: 0 0 0 rgba(255, 0, 0, 0);
    }
    50% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    }
    100% {
        box-shadow: 0 0 0 rgba(255, 0, 0, 0);
    }
}

#cursor {
    position: absolute;
    width: 30px;
    height: 30px;
    background-image: url(assets/img/cursor5.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    z-index: 10000;
}

.hexagon-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.hexagon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vmax;
    height: 100vmax;
    background-color: #ff6b6b; /* Set your desired background color here */
    clip-path: polygon(
            50% 0%,
            90% 25%,
            90% 75%,
            50% 100%,
            10% 75%,
            10% 25%
    );
}

#bgcanvas {
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    filter: brightness(1.2) contrast(1.2);
    z-index: -4;
    transition: all 2s, visibility 0s;
    opacity: 1;
}

#renderer {
    position: absolute;
    filter: brightness(1.2) contrast(1.2);
    z-index: -3;
}


















#intro {
    color: white;
    font-family: "VT323", monospace;
}

[class*=btn-glitch-fill] {
    position: relative;
    top: 270px;
    display: inline-block;
    font-family: "VT323", monospace;
    border: 1px solid #04ff00;
    color: white;
    padding: 10px 13px;
    min-width: 175px;
    line-height: 1.5em;
    white-space: nowrap;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0px 0px 6px 3px rgb(0 255 64 / 50%);
}
[class*=btn-glitch-] .text,
[class*=btn-glitch-] .decoration {
    display: inline-block;
}
[class*=btn-glitch-] .decoration {
    display: inline-block;
    float: right;
}
[class*=btn-glitch-]:hover, [class*=btn-glitch-]:focus {
    animation: glitch 0.25s , glowiconactive 1s ease-in-out infinite alternate;
    background-color: #ffffff;
    color: black;
    border: 1px solid #00eaff;
}
[class*=btn-glitch-]:hover .text-decoration, [class*=btn-glitch-]:focus .text-decoration {
    animation: blink;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
[class*=btn-glitch-]:hover .decoration, [class*=btn-glitch-]:focus .decoration {
    animation: blink;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
[class*=btn-glitch-]:hover :after, [class*=btn-glitch-]:focus :after {
    animation: shrink;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    content: " ";
    width: 75%;
    border: 1px solid black;
    position: absolute;
    left: 0;
    bottom: 5px;
}
[class*=btn-glitch-]:active {
    background: none;
    color: #00f7ff;
}
[class*=btn-glitch-]:active .text-decoration {
    animation: none;
}
[class*=btn-glitch-]:active .decoration {
    animation: none;
}
[class*=btn-glitch-]:active :before,
[class*=btn-glitch-]:active :after {
    display: none;
}

@keyframes glitch {
    25% {
        background-color: rgba(255, 0, 0, 0.47);
        /*transform: translateX(-10px);*/
        letter-spacing: 5px;
    }
    35% {
        background-color: rgba(99, 255, 0, 0.48);
        /*transform: translate(10px);*/
    }
    60% {
        background-color: rgba(0, 70, 255, 0.5);
        /*transform: translate(-10px);*/
        filter: blur(5px);
    }
    100% {
        background-color: rgba(183, 0, 255, 0.46);
    }
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}
@keyframes shrink {
    100% {
        width: 10%;
    }
}
body {
    background-color: #060606;
}


[class*=btn-glitch-back] {
    position: fixed;
    bottom: 32px;
    left: calc(50% - 144px);
    display: inline-block;
    font-family: "VT323", monospace;
    border: 1px solid #04ff00;
    color: white;
    padding: 10px 13px;
    min-width: 175px;
    line-height: 1.5em;
    white-space: nowrap;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0px 0px 6px 3px rgb(0 255 64 / 50%);
    background-color: #0000009e;
}

















:root{
    --background-color: #181F2A;
    --border-color: rgba(0, 234, 255, 0.6);
    --low-circle-color: rgba(194, 0, 0, 0.55);
    --medium-circle-color: rgba(192, 131, 0, 0.55);
    --high-circle-color: rgba(0, 163, 168, 0.65);
}


.plane-block{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 200px;
}

#plate{
    width: 50px;
    height: 50px;
    background: url('../img/musikan.png');
    background-size: cover;
    background-position: center;
    border: 3px solid var(--border-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: spinPlate 30s linear infinite;
    animation-play-state: paused;
    box-shadow: 0px 0px 6px 3px rgb(0 70 255);
    background-color: black;
}

#plate:hover {
    animation: glowiconactive 1s ease-in-out infinite alternate;
}

.circle{
    position: absolute;
    min-height: 50px;
    max-height: 100px;
    min-width: 50px;
    max-width: 100px;
    aspect-ratio: 1;
    border-radius: 50%;
    z-index: -1;
    transition: border-radius .3s;
    border: 1px solid #c9c9c9
}

.circle:nth-child(1){
    height: 50px;
    background-color:  var(--low-circle-color);
}

.circle:nth-child(2){
    height: 50px;
    background-color: var(--medium-circle-color);
}


.circle:nth-child(3){
    height: 50px;
    background-color: var(--high-circle-color);
}

#plate:hover{
    cursor: pointer;
}

@keyframes spinPlate {
    to{
        transform: rotate(360deg);
    }
}






.overlay-message {
    position: fixed;
    bottom: -100px; /* Initial position off-screen */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Set the width to 80% of the screen */
    max-width: 400px; /* Add a maximum width to avoid excessive width on larger screens */
    height: 60px;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: bottom 0.5s ease, opacity 0.5s ease;
    opacity: 0; /* Initial opacity */
    border: 1px solid rgb(0 161 255);
}

.message-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.song-name {
    font-size: 18px;
    color: white;
    white-space: nowrap;
}


.loading-gif {
    scale: 0;
    opacity: 0;
    width: 300px;
    top: calc(50% - 150px);
    left: calc(50% - 150px);
    position: fixed;
    z-index: 9999;
    display: block;
    visibility: hidden;
    transition: all 0.5s ease-in-out;
}

.loading-gif-active {
    visibility: visible;
    scale: 1;
    opacity: 1;
    transition: all 1.5s ease-in-out;
}