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


@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {


  background-color: #e8d1c5;
  color: black;
  font-size: calc(12 * (100vw / 1200));;
  font-family: 'Space Mono', static;
  background-image: url('skybg.png');
}

#box1 {
  display: flex;
  width: calc(1300 * (100vw / 1920));
  height: calc(800 * (100vw / 1920));
  position: absolute;
  place-self: center;
  inset: 0;

}

#box2 {
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACRklEQVR4AezagW6DMAxFUbb//+eNSpOamMjeI4+2wJWKSohjkoMVUanfy7L8cPgMHqCrJx+XAKAuyb88gP5BuL5GoF9r8vZYm92n7bvDebf4tRHXvF56fkagz17OZAFAZbJ8AKC5j9w7Ao3vpTFp7L96u1p/1z8C7QJoaAKAal5lNKAlkRYwAk3fs5ZliXdQ4+P4d7fV+afxI9B3L/DU9wfU/PgA/QDQdA8xz+8d6abWR4WaHxmggJoFzOn2VGj12z1OcWpPisl2tKv7q+tJp7AHNE14905AzRUA6AlAR3uWedpT6Q6dHxU69Wy2gwHdmkxdAXSKbzv4CNDqvS7uYUe3q/lsVSauHAE6MZ3zDwXU/AwBBdQsYE5HhQJqFjCno0JvBGpe6mvSUaFmZ0ABNQuY01GhgJoFzOmoUEDNAuZ0VCigZgFzOioUULOAOd3VKtTMo6cDVDdLRwCa8uidgOpm6QhAUx69E1DdLB0BaMqjdwKqm6UjjgCt/qtU/dfI3V/NJwVSO48AVedwqXhAzY8T0BOAxj3QPOXpdHF+0wnbBFRoq2E4B9SA2KYAtNUwnO8BVd/rDt2z/mFQ3V9dT3rLPaBpwrt3AmquAEA/ALTak8xTfHm6qfVRoebnBSigZgFzulGFqnuIGm9ewnQ6df6P+PboJjAC7QJoaAKAal5lNKAlkRYwAo2/bWPG2H/1drX+rn8E2gXQ0AQA1bzKaEBLIi1gBNq+Yz3OY8bHtTsd1fq7/hFoF0BDEwBU8yqjAS2JtIBfAAAA///NIDr6AAAABklEQVQDAJdGQGRYRKlFAAAAAElFTkSuQmCC') 28 /  28px / 0 round;
  border-width:  calc(28 * (100vw / 1920));
  border-image-width: calc(28 * (100vw / 1920));
  border-style:  solid; 
  margin-right: auto;
  overflow-y: auto;
  width: calc(180 * (100vw / 1920));
  height: calc(800 * (100vw / 1920));
  background-color: #eddcd2;
  text-align: center;
}

#box3 {
  margin-left: auto;
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACRklEQVR4AezagW6DMAxFUbb//+eNSpOamMjeI4+2wJWKSohjkoMVUanfy7L8cPgMHqCrJx+XAKAuyb88gP5BuL5GoF9r8vZYm92n7bvDebf4tRHXvF56fkagz17OZAFAZbJ8AKC5j9w7Ao3vpTFp7L96u1p/1z8C7QJoaAKAal5lNKAlkRYwAk3fs5ZliXdQ4+P4d7fV+afxI9B3L/DU9wfU/PgA/QDQdA8xz+8d6abWR4WaHxmggJoFzOn2VGj12z1OcWpPisl2tKv7q+tJp7AHNE14905AzRUA6AlAR3uWedpT6Q6dHxU69Wy2gwHdmkxdAXSKbzv4CNDqvS7uYUe3q/lsVSauHAE6MZ3zDwXU/AwBBdQsYE5HhQJqFjCno0JvBGpe6mvSUaFmZ0ABNQuY01GhgJoFzOmoUEDNAuZ0VCigZgFzOioUULOAOd3VKtTMo6cDVDdLRwCa8uidgOpm6QhAUx69E1DdLB0BaMqjdwKqm6UjjgCt/qtU/dfI3V/NJwVSO48AVedwqXhAzY8T0BOAxj3QPOXpdHF+0wnbBFRoq2E4B9SA2KYAtNUwnO8BVd/rDt2z/mFQ3V9dT3rLPaBpwrt3AmquAEA/ALTak8xTfHm6qfVRoebnBSigZgFzulGFqnuIGm9ewnQ6df6P+PboJjAC7QJoaAKAal5lNKAlkRYwAo2/bWPG2H/1drX+rn8E2gXQ0AQA1bzKaEBLIi1gBNq+Yz3OY8bHtTsd1fq7/hFoF0BDEwBU8yqjAS2JtIBfAAAA///NIDr6AAAABklEQVQDAJdGQGRYRKlFAAAAAElFTkSuQmCC') 28 /  28px / 0 round;
  border-width:  calc(28 * (100vw / 1920));
  border-style:  solid; 
  border-image-width: calc(28 * (100vw / 1920));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  width: calc(1000 * (100vw / 1920));
  height: calc(800 * (100vw / 1920));
  text-align: center;
  background-color: #eddcd2;
}

#logo {
  width: calc(250 * (100vw / 1920));
  height: calc(250 * (100vw / 1920));
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding: calc(50 * (100vw / 1920));
}