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

/* Farben */

.atomBlau {
color: #1765b1;
display: inline;
}
.atomHellblau {
color: #00a8f6;
display: inline;
}
.atomOrange {
color: #ff4200;
display: inline;
}
.atomGruen{
color: #00e46c;
display: inline;
}
.atomTuerkies{
color: #53a599;
display: inline;
}
.atomPink {
color: #70407c;
display: inline;
}
.atomLila {
color: #623eac;
display: inline;
}
.atomGelb {
color: #EAC435;
display: inline;
}
.atomSchwarz {
color: #05090F;
display: inline;
}




body {
 background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(255, 0, 255, 0.75)), url('../../img/snippet3.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-blend-mode: darken;
 background-attachment: fixed;
}

.platzhalter {
height: 100px;

}


/*
.blau {
color: #0371E6;
display: inline-block;
}

.blau2 {
color: #2B88D6;
display: inline-block;
}

.blau3 {
color: #1B2A41;
display: inline-block;
}

.pink {
color: #D800B8;
display: inline-block;
}

.rot {
color: #88292F;
display: inline-block;
}

.gelb {
color: #F7B406;
display: inline-block;
}

.gelb2 {
color: #FFE66D;
display: inline-block;
}

.weiss {
color: #F7FFF7;
display: inline-block;
}

.orange {
color: #F86624;
display: inline-block;
}
*/



.snippetsUeberschrift {
  font-size: 3rem;
  color: #2B88D6;
  text-align: center;
  font-family: 'Permanent Marker', cursive;
  text-decoration: underline white;
}

.snippetText {
  color: white;
  text-align: center;
  margin-top: 2rem;
}

.buttonSnippet {
  background-color: #101B2D;
  color: white;
  padding: 0.5rem;
  border: solid 1px #345995;
  border-radius: 0.5rem 0 0.5rem 0;
  transition: 0.3s;
  cursor: pointer;

}

.buttonSnippet:hover {
  border: solid 1px #101B2D;
  background-color: #345995;
  padding-left: 1.2rem;
  font-weight: bold;
}

.overlaySnippets {
  width: 0%;
  height: 0%;
  top: 22%;
  left: 25%;
  position: relative;
  overflow: hidden;
  /* background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)); */
  background-color: black;
  transition: 0.3s;
  font-family: 'Righteous', cursive;
}

button {
  background-color: #05090F;
  color: white;
}



/* ======================================= */