/*
1 - general
2 - typography
3 - layout
4 - colors
5 - media queries

*/
/* 1 - general */
body {
  background: #021114;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

img {
  width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

/* 2 - typography */
h1 {
  font-size: 1.2em;
  font-family: "Oswald", sans-serif;
  color: #eb5b5b;
}

h2 {
  font-size: 1.2em;
  font-family: "Oswald", sans-serif;
}

h3 {
  font-size: 1.2em;
  font-family: "Sorts Mill Goudy", serif;
}
.contact p a {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}
p {
  font-size: 1em;
  font-family: "Sorts Mill Goudy", serif;
  font-weight: 300;
  line-height: 150%;
}

.lyrics p {
  font-size: 0.8em;
}
.contact h3 {
  font-size: 1em;
  font-family: "Oswald", sans-serif;
  font-weight: 400;
}

/* 3 - layout */
.nav,
.main,
footer,
.description,
.about,
header {
  width: 90%;
  display: flex;
  margin: auto;
}
.about {
  flex-direction: column;
}

header,
footer {
  flex-direction: column;
}

.main {
  flex-direction: column;
  align-content: center;
  justify-content: center;
  text-justify: inter-word;
  word-spacing: -1px;
  hyphens: auto;
}

.title-img {
  padding: 3em 0 3em 0;
  width: 80%;
  margin: auto;
}

nav {
  width: 70%;
  margin: auto;
  display: flex;
  justify-content: center;
  text-align: center;
}

.nav-button1,
.nav-button5,
.nav-button4 {
  transform: skew(0.5deg, 0.5deg) scale(1, 1.05) translate(0%, 5%);
}

.nav-button2,
.nav-button3,
.nav-button5 {
  transform: skew(-1deg, -1deg) scale(1.1, 1.1) translate(0%, 5%);
}

ul {
  padding: 0;
  display: flex;
  flex-direction: column;
}

.description {
  display: none;
}
.about-mobile {
  display: flex;
  flex-direction: column;
}

.social-networks {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
}

.social-icons {
  display: flex;
  flex-direction: column;
}

span {
  display: none;
}

.fab {
  font-size: 1.8em;
  margin: 0 0.2em 0 0.2em;
}

.fab:hover {
  color: black;
}

span {
  margin-top: 1.3em;
}
section {
  width: 95%;
  margin: auto;
}
.lyrics {
  justify-content: space-between;
}

.song-lyrics-mobile {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 1em;
}

.song-lyrics-desktop {
  display: none;
}

.lyrics-container {
  display: flex;
  justify-content: space-evenly;
}

.section-title {
  width: 80%;
  margin: auto;
}

/* 4 - colors */
nav,
.description {
  animation: appear 5s forwards;
}

.main {
  color: #c0c0c1;
}

.main {
  width: 100%;
  height: 100%;
  background-image: url(assets/bg-up1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.songkick-iframe {
  margin-left: 10%;
}

/* 5 - media queries */
@media screen and (min-width: 550px) {
  .lyrics p {
    font-size: 1em;
  }
}

@media screen and (min-width: 700px) {
  .lyrics {
    width: 80%;
  }

  .song-lyrics-mobile {
    display: none;
  }

  .song-lyrics-desktop {
    padding-bottom: 2em;
    min-width: 200px;
    max-width: 650px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .description,
  .about {
    margin-top: 3em;
    display: flex;
    width: 60%;
    margin: auto;
    text-align: justify;
    justify-content: space-between;
    //animation: flicker 5s infinite;
  }

  .main {
    background-image: url(assets/bg1.jpg);
  }

  .description-english,
  .description-deutsch {
    width: 47%;
    text-shadow: 0.2px 0.2px rgba(0, 0, 0, 0.8);
  }

  header {
    margin-top: 3em;
  }

  nav,
  ul {
    flex-direction: row;
  }
  .main-nav ul li:first-child {
    display: none;
  }
  ul {
    width: 100%;
    justify-content: space-between;
  }

  nav {
    width: 70%;
    margin: auto;
    flex-wrap: wrap;
  }

  .social-networks,
  .social-icons {
    flex-direction: row;
  }

  span {
    display: block;
  }

  .fab {
    font-size: 1.5em;
  }
  .about {
    flex-direction: row;
  }
  .description-english {
    transform: skew(0.2deg, 1deg) scale(1, 1.05) translate(-5%, 4%);
  }

  .description-deutsch {
    transform: skew(-1deg, -1deg) scale(1.1, 1.1) translate(-1%, 5%);
  }
  .contact p a,
  .contact p {
    font-size: 1.1em;
  }
  .contact {
    width: 70%;
    margin: auto;
  }
}

@keyframes appear {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.2;
  }

  100% {
    opacity: 1;
  }
}

@keyframes flicker {
  0% {
    opacity: 0.7;
  }

  10% {
    opacity: 0.8;
  }

  50% {
    opacity: 0.7;
  }

  55% {
    opacity: 0.9;
  }

  90% {
    opacity: 0.8;
  }

  98% {
    opacity: 0.7;
  }

  100% {
    opacity: 0.8;
  }
}

.songkick-iframe {
  margin-left: 20%;
  width: 60%;
}

.description {
  margin-bottom: 2em;
}