body {
    background-color: #0c0c14; 
    color: #ffffff; /* Weiße Schriftfarbe, um Lesbarkeit sicherzustellen */
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar{
    width: 0.7em;
}
::-webkit-scrollbar-track {
    background: rgb(50, 77, 99);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: rgb(86, 133, 172);
    border-radius: 10px;
    
}


  



.container3 {
    position: fixed;
    background-color: #2a2935;
    width: 200px;
    height: 40px;
    top: 4%;
    left: 50%; 
    transform: translate(-50%, -50%);
    margin: 50px auto;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    box-shadow: 0px 0px 8px  rgb(0, 0, 0);
    align-items: center;
    z-index: 4;
}
.hotbar-buttons{
    position:relative;
    background-color:#3a3a4a;
    width: 45%;
    height: 100%;
    border-radius: 8px;
    color: rgb(71, 110, 141) ;
    border: #ffffff;
    font-size: 17px;
    z-index: 4;
}
.button1 {
    right: -3.5%;
    background-color: #a7a7a7;
    text-shadow: 0 0 5px rgb(126, 208, 255),
    0 0 10px rgb(126, 208, 255),
    0 0 15px rgb(126, 208, 255);
    box-shadow: 0px 0px 8px  rgb(0, 0, 0);
}
.button2 {
    left: -3.5%;
    text-align: center;
    font-size: 17px;
    text-decoration: none;
}
.home-text { 
    font-size: 20px;
    position: relative;
    top: 7px;
}
.main-text{
    color: white;

}




.Container4{
    background-color: #3a3a4a;
    height: 100%;
    margin: 100px auto;
    margin-top: 200px;
    width: 60%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-color: rebeccapurple;
    border-radius: 10px;
    box-shadow: 0px 0px 20px  rgb(202, 115, 224);
    
 
}
.card1 {
    background-color: #000000;
    position: relative;
    margin-top: 1.25%;
    margin-bottom: 1.25%;
    width: 97.5%;
    height: 50%;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.5fr;
    grid-template-areas: 
    "video"
    "Text1";
    border-radius: 10px;
}
.showcase-video{
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    aspect-ratio: 16 / 9;
}
.showcase-video {grid-area: video;}
.Video-Beschreibung {grid-area: Text1;
    font-size: 1.5vw;
    margin: 3%;
}


.container1 {
    background-color: #2a2935;
    width: 60%;
    
    height: auto;
    margin: 200px auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 0.2fr;
    grid-template-rows: 1fr 1fr 1fr;
    row-gap: 20px;
    border-radius: 15px;
    box-shadow: 0px 0px 20px  rgb(115, 199, 224);
    
    align-items: center;
    grid-template-areas: 
    "gif6 erklärung6 code6"
    "gif7 erklärung7 code7"
    "gif8 erklärung8 code8"
    "gif9 erklärung9 code9"
    "gif10 erklärung10 code10"
    "gif1 erklärung1 code1"
    "gif2 erklärung2 code2"
    "gif3 erklärung3 code3"
    "gif4 erklärung4 code4"
    "gif5 erklärung5 code5"
    "gif11 erklärung11 code11" ;

    z-index: -3;
    
}

.card1-gif {grid-area: gif1;}
.card1-erklärung {grid-area: erklärung1 ;}
.card1-code {grid-area: code1;}

.card2-gif {grid-area: gif2;}
.card2-erklärung {grid-area: erklärung2 ;}
.card2-code {grid-area: code2;}

.card3-gif {grid-area: gif3;}
.card3-erklärung {grid-area: erklärung3 ;}
.card3-code {grid-area: code3;}

.card6-gif {grid-area: gif6;}
.card6-erklärung {grid-area: erklärung6 ;}
.card6-code {grid-area: code6;}

.card7-gif {grid-area: gif7;}
.card7-erklärung {grid-area: erklärung7 ;}
.card7-code {grid-area: code7;}

.card8-gif {grid-area: gif8;}
.card8-erklärung {grid-area: erklärung8 ;}
.card8-code {grid-area: code8;}

.card9-gif {grid-area: gif9;}
.card9-erklärung {grid-area: erklärung9 ;}
.card9-code {grid-area: code9;}

.card10-gif {grid-area: gif10;}
.card10-erklärung {grid-area: erklärung10 ;}
.card10-code {grid-area: code10;}

.card11-gif {grid-area: gif11;}
.card11-erklärung {grid-area: erklärung11 ;}
.card11-code {grid-area: code11;}

.card-gif{
    position: relative;
    width: 100%;
    aspect-ratio: 2.5 / 2;
    background-color: #000000;
    border-top-left-radius: 4%;
    border-bottom-left-radius: 4%;
    border-top: 2px solid  rgb(60, 92, 119);
    border-bottom: 2px solid rgb(60, 92, 119);
    border-left: 2px solid rgb(60, 92, 119);
    box-shadow: 0px 0px 10px  rgb(0, 0, 0);
}

.gif {
    position: relative;
    width: 100%;
    height: 99%;
    border-top-left-radius: 4%;
    border-bottom-left-radius: 4%;
}
.gif3 {
    position: relative;
    width: 100%;
    height: 99%;
    border-top-left-radius: 4%;
    border-bottom-left-radius: 4%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}


.card-erklärung {
    position: relative;
    width: 100%;
    aspect-ratio: 2.5 / 2;
    background: linear-gradient( 90deg, #737392,#737392,#737392,#737392,#3a3a4a);
    border-top: 2px solid  rgb(60, 92, 119);
    border-bottom: 2px solid rgb(60, 92, 119);
    box-shadow: 0px 0px 10px  rgb(0, 0, 0);
}
.card-code {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #3a3a4a;
    border-top-right-radius: 4%;
    border-bottom-right-radius: 4%;
    border-top: 2px solid  rgb(60, 92, 119);
    border-bottom: 2px solid rgb(60, 92, 119);
    box-shadow: 0px 0px 10px  rgb(0, 0, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}


@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.script-link {
    position: relative;
    background-color: #3a3a4a;
    margin: 1vw;
    width: 100%;
    height: 90%;
    border-radius: 1vw;
    text-align: center;
    font-size: 17px;
    text-decoration: none;
    color: aliceblue;
    display: flex;
    justify-content: center; /* Zentriert horizontal */
    align-items: center; /* Zentriert vertikal */
}
.script-text {
    position: relative;
    top: 0%;
    font-size: 4vw;
    
}
.script-link::after, .script-link::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    height: 100%;
    width: 100%;
    background-image:conic-gradient(from var(--angle),
    rgb(130, 199, 255),
    rgb(255, 255, 255),
    rgb(130, 199, 255),
    rgb(255, 255, 255),
    rgb(130, 199, 255));
    z-index:-1;
    padding: 0.4vw;
    border-radius: 1.3vw;
    animation: 5s spin linear infinite;
}
.script-link::before {
    filter: blur(1rem);
    opacity: 0.6;
}
@keyframes spin {
    from {
      --angle: 0deg;
    }
    to {
      --angle: 360deg;
    }
}

.card-erklärung {
    text-align: center;
    
}
.Überschrift-Erklährung {
    margin-top: 10%;
    font-size: 2.5vmin; /* Skaliert mit dem kleineren Wert von vw und vh */
    color: rgb(130, 199, 255);
    text-shadow: 0 0 5px rgb(145, 145, 145);
}

.Text-Erklährung {
    text-align: left;
    margin: 7%;
    font-size: 0.9vmax; /* Skaliert mit dem größeren Wert von vw und vh */
    color: rgb(255, 255, 255);
}
@media (max-width: 600px) {
    .Überschrift-Erklährung {
        font-size: 4vmin; /* Größere Schriftgröße für kleinere Bildschirme */
    }

    .Text-Erklährung {
        font-size: 2vmax; /* Größere Schriftgröße für kleinere Bildschirme */
    }
    .card-gif {
        width: 100%;
        aspect-ratio: auto; /* Entfernt das feste Seitenverhältnis */
    }

    .gif {
        width: 100%;
        height: auto; /* Passt die Höhe automatisch an die Breite an */
        border-top-left-radius: 4%;
        border-bottom-left-radius: 4%;
    }
}