@charset "UTF-8";
/* TOC

- Typography
- Color Variables
- Additional

Farbschemata - https://halcyon-theme.netlify.app/
#171c28
#1d2433
#2f3b54
#6679a4
#8695b7
#a2aabc
#d7dce2
#ffcc66
#5ccfe6
#bae67e
#ffae57
#ffd580
#c3a6ff
#ef6b73


*/
/* Typography
/* https://www.modularscale.com/?1&em&1.067
------------------------------------------------------------------- */
/* Additional
------------------------------------------------------------------- */
a {
  color: #ffcc66;
  text-decoration: none;
  -webkit-transition: all 0.15s cubic-bezier(0.33, 0.66, 0.66, 1);
  transition: all 0.15s cubic-bezier(0.33, 0.66, 0.66, 1); }

main a {
  color: #bae67e;
  box-shadow: inset 0 -1px 0 #5ccfe6;
  border-bottom: 2px solid #5ccfe6;
  -webkit-transition: box-shadow 0.4s cubic-bezier(0.33, 0.66, 0.66, 1);
  transition: box-shadow 0.4s cubic-bezier(0.33, 0.66, 0.66, 1); }

main a:hover {
  color: #5ccfe6;
  border-bottom: 1px solid #2f3b54;
  box-shadow: inset 0 -7px 0 #2f3b54; }

main a:visited {
  box-shadow: inset 0 -1px 0 #2f3b54; }

/* Setze überall den Rand auf 0 */
a a:visited,
a:link img,
a:hover img,
a:focus img,
a:active img,
a img {
  border: 0; }

p {
  margin: 0 0 1rem; }

ul {
  padding: 0; }

img {
  max-width: 100%;
  height: auto; }

.right {
  float: right;
  margin: 0 0 0 1rem; }

.left {
  float: left;
  margin: 0 1rem 0 0; }

figure {
  margin: 0 0 2rem 0;
  padding: 0; }

figcaption {
  font-size: .75rem;
  text-align: right;
  color: #8695b7; }

.button {
  background: #bae67e;
  color: #2f3b54;
  padding: .5rem .75rem;
  box-shadow: inset 0 -2px 0 #8695b7;
  border-bottom: 0;
  border-radius: 3px;
  -webkit-transition: all 0.4s cubic-bezier(0.33, 0.66, 0.66, 1);
  transition: all 0.4s cubic-bezier(0.33, 0.66, 0.66, 1); }

.button:hover {
  color: #1d2433;
  border-bottom: 0;
  box-shadow: inset 0 -4px 0 #8695b7; }

/* TOC Layout

- 

*/
/* Layout
-------------------------------------------------------------------- */
#masthead {
  color: #fff;
  min-height: 50px;
  background-image: url("../images/header-gaming.jpg");
  background-position: center;
  background-color: #ffee99;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 1rem; }

main {
  margin: 0 auto;
  width: 800px; }

.wrapper {
  max-width: 1200px;
  margin: 0 auto; }

.raster--spalten--3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 2rem; }

/* TOC mediaqueries

- CSS Elements

*/
footer {
  margin-top: 3rem;
  padding: 2rem;
  min-height: 6rem;
  color: #a2aabc;
  background: #1d2433; }

.no-bullet {
  margin: 0;
  padding: 0;
  list-style-type: none; }

footer a {
  color: #a2aabc;
  box-shadow: inset 0 0 0 #a2aabc;
  border-bottom: 1px solid #a2aabc;
  -webkit-transition: box-shadow 0.4s cubic-bezier(0.33, 0.66, 0.66, 1);
  transition: box-shadow 0.4s cubic-bezier(0.33, 0.66, 0.66, 1); }

footer a:hover {
  color: #5ccfe6;
  border-bottom: 1px solid #d7dce2;
  box-shadow: inset 0 -3px 0 #d7dce2; }

footer #social--media li {
  display: inline-block; }

footer #social--media a {
  border: 0; }

footer #social--media a:hover {
  border: 0;
  box-shadow: inset 0 0 0 #a2aabc;
  fill: #d7dce2; }

footer #social--media a svg {
  transform: scale(1, 1);
  -webkit-transition: all 0.4s cubic-bezier(0.33, 0.66, 0.66, 1);
  transition: all 0.4s cubic-bezier(0.33, 0.66, 0.66, 1); }

footer #social--media a svg:hover {
  fill: #5ccfe6;
  transform: scale(1.5, 1.5); }

footer .social--icon {
  width: 3rem;
  height: 3rem;
  fill: #a2aabc; }

body {
  font-family: "Fira Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
  background-color: #171c28;
  color: #fff;
  line-height: 1.65; }