/*Universal Rules*/
.white {
  color: white;
}

h1 {
  text-align: center;
  color: white;
}
.center-text {
  text-align: center;
}

/*Beggining of page*/
.main-page-title {
    text-align: center;
}

.about-me-background-color {
  background: image("images/color-bricks-background.gif");
}

body {
  font-family: sans-serif;
}
.marquee-text {
  font-size: 50px;
  color:rgb(255, 0 ,127)
}
blockquote {
  color: white;
  font-size: 90%;
}

.music-note {
  width: 40%;
  display: block;
  margin: auto auto;
}


.update-header {
  text-align: center;
  color: white;
}

.updates-div {
  border: 2px solid blue;
  margin: auto auto;
  padding: 5px 5px;
  width: fit-content;
  height: fit-content;
  color: antiquewhite;
}

.updates-div ul, li {
  margin-bottom: 1px;
  margin-top: 1px;
  font-style: italic;

}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
}


.about-me-main-div {
  background-color: aqua;
}

.aqua-background {
  background-color: aqua;
}

.chill-survey-div {
  margin-top: 40px;
  color: chocolate;
}

.chill-survey-notice {
  text-align: center;
  font-size: 50px;
}


.main-page-div {
  /*background-color:darkred;*/
  background: repeat url("images/bricks-background-2.gif");
  border: ridge 10px white;
  margin: auto auto;
  width: 700px;
  max-width: 700px;
}



/* About me section */
.about-me-div {
  width: 30%;
  height: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -180px;
  margin-bottom: 50px;

}
.about-me-div p {
  text-align: center;
}
.about-me-div img {
  width: 50%;
  height: 50%;
  display: block;
  margin: auto;
}

.flex-container-about-me {
  width: 60px;
  height: 60px;
  display: flex;
}

/* Gaming corner section */
.gaming-corner-div {
  width: 30%;
  height: 30%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
  margin-bottom: 50px;
}

.flex-container {
  position: relative;
  left: -45px;
}

.gaming-corner-div img {
  width: 50%;
  height: 50%;
  display: block;
  margin: auto;
}

.bookmark-gif {
  width: 100px;
  height: 150px;
  position: relative;
  left: -40px;
  top: -50px;

}

.www-gif {
  position: relative;
  width: 100px;
  height: 100px;
  top: 600px;
  left: -150px;
}

.hot-air-ballon-gif {
  position: relative;
  width: 100px;
  height: 100px;
  top: -90px;
  left: 450px;
}

.welcome-gif {
  width: 150px;
  height: 150px;
  position: relative;
  left: 340px;
  top: 600px;
}

.absolute-position {
  position: absolute;
}

.flex-container {
  display: flex;
  width: fit-content;
  margin: 10px auto;
}

.flex-container img {
  margin: 0 0;
  width: 25px;
}

.guestbook-div {
  border-radius: 10px;
  max-width: fit-content;
  height: fit-content;
  display: block;
  position:absolute;
  left: 0px;
  top: 280px;



}

.guestbook {
  height: 550px;
  width: 200px;
}

.guestbook-div img {
  display: block;

}


/*Music Zone Corner */
.music-zone-div {
  width: 30%;
  height: 30%;
   margin-left: auto;
  margin-right: auto;
  margin-top: -10px;
  margin-bottom: 50px;
}

.flex-container-music-zone {
  height: 30px;
  width: 30px;
  display: flex;
  position: relative;
  top: 15px;
  left: -15px;
}


.white-divider {
  border: solid 1px white;
  margin: 10px 0;
}

.white-font {
  color: white;
}
.center {
 margin: 0 auto;
}

.inline {
  display: inline;
}

.width-50 {
  width: 50%;
}

.solid-black-border {
  border: solid 5px black;
}

.textarea-selector {
  display: block;
}

.front-page-link-below-icon {
  background-color: gray;
  width: fit-content;
  margin: 10px auto;
  padding: 5px 5px;
  border: dotted 5px white;
  border-radius: 10px;
}



.chill-link {
  color:coral
}

/* Chill Survey */
.chill-survey-div {
  border: solid 5px black;
  max-width: 40%;
  margin: 0 auto;
  color: black;
  padding: 10px;
  border-radius: 10px;
}

label {
  display: block;
  margin-top: 20px;
}

.submit-button {
  display: block;
  width: 10%;
  height: 15%;
  margin: 0 auto;

}

.chill-survey-html {
  background-color:goldenrod;
}

.yaya {
  font-size: 50px;
  text-align: center;
  color: pink;
}

/* My gaming corner page */

.currently-playing-div {
  border: solid 4px black;
  max-width: 50%;
  margin: auto auto;
  align-content: center;
  padding: 5px 5px;
}

.currently-playing-div h2 {
  text-align: center;
}

.currently-playing-div img {
  width: 60%;
  height:60%;
  display: block;
  margin: auto auto;
}

.currently-playing-div p {
  text-align: center;
}

.currently-playing-div .divider {
  border: 2px solid black;
}

.currently-playing-div a {
  display: block;
  text-align: center;
}