/* --- Basic Body --- */
body {
    margin: 0;
    padding: 0;
    background-image: url("graphics/_Background.png");
    background-repeat: repeat;
    background-color: #111;
    color: #eee;
    height: 100vh;
    overflow: hidden;
}
body.dark {
    background-image: url("graphics/_Background_Dark.png");
    background-repeat: repeat;
    background-color: #111;
    color: #eee;
}
body:not(.dark) {
    background-image: url("graphics/_Background_Light.png");
    background-repeat: repeat;
    background-color: #fff;
    color: #222;
}

#background-effects{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
}

#toggle-game-nav i {
    font-size: 100%;
    color: white;
}
#toggle-game-nav:hover i {
    color: #ccc; /* Hover-Effekt */
}
#toggle-theme i {
    font-size: 100%;
    color: white;
    width: 40px;
}
#toggle-theme:hover i {
    color: #ccc;
}



/* --- Top Nav-Bar --- */
.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  padding: 0.5rem 1rem;
    background-size: cover;
    background-repeat: no-repeat;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo {
  height: 40px;
  width: auto;
  margin-right: 10px;
}

.logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: white;
}

.top-buttons-center button {
    width: 300px;
    margin-left: 9rem;
    padding: 1rem 1rem;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.top-buttons-center button:hover {
    background-color: #555;
}

.top-buttons-right button {
    margin-left: 0.5rem;
    padding: 1rem 1rem;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.top-buttons-right button:hover {
    background-color: #555;
}



/* --- Game Nav-Bar --- */
.game-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
    overflow-x: auto;
    overflow-y: hidden;
    transition: max-height 0.5s ease-in-out;
    max-height: 0;
}
.game-nav.visible {
    max-height: 120px;
}

.game-nav-games img {
    height: 60px;
    width: auto;
    margin: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
    filter: grayscale(100%) brightness(0.8);
}
.game-nav-games img:hover,
.game-nav-games img.selected {
    transform: scale(1.1);
    filter: none;
}

.game-nav-bottomBar {
    width: 100%;
    height: 10px;
    background-size: cover;
    background-repeat: no-repeat;
}



/* --- Basic Main Content --- */
#main-container {
    transition: background-image 0.5s ease-in-out;
    height: 100%;
    width: 100%;
}

.main-inner-container {
    padding: 1rem;
}


/* --- Home Content --- */
.home-container {
    height: calc(100vh - 60px - 10px - 2rem);
    padding: 1rem;
    /*background-color: rgba(69, 48, 206, 0.38);*/
    box-sizing: border-box;
}



/* --- Impressum Content --- */
.impressum-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100vh - 60px - 10px);
    justify-content: space-between;
    padding: 1rem 0;
    box-sizing: border-box;
    overflow: hidden;
}

#impressum-headerTitle {
    display: block;
    width: 100%;
    margin: 0.5rem auto;
    text-align-last: center;
}

#impressum-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 100%; /* Stellt sicher, dass der Container die volle Breite nutzt */
    max-width: 400px; /* Begrenzt die Breite des gesamten Formulars */
}
#impressum-form input,
#impressum-form textarea,
#impressum-form button {
    display: block;
    width: 100%;
    max-width: 400px;
    margin: 0.5rem 0;
    padding: 0.5rem;
    border-radius: 6px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}
#impressum-form button {
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}
#impressum-form button:hover {
    background-color: #555;
}

#impressum-textblock {
    display: block;
    width: 100%;
    margin: 0.5rem auto;
    text-align: center;
}



/* --- Game MultiTTT Content --- */
.multiTTT-container {
    height: calc(100vh - 60px - 10px - 30px);
    box-sizing: border-box;
}
.multiTTT-container nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
}

.multiTTT-left,
.multiTTT-center,
.multiTTT-right {
    height: 100%;
    flex: 1; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.multiTTT-left {
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.multiTTT-gameLogo {
    max-width: 300px;
    max-height: 130px;
    margin-left: 0;
}
.multiTTT-left p {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    margin: 0.5rem 0;
    text-align: left;
}

.multiTTT-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Ändert von center zu flex-start, um Inhalt oben auszurichten */
    margin-left: 1rem;
    margin-right: 1rem;
}

.multiTTT-gameFrame {
    height: 100%;
    aspect-ratio: 0.5625;
    border: 3px solid white;
    border-radius: 2px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: black;
}
.multiTTT-gameFrame button {
    width: 50%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
}

.multiTTT {
    width: 100%;
    height: 100%;
}

.multiTTT-description {
    font-family: 'Orbitron', sans-serif;
    font-size: 14pt;
    line-height: 1.1;
    padding-top: 2rem;
}



/* --- Game Space Whiskers Content --- */
.spaceWhiskers-container {
    padding: 1rem;
    height: calc(100vh - 60px - 10px - 30px); /* Wie bei multiTTT */
    box-sizing: border-box;
}

#spaceWhiskers-info-demo-container {
    border: 0;
    width: 100%;
    height: 100%;
}

