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

:root{
  --boxfarbe: rgb(236, 220, 190);
  --höhe: 60vh;
  --radius: 15px;
  --padding: 15px;
  --blockfarbe: rgb(20, 20, 145);

  --schriftart-nav: "Monoton";
  --schriftgröße-nav: 60px;
  --linkfarbe: white;
}

.layout{
  padding: 25px;
  display: grid;
  grid-template-columns: 15% 50% 20% 15%;
  gap: 15px;
}

.layout2{
  padding: 25px;
  display: grid;
  grid-template-columns: 15% 70%;
  gap: 15px;
}

.layoutblog{
  padding: 25px;
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  gap: 5px;
}

.blogblock{
  background-color: var(--blockfarbe);
  border-radius: var(--radius);
  height: 15vh;
  padding: var(--padding);
  box-sizing: border-box;
  overflow: auto;
  text-align: center;
}

.main{
  background-color: var(--boxfarbe);
  border-radius: var(--radius);
  height: 95vh;
  padding: var(--padding);
  box-sizing: border-box;
  overflow: auto;
}

.chat {
  background-color: var(--boxfarbe);
  border-radius: var(--radius);
  height: 95vh; /* Höhe 60% des Viewports */
  padding: var(--padding);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: auto;;
}

.nav{
  height: 95vh;
  font-family: "Monoton", sans-serif;
  font-size: var(--schriftgröße-nav);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.textnormal{
  font-family: monospace;
  font-size: 1rem;
}

.headings{
  font-family: "Monoton";
  font-size: 3rem;
  text-align: center;
}
.ch{
  font-family: "Monoton";
  font-size: 3rem;
}

.rc{
  height: 75vh;
}