/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color."
   Predefined color names include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. transparent is also a valid value. */

/* setup */
body {
  background-image: url("Backgrounds/hcosky1.png");
  background-repeat: no-repeat;
  background-size: cover;
  color: black;
  font-family: Verdana;
  font-size: 25;
  overflow-x: hidden;
}
.full-width-element {
    width: 100vw;
}
h1 {
    text-align: center;
    font-size: 4vh;
    margin: 2vh;
    padding: 2vh;
    border-style: outset;
    background-color: white;
    color: blue;
}
h2 {
    color: red;
    background-color: white;
    text-align: center;
    font-size: 2vh;
    margin: 2vh;
    padding: 2vh;
    border-style: outset;
    position: absolute;
    left: 1vw;
    top: 150vh;
}
p {
    color: black;
}
p1 {
    color: blue;
    background-color: white;
    text-align: center;
    font-size: 2vh;
    margin: 2vh;
    padding: 3vh;
    border-style: outset;
    position: absolute;
    left: 1vw;
    top: 157vh;
}
a {
    color: blue;
}

/* top, FEATURE IMAGE DIMENSIONS HERE */
#featuredimage {
    position: absolute;
    left: 37.2vw;
    top: 13vh;
    width: 25vw;
    height: 25vh;
}
#screen {
    position: absolute;
    left: 34.5vw;
    top: 12vh;
    width: 30vw;
    height: 30vh;
}
#wipe {
  position: absolute;
  left: -35vw;
  top: -13vh;
  width: 170vw;
  height: 120vh;
  opacity: 1.0;
}

/* characters */
#henry {position: absolute; width: 32vw; height: 32vh;}
#jake {position: absolute; width: 17vw; height: 17vh;}
#yan {position: absolute; width: 15vw; height: 15vh;}
#greenio {position: absolute; width: 11vw; height: 11vh;}
#blank {position: absolute; width: 15vw; height: 15vh;}

/* icons */
#icon_art {position: absolute;}
#icon_anim {position: absolute;}
#icon_games {position: absolute;}
#icon_archive {position: absolute;}
#icon_stats {position: absolute;}
#icon_update {position: absolute;}
#icon_write {position: absolute;}
#icon_under {position: absolute;}
#icon_idk {position: absolute;}

/* bubbles */
.update_div {
  position: absolute;
  left: 68vw;
  top: 47vh;
  padding: 10px;
}

.update_text {
  position: absolute;
  text-align: left;
  color: red;
  font-size: 0.8vw;
  left: 0.3vw;
  top: 0.5vh;
  width: 12vw;
}

#update_box {
  position: absolute;
  left: -5vw;
  top: -7vh;
  padding: 10px;
  width: 24vw; height: 24vh;
}

#hello_box {
  position: absolute;
  width: 15vw;
  height: 15vh;
  left: 42.5vw;
  top: 40.5vh;
}

.digital {
  position: absolute;
  left: 73vw;
  top: 0.5vh;
  font-size: 4vh;
  width: 15vw;
  margin: 5vh;
  text-align: center;
}

#clockface {
  position: absolute;
  left: 74.7vw;
  top: -0.7vh;
  width: 17vw;
  height: 17vh;
}

/* decoration */
#shad1 {
    position: absolute;
    left: 11vw;
    top: 82vh;
    width: 4vw;
    height: 4vh;
}
#shadd2 {
    position: absolute;
    left: 20vw;
    top: 90vh;
    width: 5vw;
    height: 5vh;
}
#shad3 {
    position: absolute;
    left: 75vw;
    top: 90vh;
    width: 5vw;
    height: 5vh;
}
#shad4 {
    position: absolute;
    left: 87vw;
    top: 82vh;
    width: 4vw;
    height: 4vh;
}
#shad5 {
    position: absolute;
    left: 45vw;
    top: 65vh;
    width: 10vw;
    height: 10vh;
}
#shad6 {
    position: absolute;
    left: 78vw;
    top: 65vh;
    width: 10vw;
    height: 10vh;
}

/* bottom */
#logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 1.3vh;
    width: 45%;
}
.main_menu_bgm {
    position: absolute;
    left: 43vw;
    top: 100vh;
}
#neocities{
    position: absolute;
    left: 2vw;
    top: 142vh;
    width: 16vw;
    height: 9vh;
}
#henstudios1{
    position: absolute;
    left: 19.5vw;
    top: 142vh;
    width: 16vw;
    height: 9vh;
}
#henstudios2{
    position: absolute;
    left: 37vw;
    top: 142vh;
    width: 7vw;
    height: 9vh;
}
#henstudios3{
    position: absolute;
    left: 46vw;
    top: 142vh;
    width: 21vw;
    height: 9vh;
}
#henstudios4{
    position: absolute;
    left: 3vw;
    top: 112.5vh;
    width: 20vw;
    height: 26vh;
}
#notfound {
    position: absolute;
    left: 40vw;
    top: 40vh;
    width: 54vw;
    height: 12vh;
}