body, html {
  height: 100%;
  margin: 0;
}

.textstyle {
  position: relative;
  color: white;
text-shadow: 2px 2px 3px black;
  font-family: "Courier New", Courier, monospace;
  font-size: 30px;
}


.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

.bottomright {
  position: absolute;
  bottom: 0;
  right: 32px;
}

.bottomleft {
  position: absolute;
  bottom: 0;
  left: 30px;
}

.middle {

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

hr {
  margin: auto;
  width: 65%;
}

.background {
   background-image: url('https://cdn.dribbble.com/userupload/17284471/file/original-d1553c51a83ac44f6820820eadabd0d7.png?resize=2048x1365&vertical=center');
  background-size: cover; /* A kép kitölti az elemet */
  background-repeat: no-repeat; /* Nem ismétlődik */
  background-position: center; /* Középen helyezkedik el **/
  width: 100%; /* Teljes szélesség */
  height: 100vh; /* Teljes magasság (a viewport magassága) */
}

/* Media query telefonokhoz */
@media (max-width: 600px) {
	.background {
  background-image: url("https://thedarkhorizon.net/img/bg-mobile.png");
  background-size: cover; /* A kép kitölti az elemet */
  background-repeat: no-repeat; /* Nem ismétlődik */
  background-position: center; /* Középen helyezkedik el **/
  width: 100%; /* Teljes szélesség */
  height: 100vh; /* Teljes magasság (a viewport magassága) */
  }
  	.middle {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
	}
	.textstyle {
  position: relative;
  color: white;
text-shadow: 5px 5px 7px black;
  font-family: "Courier New", Courier, monospace;
  font-size: 17px;
  font-weight: bold;
}
	hr {
  margin: auto;
  width: 70%;
}
	.iframe	{
		width: 115%;
		position:relative;
		top: 10%;
		right: 20%;
}