/**Ganzer Bereich**/
* {
    margin: 5px;
    padding: 5px;
    text-decoration: none;
    font-family: 'Arima';
}
/* arima-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Arima';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/arima-v5-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* arima-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Arima';
  font-style: normal;
  font-weight: 500;
  src: url('fonts/arima-v5-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/**Body Bereich**/
body {
    font-size: 20px;
}

/**Seitentitel in der Navigation**/
a {
    font-size: small;
    
}

/**Hauptüberschriften**/
h1{
    font-size: 45px;
}

/**Navigationsleiste**/
.nav-list {
    width: 98%;
    background-color: cornflowerblue;
    list-style: none;
    display: flex;
    border-radius: 20px;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    font-size: large;
}

/**Navigationsleiste Text**/
.nav-list a {
    text-align: center;
    align-items: center;
    font-size: larger;
    color: white;
    font-weight: bold;
}

/**Hovern über Text in Navigationsleiste**/
.nav-items:hover {
    align-items: center;
    color: cornflowerblue;
    background-color: white;
    border-radius: 10px;
    transition-duration: 0.2s;
}

/**Mein Name in der index Datei**/
#name-style{
    display: flex;
    font-size: 80px;
    text-align: left;
    align-items: center;
    animation: Hilfe 5s infinite;
}

/**Animation für Name**/
@keyframes Hilfe{
    0%   {color: #9d00ff;}
    25%  {color: #00008B;}
    50%  {color: #9d00ff;}
    75%  {color: #00008B;}
    100% {color: #9d00ff;}
}

/**Footer ganz unten**/
footer {
    background-color: cornflowerblue;
    color: white;
    text-align: center;
    margin-left: 10px;
    padding: 15px;
    font-size: 15px;
    width: 96%;
    border-radius: 20px;
}

/**Alle Bilder**/
img {
    max-width: 100%;
    height: auto;
}

/**Alle divs**/
div {
    background-color: whitesmoke;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/**Mein Stundenplan**/
table{
    text-align: center;
    border-collapse: collapse;
}

/**Höhe von Zelle in meinem Stundenplan**/
tr {
    height: 40px;
}

/**Höhe von der großen Pause in meinem Stundenplan**/
#great-break {
    height: 15px;
}

/**Aktuelle Position in Navigation ersichtlich**/
.NotInlineClass{
    background-color: darkslateblue;
    border-radius: 15px;
}

/**Spiel Flappy Bird**/
.Game {
    margin: 0; 
    overflow: hidden; 
    background: #70c5ce;
}

/**Hintergrund von Flappy Bird**/
canvas {
    display: block;
    margin: auto;
    background: #ace;
}

/** Uhrzeit Stil **/
#time {
    font-size: 30px; /* Größe der Uhrzeit */
    color: white; /* Textfarbe */
    background: linear-gradient(45deg, #9d00ff, #00008B); /* Farbverlauf Hintergrund */
    padding: 5px 10px; /* Innenabstand */
    border-radius: 10px; /* Abgerundete Ecken */
    margin-left: 1100px; /* Abstand zum Namen */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Schatten für Tiefe */
    transition: transform 0.3s ease, background 0.3s ease; /* Übergangseffekte */
}

/** Hover-Effekt für die Uhrzeit **/
#time:hover {
    transform: scale(1.1); /* Vergrößert die Uhrzeit beim Hover */
    background: linear-gradient(45deg, #00008B, #A020F0); /* Umgekehrter Farbverlauf beim Hover */
}