@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&display=swap');

/* Variables  */


:root {
    --h1:  clamp(1.8rem, 3vw + 1rem, 3rem);  /* ~29px to 48px */
    --h2:  clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);  /* ~24px to 36px */
    --h3:  clamp(1.25rem, 2vw + 0.25rem, 1.75rem);  /* ~20px to 28px */
    --h4:  clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);  /* ~18px to 24px */
    --h5:  clamp(1rem, 1.2vw + 0.2rem, 1.25rem);  /* ~16px to 20px */
    --h6:  clamp(0.875rem, 1vw + 0.2rem, 1rem);  /* ~14px to 16px */
    --p:   clamp(1rem, 1.2vw + 0.5rem, 1.25rem);  /* ~16px to 20px */

}






body {
    background: rgb(0, 252, 252);
    background: radial-gradient(circle, rgb(0, 159, 255) 0%, rgb(0, 40, 99) 100%);
    font-family: 'Orbitron', sans-serif;
}

#Image_Container {
    border: 3px solid aqua;
    padding: 15px;
    margin-left: 20px;
    margin-bottom: 10px;

}

#Image_Container img {
    max-width: 30%;
    margin-right: 5px;
}

#Image_Container .flexbox {
    display: flex;
    flex-wrap: wrap;
}


footer{
    font-family: 'Orbitron', sans-serif;
    background-color: black;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: #ffffff;
    z-index: 1000;
}

a {
    color: aqua;
    text-decoration: none;
}

a:hover {
    color: white;
}

h1{
    font-family: 'Orbitron', sans-serif;
    color:white;
    font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
    line-height: 1.2;
    font-weight: 700;
}

h2{
    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);  /* ~24px to 36px */
    font-family: 'Orbitron', sans-serif;
    color:white;
}

h3{

    font-size: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);  /* ~20px to 28px */
    font-family: 'Orbitron', sans-serif;
    margin-top: -10px;
    color: aqua;
}

h4{

    font-size: clamp(1.125rem, 1.5vw + 0.25rem, 1.5rem);  /* ~18px to 24px */
    font-family: 'Orbitron', sans-serif;
    color: white;
}

h5 {
    font-size: clamp(1rem, 1.2vw + 0.2rem, 1.25rem);  /* ~16px to 20px */
    line-height: 1.4;
    font-weight: 500;
    color:white;
}

h6 {
    font-size: clamp(0.875rem, 1vw + 0.2rem, 1rem);  /* ~14px to 16px */
    line-height: 1.5;
    font-weight: 500;
    color:white;
}


p{
    color:white;
    font-family: Verdana, sans-serif;

    font-size: clamp(1rem, 1.2vw + 0.5rem, 1.25rem);  /* ~16px to 20px */
    line-height: 1.6;
}


details{
    font-family: 'Orbitron', sans-serif;
    color: white;
    margin: 10px;
}

details[open] > summary {
    border: white solid 3px;
}



details[close] {
    margin-bottom: 1rem;
}


details[open] .FAQ_text {
    margin-top: 0;
    display: block;
    width: 100%;
    background-color: black; /* optional for visual */
    padding: 1rem; /* optional for better spacing */
    box-sizing: border-box;
}


/* Classes */
/* Classes */
/* Classes */
/* Classes */
/* Classes */
/* Classes */

.left-text{
    text-align: left;
}
.right-text{
    text-align: right;
}


.currentpage{
    color: aqua;
}



.hiddeninput{
    padding: 0;
    margin: 0;
    font-size: 1px;
    max-height: 0;
    display:none;
}


.Sonar_Table{
    width: 100%;
}
.Sonar_Table td{
    padding-left: 5px;
}



.Account_Taps{
    font-family: 'Orbitron', sans-serif;
    margin-left: -10px;
}


.center_text{
    text-align: center;
    z-index: 900;
}

.F_container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 10px;
    margin: 0 auto;
    list-style: none;
    max-width: 100%;
}

.F_block {
    flex: 1 1 30%;
    margin: 5px;
    text-align: center;
    font-weight: bold;
    line-height: 1.5;
    width: 100%;
}

.F_Text{
    font-weight: bold;
    line-height: 1.5;
}

/* Ensure icons don't overflow */
.F_icon {
    width: 30px;
    height: 30px;
    margin: 5px;
}

.F_TextElement{
    margin-top: 10px;
}

