/* 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." */
   

body, main, article, ul, li, div, img, a, button, span, h1, h2, h3, h4, h5, h6, details, summary, fieldset {
    box-sizing: border-box;}
   
html{
  background-image: url('webpagebg1.png'); /* Path to your image */
  background-size: cover;   /* Make it cover the whole screen */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center;  /* Center the image */
  }

body {
  color: white;
  font-family: Verdana;
  font-family: mondwest;
}

a {
  color: rgb(95, 144, 255); /* change this to any color you want */
}

img {
  margin: 10px auto;
  display: inline-block;
  position:static; /* takes it out of the normal flow */
  /*right: 700px;*/
  /*top: 600px;*/ /* adjust number to move vertically */
}

.pixel-art {
  float: left;
  image-rendering: optimizeSpeed;
  width: 85px; /* set desired size */
  height: auto; /* or set height too */
}


h1 {
  display: inline-block;
  text-align: center;
  padding: 1em;
  }
  
work {
  font-family: Verdana;
  text-align: center;
  color: yellow;
}

div {
    display: block;
}

.mainbox{
  background-color: blue;
  background-size: cover;   /* Make it cover the whole screen */
  background-repeat: no-repeat; /* Prevent tiling */
  background-position: center;  /* Center the image */
  text-align: center
  }

.box {
  margin: 30px auto; /* auto left & right margins */
  width: 1000px;
  height: 1000px;
  background-color: rgb(0,70,120);
  color: white;
  padding: 2em;
  border-radius: 10px; /* adjust the px value */
  border: 1rem solid;
  border-color: rgb(0,20,60);
}

.box2 {
  float: right;
  margin-left: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207, 232, 220);
  padding: 1em;
}

.title {
  flex-direction: row;
  width: 1100px;
  height: 120px;
  /* background-color: blue; */
  margin: 30px auto; /* auto left & right margins */
  /* padding: 2em; */
  align-items: center;
  justify-content: center;
}

.cbox {
  margin: 1px auto; /* auto left & right margins */
  width: 350px;
  height: 450px;
  padding: 1em;
}