/***********************************
****************GENERAL************
***********************************/

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  margin: 0;
  font-family: "Montserrat", sans-serif;
}

.container {
  width: 80%;
  margin: 0 auto;
}

/***********************************
****************HEADER************
***********************************/

.main-header {
  background-color: transparent;
}

.main-header h1 {
  color: white;
  padding: 1em;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.second-header h1 {
  color: black;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 3em;
}

/***********************************
****************GENERAL************
***********************************/

#div-img {
  /* 	position: absolute;
	height: 100%;
	top:0;
	bottom: 0;
	right :0;
	left: 0;
	z-index: -1; */
  background-image: url("pictures/posters/11434049.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-color: black;
  height: 100vh;
  transition: background-image 0.3s;
}

.quote-paragraph {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  font-size: 3rem;
  color: white;
  font-weight: bold;
  font-style: italic;
  transition: opacity 1s;
  transform: translate(-50%, -50%);
}

.hidden {
  opacity: 0;
}

.quote-paragraph::before {
  /*content: "<< ";*/
}

.quote-paragraph::after {
  /*content: " >>";*/
}

.containerText {
  width: 50%;
  margin: auto;
}

.center {
  text-align: center;
}

main p {
  line-height: 1.5em;
}

.twitter-follow-button {
  margin-bottom: 1em;
}

.support_container {
  display: flex;
  justify-content: right;
  margin-top: -2rem;
  margin-bottom: 2rem;
}

@media (max-width: 1566px) {
  #div-img {
    height: 80vh;
  }
}

@media (max-width: 1260px) {
  #div-img {
    height: 75vh;
  }
}

@media (max-width: 1182px) {
  #div-img {
    height: 65vh;
  }
}

@media (max-width: 1142px) {
  .quote-paragraph {
    font-size: 2rem;
  }

  .quote-paragraph {
    top: 40%;
    left: 10%;
    right: 10%;
    transform: translate(0, -50%);
  }
}

@media (max-width: 1142px) {
  .quote-paragraph {
    top: 50%;
    left: 10%;
    right: 10%;
    transform: translate(0, -50%);
  }
}

@media (max-width: 1024px) {
  .quote-paragraph {
    font-size: 2rem;
    top: 52%;
  }
}

@media (max-width: 992px) {
  .containerText {
    width: 70%;
    margin: auto;
  }

  .quote-paragraph {
    top: 55%;
    left: 10%;
    right: 10%;
    transform: translate(0, -50%);
  }
}

@media (max-width: 850px) {
  .quote-paragraph {
    top: 50%;
  }
}

@media (max-width: 768px) {
  .quote-paragraph {
    font-size: 2rem;
    top: 47%;
  }

  .containerText {
    width: 80%;
    margin: auto;
  }

  .center {
    margin-top: 2em;
  }

  .long-text {
    font-size: 1.8rem;
  }

  #div-img {
    height: 60vh;
  }
}

@media (max-width: 700px) {
  .quote-paragraph {
    top: 43%;
    left: 10%;
    right: 10%;
    transform: translate(0, -50%);
  }
}

@media (max-width: 600px) {
  .quote-paragraph {
    top: 44%;
    left: 10%;
    right: 10%;
    transform: translate(0, -50%);
  }
  .long-text {
    font-size: 1.8rem;
    top: 44%;
  }

  .middle-text {
    top: 43%;
  }
}

@media (max-width: 500px) {
  .quote-paragraph {
    top: 44%;
  }
  .long-text {
    font-size: 1.8rem;
    top: 44%;
  }
  .middle-text {
    top: 44%;
  }
  #div-img {
    height: 62vh;
  }
}

@media (max-width: 420px) {
  .quote-paragraph {
    top: 46%;
  }

  .middle-text {
    top: 45%;
  }
  .long-text {
    font-size: 1.8rem;
    top: 45%;
  }
}

@media (max-width: 380px) {
  #div-img {
    height: 60vh;
  }
}

@media (max-width: 360px) {
  .quote-paragraph {
    font-size: 1.5rem;
    top: 47%;
  }

  .middle-text {
    top: 42%;
  }
  .long-text {
    font-size: 1.5rem;
    top: 43%;
  }
}

@media (max-width: 350px) {
  .quote-paragraph {
    top: 50%;
  }

  .middle-text {
    top: 51%;
  }
  .long-text {
    font-size: 1.8rem;
    top: 52%;
  }
  #div-img {
    height: 80vh;
  }
}

/***********************************
****************FORM************
***********************************/

.form-wrap {
  text-align: center;
}

form.gol label {
  display: block;
  margin-top: 1em;
}

form.gol input {
  display: block;
  margin-right: auto;
  margin-left: auto;
  margin-top: 1em;
  padding: 1em;
  border-radius: 0.5em;
}

/***********************************
****************ALERTS************
***********************************/

.alert-wrapper {
  display: flex;
  justify-content: center;
}

.alert.problem {
  background-color: #fb735690;
}

.alert {
  padding: 1em;
  margin: 0;
  border-radius: 1em;
}