/* Responsive adjustments for smaller screens */
@media screen and (max-width: 768px) {
    .F_container {
        flex-direction: column;
        align-items: center;
    }

    .F_block {
        width: 100%;
        margin: 10px 0;
    }

    .F_icon {
        width: 30px;
        height: 30px;
        margin: 5px;

    }

    .F_TextElement{
        margin-top: -10px;
    }
}

@media screen and (max-width: 768px) and (max-height: 500px) {
    .F_icon {
        display: none;
    }
}



.I_container {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.I_container_center{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 5px;
    border: aqua solid 3px;
    width: 80%;
    margin: 0 auto;
}

.FAQ_Summery {
    font-family: 'Orbitron', sans-serif;
    color: white;
    font-weight: bold;
    min-width:220px;
    padding-top: 5px;
    min-height: 35px;
    background: black;
}
.FAQ_Summery:hover{
    border: aqua solid 3px;
}


.image_C_box{
    max-width: min(30%, 400px);
    min-width: min(30%, 400px);
    max-height: 300px;
    width:auto;
    height: auto;
    filter: drop-shadow(7px 7px 7px rgba(0,0,0,0.5));

}

.image_C{
    max-width: 120%;
    min-width: 20%;
    height: auto;


    margin-top: auto;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: auto;
drop-shadow(5px 5px);
}

.hoverlink{
    color: aqua;
    margin: 5px;
}
.hoverlink:hover{
    color:white;
}


.I_T_container {
    display: flex;
    flex-flow: column wrap;
    justify-content: start;
    list-style: none;
    margin: 10px;
}

.T_block{
    padding: 3px 10px;
    height: 65px;

    font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.25rem);
    line-height: 1.3;
    font-weight: 600;

    text-align: left;
    border: 3px aqua solid;
    color: white;
    background-color: black;
    background-image: radial-gradient(rgb(0, 102, 255) 1px, black 1px);
    background-size: 30px 30px;
    animation: background 300s linear infinite;
}

.T_block:hover {
    color: aqua;
}


.C_block {
    padding: 10px;
    width: auto;
    height: auto;

    font-weight: bold;

    line-height: 1.2;
    font-size: var(--h4);
    text-align: center;


    border: 3px aqua solid;
    color: white;
    background-color: black;
    background-image: radial-gradient(rgb(0, 102, 255) 1px, black 1px);
    background-size: 30px 30px;
    animation: background 300s linear infinite;
}


.C_block:hover {
    color: aqua;
}





@keyframes background {
    0% {
        background-position: -300% 100%;
    }
    100% {
        background-position: 100% -300%;
    }
}


span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

.form_design{
    font-family: 'Orbitron', sans-serif;
    color:white;

    font-size: var(--p);
    line-height: 1.6;
    text-align: center;
}



.button {
    background-color: black;
    border: 2px aqua solid;
    color: white;
    font-family: 'Orbitron', sans-serif;

    font-size: var(--h4);
    line-height: 1.6;

    padding: 3px 10px;
}

.button:hover {
    background-color: aqua;
    border: 2px aqua solid;
    color: black;
}

mainimg::before{
    content:  url( "/MagictwinsWorld/files/img/OrbitoFace.WebP");
}

mainimg_blue::before{
    content:  url( "/MagictwinsWorld/files/img/OrbitoFace_Blue.WebP");
}



.mainimg {
    position: fixed;
    bottom: clamp(10px, 5vw, 30px);
    left: 0; /* Aligns the image to the left */
    width: min(30%,500px); /* Span the container width */
    height: 813px; /* Keep a fixed height (can also be made responsive) */
    background-repeat: no-repeat;
    background-image: url("/MagictwinsWorld/files/img/OrbitoFace.WebP");
    background-size: contain; /* or "cover" depending on desired scaling */
    background-position: bottom left;
    z-index: -1;
}



.mainimg_blue{
    background-image: url( "/MagictwinsWorld/files/img/OrbitoFace_Blue.WebP");
}

.mainimg_blue:hover {
    background-image: url( "/MagictwinsWorld/files/img/OrbitoFaceBlush.WebP");
}



@media screen and (max-width: 975px) {
    .mainimg {
        bottom: clamp(95px, 5vw, 30px);
    }
}

@media screen and (max-width: 768px) {
    .mainimg {
        bottom: clamp(133px, 5vw, 30px);
    }
}


@media screen and (max-width: 768px) and (max-height: 500px) {
    .mainimg {
        display: none;
    }
}



.mainimg:hover {
    background-image: url( "/MagictwinsWorld/files/img/OrbitoFaceBlush.WebP");
}