/* Info-Zustand */
.spaceWhiskers-info-nav {
    height: 100%;
    position: relative;
}

.spaceWhiskers-gameLogo {
    max-width: 300px;
    max-height: 130px;
    margin-left: 0;
    position: absolute;
    top: 0;
    left: 0; /* Links oben */
}
.spaceWhiskers-gameIcon {
    max-height: 130px;
    vertical-align: top;
    animation: wobbleCatIcon 7s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
.spaceWhiskers-title {
    font-family: 'AdoreCats', sans-serif;
    max-height: 130px;
    margin-left: 15px;
    position: absolute;
    top: 0;
    left: 150px;
}

.spaceWhiskers-demoButton {
    padding: 0.5rem 1rem;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: absolute;
    top: 0;
    right: 0; /* Rechts oben */
    width: 300px; /* Feste Breite für Konsistenz */
    height: 120px; /* Feste Höhe für Konsistenz */
}

.spaceWhiskers-demoButton:hover {
    background-color: #555;
}

/* Demo-Zustand */
.spaceWhiskers-demo-nav {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 100%;
    position: relative;
}

.spaceWhiskers-left,
.spaceWhiskers-center,
.spaceWhiskers-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* Für absolute Positionierung im Demo-Zustand */
}

.spaceWhiskers-left {
    min-width: 300px;
    align-items: flex-start; /* Logo linksbündig */
}

.spaceWhiskers-center {
    margin-left: 1rem;
    margin-right: 1rem;
    justify-content: flex-start;
}

.spaceWhiskers-gameFrame {
    height: 100%;
    aspect-ratio: 0.5625;
    border: 3px solid white;
    border-radius: 2px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: black;
}

.spaceWhiskers-infoButton {
    width: 300px; /* Gleiche Breite wie demoButton */
    height: 120px; /* Gleiche Höhe wie demoButton */
    padding: 0.5rem 1rem;
    background-color: #333;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s;
    position: absolute;
    top: 0;
    right: 0; /* Rechts oben im jeweiligen Container */
}
.spaceWhiskers-infoButton:hover {
    background-color: #555;
}

.spaceWhiskers-startButton {
    width: 50%;
    height: 15%;
    margin-left: auto;
    margin-right: auto;
}
/*.spaceWhiskers-startButton:hover {
    
}*/

.spaceWhiskers {
    width: 100%;
    height: 100%;
}




/* ---  --- */
/* ---  --- */
/* ---  --- */




/* --- Background Effects --- */
body.animated-background {
    animation: moveBackground 120s linear infinite;
}
@keyframes moveBackground {
    0% { background-position: 0 0; }
    100% { background-position: -1920px 2160px; }
}
body.gradient-background {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 100vh;
    background-image: linear-gradient(to top, #5914c6, #00fca6);
    
    /*background-image: none;
    background-color: #5914c6;
    animation: blendColors 30s infinite;*/
}
@keyframes blendColors {
    0% { background-color: #00fca6; }
    50% { background-color: #5914c6; }
    100% { background-color: #00fca6; }
}

.background-effect-multiTTT {
    animation: backgroundEffect-multiTTT 10s linear infinite;
}
@keyframes backgroundEffect-multiTTT {
    0%  { background-color: rgba(104, 20, 237, 0.72); }
    50% { background-color: rgba(0, 216, 143, 0.26); }
    100%{ background-color: rgba(104, 20, 237, 0.72); }
}
.background-effect-spaceWhiskers {
    animation: backgroundEffect-spaceWhisker 30s linear infinite;
}
@keyframes backgroundEffect-spaceWhisker {
    0%  { background-color: rgba(109, 0, 255, 0.25); }
    33% { background-color: rgba(42, 213, 255, 0.25); }
    66% { background-color: rgba(255, 217, 0, 0.25); }
    100%{ background-color: rgba(109, 0, 255, 0.25);; }
}

@keyframes wobbleCatIcon {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(0, -25px) rotate(-5deg) scale(1.05);
    }
    50% {
        transform: translate(20px, 0) rotate(0deg) scale(1);
    }
    75% {
        transform: translate(0, 25px) rotate(5deg) scale(1.05);
    }
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}


/* --- Fonts --- */
@font-face {
    font-family: 'AdoreCats';
    src: url('fonts/Adore Cats.ttf') format('truetype');
}
@font-face {
    font-family: 'CatCafe';
    src: url('fonts/CatCafe.ttf') format('truetype');
}
@font-face {
    font-family: 'Orbitron';
    src: url('fonts/Orbitron.ttf') format('truetype');
}