body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main {
  display: flex;
}

.bg-image {
  /* The image used */
  background-image: url("images/image3.png");

  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

html, body {margin: 0; height: 100%; overflow: hidden}
body {
  overflow: hidden; /* Hide scrollbars */
}

.profile-picture {
  width: 100px;
  height: 100px;
  transform: translate(-62%, -166%);
  z-index: 4;
}
.profile-picturebg {
  width: 125px;
  height: 125px;
}
.profile-pictureimg {
  width: 100px;
  height: 100px;
  transform: translate(12.5%, 112.5%);
}

/* Position text in the middle of the page/image */
.header {
  background-color: rgb(7, 16, 0); /* Fallback color */
  background-color: rgba(7, 16, 0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -298%);
  z-index: 2;
  width: 97.4%;
  height: 124px;
  padding: 20px;
  text-align: center;
}

/* Position text in the middle of the page/image */
.other-text {
  background-color: rgb(7, 16, 0); /* Fallback color */
  background-color: rgb(7, 16, 0); /* Black w/opacity/see-through */
  color: white;
  font-weight: default;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(+22%, -34.75%);
  z-index: 2;
  width: 40%;
  height: 600px;
  padding: 20px;
  text-align: center;
}

/* Position text in the middle of the page/image */
.profile-text {
  background-color: rgb(7, 16, 0); /* Fallback color */
  background-color: rgba(7, 16, 0, 1); /* Black w/opacity/see-through */
  color: white;
  font-weight: default;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-88.5%, -34.75%);
  z-index: 2;
  width: 55%;
  padding: 20px;
  text-align: center;
  height: 600px;
}

/* Position text in the middle of the page/image */
.profilesubclass {
  background-color: rgb(177, 131, 29); /* Fallback color */
  background-color: rgba(177, 131, 29, 1); /* Black w/opacity/see-through */
  color: rgb(119, 86, 12);
  font-weight: default;
  border: 3px solid #77560c;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-48.85%, -45%);
  z-index: 3;
  width: 80%;
  text-align: center;
  height: 75%;
}

.profile-information {
  background-color: rgb(191, 143, 36);
  border: 3px solid rgb(158, 117, 28);
  position: absolute;
  top: 17.5%;
  left: 7.5%;
  width: 85%;
  height: 72.5%;
}

.about-me-text {
  text-align: left;
  transform: translate(3%, -8px);
}

.button-class {
			background-color: #4CAF50;
			/* Green */
			border: none;
			color: white;
			padding: 10px 20px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			cursor: pointer;
			border-radius: 4px;
		}



.divscord {
  color: green;
  background-color: transparent;
  width: 200px;
  transform: translate(268%, 220%);
}

.discord-button {
  width: 100%;
  height: 50%;
  height: auto;
  display: block;
}

.discord-button img {
  width: 100%;
  height: auto;
}

/* turn off ads */
.ad * {
  opacity: 0;
}

.ad {
  color: green;
  transform: translate(500px, -50px);
}

.ad img {
  width: 100%;
  height: auto;
}