#menuToggle
{
    display: block;
    position: relative;
    top: 50px;
    left: 0px;

    z-index: 1001;




    -webkit-user-select: none;
    user-select: none;
}

#menuToggle a
{
    font-family: 'Orbitron', sans-serif;
    text-decoration: none;
    color: white;
    transition: color 0.3s ease;
}

#menuToggle a:hover
{
    color: aqua;
}


#menuToggle input
{
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;

    cursor: pointer;

    opacity: 0; /* hide this */
    z-index: 1002; /* and place it over the hamburger */

    -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    left: 15px;
    background: white;
    border-radius: 5px;

    z-index: 1001;

    transform-origin: 4px 0px;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
}

#menuToggle span:first-child
{
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: white;
    left: 15px;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
    transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{

    border: 5px white solid;


    position: absolute;
    min-width: 300px;
    margin: -100px 0 0 -50px;
    left: 10px;
    padding: 125px 50px 50px;
    font-family: 'Orbitron', sans-serif;
    background: black;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    /* to stop flickering of text in safari */

    transform-origin: 0% 0%;
    transform: translate(-100%, 0);

    z-index: 1000;

    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
    font-family: 'Orbitron', sans-serif;
    padding: 10px 0;
    font-size: var(--h4);
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
    transform: none;
}


.text_block {
    color: white;
    font-family: Verdana, sans-serif;
    width: 80%;
    margin: 0 auto;

    font-size: var(--p);
    line-height: 1.6;

}

.image_box {
    width: 35%;
    margin: 0 auto;
}



label,option,select{
    font-family: 'Orbitron', sans-serif;
}
.input_form{
    min-width: 20%;
}

.input_locked{
    color:gray;
    font-weight: bold;

}

.form_sonar{
    font-family: 'Orbitron', sans-serif;
    background-color: black;
    padding: 10px;
    border: 5px aqua solid;
}

table, th, td {
    border:2px solid aqua;
    background-color: black;
    border-collapse: collapse;
}
table{
    border:5px solid aqua;
}
.error_text{
    color:red;
}


.text_box{
    font-family: 'Orbitron', sans-serif;
    color: white;
    border:2px solid aqua;
    background-color: black;
    border-collapse: collapse;
    width: 80%;
    margin: 0 auto;
}



.progress-container {
    width: 100%;
    background-color: #ddd;
    border-radius: 8px;
    overflow: hidden;
    height: 30px;
    margin-top: 10px;
}

.progress-bar {
    height: 100%;
    background-color: aqua;
    text-align: center;
    line-height: 30px;
    color: black;
    font-weight: bold;
    transition: width 0.3s;
}

.twitch-streams {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}



.warning-message{
    color: white;

    background: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            orange 10px,
            orange 20px
    ),
    linear-gradient(
            to bottom,
            black,
            black
    );
    font-size: var(--h3);
    text-shadow:
            3px 3px 0 #000,
            -3px 3px 0 #000,
            -3px -3px 0 #000,
            3px -3px 0 #000;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    padding: 5px;
}

hr {
    padding: 0px;
    margin: -1em;
    border-top: 3px solid white;
}

.Input_Field{
    width: max(250px,25%);
    box-sizing: border-box;
    margin-right: -5px;

    cursor: text;

    background-color: white;
    border: 2px aqua solid;
    color: black;
    font-family: Verdana, sans-serif;
    line-height: 1.6;

    padding: 3px 1px;
    font-size: var(--h5);
    line-height: 1.6;
}

.impressum{
    color:white;
    background-color: black;
    border: 2px aqua solid;
    padding: 50px;
    padding-top: 5px;
    margin-left: 50px;
    margin-right: 50px;
    max-width: 2000px;
    text-align: left;

}

@media screen and (max-width: 975px) {
    .impressum {
        margin-left: 5px;
        margin-right: 5px;
    }
}



.video_holder{
    border: 5px solid aqua;
    width: clamp(200px,70%,800px);
    max-width: 800px;
    height: auto;
    margin: auto;
    background-color: black;
}
.video{
    width: 100%;
}




.animated-rainbow {
    background: linear-gradient(to left, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2a, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d5ff, #0af, #0080ff, #05f, #002aff, #00f, #2b00ff, #50f, #8000ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
    animation: rainbow-move-left-right 5s linear infinite alternate;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@keyframes rainbow-move-left-right {
    0% {background-position: 0 0    }
    100% {background-position: -500px 0}
}