@font-face {
    font-family: 'Amogus';
    src: url('./assets/fonts/AmogusFont.ttf') format('truetype');
}
@font-face {
    font-family: 'Axelich';
    src: url('./assets/fonts/Axelich.ttf');
}
@font-face {
    font-family: 'Arial';
    src: url('https://fonts.gstatic.com/s/arial/v11/arial.woff2') format('woff2');
}
* {
    font-family: 'Amogus', sans-serif;
}
h1 {
    font-size: 100px;
    text-align: center;
    background-color: #a6ff00;
    background-size: auto;
}
h2 {
    font-size: 90px;
    text-align: center;
    background-color: #00ff00;
    margin: 1px;
}
body {
    background-color: #ff00ff;
    color: #000;
    margin: 0;
    justify-content: center;
    overflow-y: scroll
}
.center-box {
    text-align: center;
    position: relative; /* Relativ positionieren, um das Video innerhalb dieses Containers zu zentrieren */
    height: 500px; /* Feste Höhe für den Container */
    transition: height 2s; /* Transition für die Höhe */
}
#imageBox {
    margin: 0;
    padding: 0;
}
#imageBox img {
    width: 50%;
    margin-bottom: -10px;
}
#video {
    transition: transform 2s; /* Transition für das Skalieren */
    display: inline-block;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%); /* Zentrieren des Videos innerhalb des Containers */
    transform-origin: center center; /* Ursprung der Transformation auf die Mitte setzen */
}

#video.small {
    transform: translate(-50%, -50%) scale(0); /* Skalierung auf 0, um das Video zu verstecken */
}

.center-box.small {
    height: 0; /* Höhe auf 0 setzen, wenn das Video skaliert wird */
}
#iframeOverlay {
    position: relative;
    top: 0;
    left: 0;
    width: 560px;
    height: 315px;
    background: transparent;
    z-index: 10;
    display: inline-block;
}
.center-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}
.sub-container {
    display: flex;
    flex-direction: column; /* Elemente untereinander anordnen */
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 5px;
}

#videoStats {
    color: #000;
    text-align: center;
    border: #00c3ff 20px dotted;
    justify-content: center;
    border-radius: 10px;
    max-width: 100%;
    width: 30% auto;
    display: inline-block;
    margin: 10px auto;
}

#videoStats .number {
    font-family: 'Axelich', sans-serif; /* Beispiel-Schriftart für die Zahlen */
    font-weight: thin;
    color: #00ff15;
    font-size: 60px;
}

#videoStats p {
    font-family: 'Amogus', sans-serif;  /* Beispiel-Schriftart für die Wörter */
    font-weight: bold;
    color: #ff0000;
    font-size: 80px;
}

#videocomments {
    color: #000;
    background-color: rgb(232, 209, 146);
    text-align: center;
    max-height: 1000px;
    max-width: 100%;
    width: 60%;
    top: 0%;
    display: inline-block;
    margin: 10px auto;
    overflow-y: scroll; /* Ermöglicht das Scrollen bei Überlauf */
}
#comments-container p {
    font-family: 'Arial', sans-serif; /* Beispiel-Schriftart */
    color: #000; /* Beispiel-Farbe */
    font-size: 50px; /* Beispiel-Schriftgröße */
    font-weight: bold;
}
#body::-webkit-scrollbar {
    display: none;
}
/* Scrollbar verstecken */
#videocomments::-webkit-scrollbar {
    display: none;
}

#videocomments {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

#instant_button{
    margin: 20px;
}
#randomButton {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
#randomButton:hover {
    background-color: #ff4141;
    border-radius: 20px;
    cursor: crosshair;
    font-size: 30px;    
    font-family: "Axelich", sans-serif ;
}
#randomButton:active {
    background-color: #044de9;
    border-radius: 80px;
    cursor: move;
    font-size: 80px;    
    font-family: "Arial", sans-serif ;
}