jg-eucs/public/styles/UEberblick.css

* {
  scroll-margin-block-start: 60px;
  scroll-margin-block-end: 60px;
  box-sizing: border-box;
  scroll-behavior: smooth;
  max-width: 100%;
  max-height: 100%;
}

::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  background: rgb(41, 41, 41);
}
::-webkit-scrollbar-thumb {
  background: #7f5af0;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

[class*="col-"] {
  float: left;
}
.row {
  clear: both;
}

#navbar {
  z-index: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #121629;
  position: fixed;
  top: 0;
  width: 155px;
  height: 100%;
  margin-left: -8px;
}

#navbar button {
  border-radius: 16px;
  scale: 0.9;
}
#navbar button:hover {
  scale: 1.06;
}

#navbar a {
  float: none;
  display: block;
  color: #eff0f3;
  text-align: left;
  padding: 8px 8px;
  text-decoration: none;
  font-size: 0.9em;
}

#navbar a:hover {
  background: #eff0f3;
  color: #121629;
  cursor: pointer;
}

#sidenavbar {
  z-index: 1;
  margin-left: -8px;
  overflow: visible;
  background-color: #121629;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: left;
  display: flex;
  justify-content: space-between;
}

#sidenavbar button {
  all: unset;
  margin: 5px auto;
  color: #eff0f3;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  font-size: 1.4em;
  border: none;
}

#sidenavbar button:hover {
  background: #eff0f3;
  color: #2a2a2a;
  cursor: pointer;
}

.main {
  height: 100%;
}

body {
  background-color: #16161a;
  color: #94a1b2;
  text-align: center;
  font-size: 1.4em;
}
h1 {
  font-size: 2.5em;
  color: #fffffe;
}
h2 {
  font-size: 2em;
  color: #fffffe;
}
h3 {
  font-size: 1.6em;
  clear: both;
  color: #fffffe;
}
p {
  text-align: justify;
  font-size: 0.875em;
}
header {
  text-align: center;
  padding-left: 140px;
}

footer,
aside,
article {
  text-align: center;
  padding-left: 15px;
  margin: 1.5%;
  margin-left: 145px;
}
img {
  width: 100%;
  max-width: max-content;
  height: auto;
  margin-top: -8px;
}

button {
  background-color: #121629;
  color: #eff0f3;
  text-align: left;
  padding: 8px 8px;
  text-decoration: none;
  font-size: 0.9em;
}

p a {
  text-align: justify;
  text-decoration: underline;
  color: #94a1b2;
}
p a:hover {
  color: rgb(225, 59, 59);
}
b {
  color: #91c4ff;
}

.righties {
  margin: 0 2%;
  margin-right: 0%;
  padding: 0%;
  width: 33%;
  float: right;
  transition: width 1.5s;
  clear: both;
}
.righties:hover {
  width: 50%;
}

.lefties {
  margin-right: 20px;
  width: 33%;
  height: 100%;
  float: left;
  transition: width 1.5s;
  display: none;
}
.lefties:hover {
  width: 50%;
}

#vcutout {
  width: 25%;
}
#vcutout:hover {
  width: 30%;
}

.hidden {
  /*position:absolute;
    transform:translate(-50%,-50%);
    height:200px;
    width:200px;  */
  float: left;
  padding: 2%;
  padding-left: 0%;
  display: none;
}
/*wenn hover über text, zeige bild*/
.imghover:hover + .hidden {
  display: block;
}

.light-mode {
  background-color: #eff0f3;
  color: #2a2a2a;
}
.light-mode article p a {
  text-align: justify;
  text-decoration: underline;
  color: #2a2a2a;
}
.light-mode b {
  color: #2a2a2a;
}
.light-mode b a {
  color: #2a2a2a;
}
.light-mode h3 {
  color: #2a2a2a;
}
.light-mode h1 {
  color: #2a2a2a;
}
.light-mode h2 {
  color: #2a2a2a;
}
.light-mode #navbar {
  background-color: #b8c1ec;
}
.light-mode #sidenavbar {
  background-color: #b8c1ec;
}
.light-mode #navbar a {
  color: black;
}
.light-mode #sidenavbar a {
  color: black;
}
.light-mode button {
  background-color: #b8c1ec;
  color: black;
}

/*Raster Einstellungen*/
.light-mode .raster {
  background-color: #eff0f3;
}
.light-mode a {
  color: #2a2a2a;
}
a {
  color: rgb(225, 223, 210);
}

.raster {
  width: 300px;
  height: 350px;
  float: left;
  padding: 1%;
  padding-top: 0;
  border: #555;
  border-width: 2px;
  border-style: solid;
  border-radius: 10%;
  scale: 0.9;
  font-size: 0.9em;
}
a div img,
a div video {
  border-radius: 10%;
  max-width: 260px;
  max-height: 290px;
  padding-top: 8px;
  bottom: 0;
}
a div h3 {
  margin: 0.5%;
}
.raster:hover {
  scale: 1.06;
}
.raster:hover a div img {
  width: 110%;
}

.logos {
  height: 1.6em;
  margin-bottom: -18px;
}

.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 12.5%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}

@media (max-width: 767px) /*unter handy größe*/ {
  header,
  article,
  img,
  p,
  h1,
  h2,
  h3 {
    margin-left: 0%;
    padding-left: 0;
  }
  [class*="col-"] {
    width: 100%;
  }
  #navbar {
    visibility: hidden;
  }
  #sidenavbar {
    visibility: visible;
  }
  /*.raster {width: calc(100%/2);}*/
  .righties {
    width: 100%;
  }
  .righties:hover {
    width: 100%;
  }
}

@media only screen and (min-width: 767px) /*über handy größe*/ {
  #navbar {
    visibility: visible;
  }
  #sidenavbar {
    visibility: hidden;
  }
  /*.raster {width: calc(100%/5);}*/
  div div button {
    visibility: hidden;
  }
}

/*@media screen and (min-width:1200px) {.raster {width: calc(100%/6);}}
  
@media screen and (min-width:1500px) {.raster {width: calc(100%/8);}}*/

@media screen and (min-width: 1900px) /*HD Fullscreen only*/ {
  .lefties {
    display: block;
    width: 27%;
  }
  .righties {
    width: 27%;
  }
}

@media screen and (min-width: 2250px) /*ab 2000px nicht weiter skalieren*/ {
  * {
    width: 1950px;
    margin-left: auto;
    margin-right: auto;
  }
}