/* colours */
.yellowLight {
  color: #ffda36;
}
.yellowDark {
  color: #debe2f;
}
.purpleLight {
  color: #bd1fff;
}
.purpleDark {
  color: #3e0a57;
}
.turqLight {
  color: #289eb5;
}
.turqDark {
  color: #1b7080;
}

html {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  color: #ffda36;
}
a {
  color: #ffda36;
  text-decoration: none;
}
h1 {
  font-weight: 900;
  font-size: 3rem;
  text-align: center;
  margin-bottom: 0;
}
h2 {
  font-weight: 900;
  font-size: 2rem;
  text-align: center;
  margin: 10px;
}
h3 {
  font-weight: 900;
  font-size: 1rem;
  text-align: center;
  margin: 10px;
}
p {
  margin: 10px;
  text-align: justify;
  font-weight: 300;
}

body {
  background-color: #000;
  margin: 0px;
}
.dinoBG {
  background-image: url("./images/logoAltKleiner2.png");
}
.dinoPic {
  width: 400px;
}
.mjaBG {
  background-image: url("./images/Farbleo2.png");
}
.almaniaBG {
  background-image: url("./images/Scribbles_Hintergrund.png");
}

.logo {
  height: 300px;
  margin: 20px;
}
.logo2 {
  height: 200px;
  border: solid;
  border-color: #1b7080;
}
.billie {
  background-color: #debe2f;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin: 10px;
  border-style: solid;
  border-color: #ffda36;
}
.beatsguy {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  margin: 10px;
  border-style: solid;
  border-color: #debe2f;
}
.teamPic {
  background-color: #debe2f;
  height: 120px;
  border-radius: 50%;
  border-style: solid;
  border-color: #ffda36;
}

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 95vw;
  margin-top: 20px;
}
.game-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 250px;
  width: 95vw;
  margin: 20px;
}
.bottom-position {
  width: 900px;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.top-position {
  width: 600px;
  position: absolute;
  top: 5vh;
  right: 10vw;
  border: solid;
  border-color: #289eb5;
  /* border-radius: 25%; */
}
.middle-position {
  width: 500px;
  position: absolute;
  left: 10vw;
  top: 20vh;
  border: solid;
  border-color: #3e0a57;
  /* border-radius: 25%; */
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 826px;
  /* background-color: #3e0a57; */
  border-style: solid;
  border-color: #bd1fff;
  background: linear-gradient(5deg, #289eb5, #289eb5, #bd1fff);
}
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 826px;
  /* background-color: #3e0a57; */
  border-style: solid;
  border-color: #bd1fff;
  background: linear-gradient(5deg, #000, #000, #3e0a57, #3e0a57);
}
.impressum {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 826px;
  background-color: #000;
  border-style: solid;
  border-color: #bd1fff;
  font-size: 0.5rem;
}
.toggler {
  text-align: center;
  margin: 5px;
  color: #289eb5;
}
.container {
  width: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.card {
  width: 400px;
  height: 200px;
  text-align: center;
  border-style: solid;
  border-color: #bd1fff;
  /* background-color: #3e0a57; */
  /* background: linear-gradient(5deg, #3e0a57, #3e0a57, #1b7080); */
}
.game-card {
  width: 500px;
  height: 300px;
  text-align: center;
  border-style: solid;
  border-color: #bd1fff;
  background-color: #3e0a57;
  margin: 5%;
}
.part1 {
  background: linear-gradient(5deg, #3e0a57, #3e0a57, #3e0a57, #bd1fff);
}

.part2 {
  background: linear-gradient(355deg, #3e0a57, #3e0a57, #3e0a57, #bd1fff);
}
.part3 {
  background: linear-gradient(5deg, #023b1f, #023b1f, #023b1f, #289eb5);
  border-color: #289eb5;
}
.part4 {
  background: linear-gradient(355deg, #023b1f, #023b1f, #023b1f, #289eb5);
  border-color: #289eb5;
}
.link {
  background-color: #bd1fff;
  border-radius: 3%;
  padding: 5px;
  margin: 5px;
  font-size: 1.8rem;
}
.link-almania {
  background-color: #289eb5;
}
.upper {
  background: linear-gradient(5deg, #1b7080, #289eb5);
}

.lower {
  background: linear-gradient(5deg, #3e0a57, #1b7080);
}
.expandable {
  display: none;
}
.billie1 {
  height: 500px;
}
.small-visible {
  display: none;
}
.big-visible {
  display: unset;
}
.background {
  position: absolute;
  bottom: 20px;
  left: 20vw;
  z-index: -1;
}
.almania-background {
  border: solid;
  border-color: #1b7080;
  height: 50vh;
}
.lc-background {
  border: solid;
  border-color: #3e0a57;
  height: 50vh;
}
@media (max-width: 1400px) {
  .background {
    display: none;
  }
}
@media (max-width: 900px) {
  .dinoBG {
    background-image: url("./images/logoAltNochKleiner2.png");
  }
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }
  .team-section {
    width: 400px;
    display: grid;
    grid-template-columns: 190px 190px;
    grid-template-rows: 30vh;

    gap: 10px;
  }
  .header {
    width: 400px;
  }
  .contact {
    width: 400px;
  }
  .impressum {
    width: 400px;
  }
  .logo {
    height: 200px;
    margin: 10px;
  }
  .second {
    background: linear-gradient(5deg, #1b7080, #1b7080);
  }
  .forth {
    background: linear-gradient(5deg, #3e0a57, #3e0a57);
  }
  .game-card {
    width: 300px;
    height: 250px;
  }

  .link {
    font-size: 1.2rem;
    margin: 1px;
  }
  .smallestText {
    font-size: 0.8rem;
  }
  .tweepy1 {
    height: 200px;
  }
  .billie1 {
    height: 400px;
  }
  .bottom-position {
    width: 600px;
  }
  .top-position {
    width: 400px;
  }
  .middle-position {
    width: 300px;
    top: 30vh;
  }
}
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }
  .team-section {
    width: 300px;
    display: grid;
    grid-template-columns: 140px 140px;
    grid-template-rows: 30vh;

    gap: 10px;
  }
  .header {
    width: 300px;
  }
  .contact {
    width: 300px;
  }
  .impressum {
    width: 300px;
  }
  .card {
    width: 300px;
  }
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.5rem;
  }

  .logo {
    height: 150px;
    margin: 10px;
  }
  .second {
    background: linear-gradient(5deg, #1b7080, #1b7080);
  }
  .forth {
    background: linear-gradient(5deg, #3e0a57, #3e0a57);
  }
  .dinoPic {
    width: 80vw;
  }
  .game-card {
    width: 150px;
    height: 200px;
  }

  .link {
    font-size: 0.5rem;
  }
  .smallestText {
    font-size: 0.6rem;
  }
  .tweepy1 {
    height: 150px;
  }
  .billie1 {
    height: 300px;
  }
  .logo2 {
    height: 140px;
  }
  .small-visible {
    display: unset;
  }
  .big-visible {
    display: none;
  }
  .bottom-position {
    width: 350px;
  }
  .top-position {
    width: 300px;
  }
}