/* 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 {
  background-color: white;
  color: black;
  background-image: url("images/witchhat-background.png");
	/* background-blend-mode: darken; */
	background-repeat: no-repeat;
	background-size:cover;
  font-family: Verdana;
}
button {
  background-color: blue;
  color: white;
  font-family: Verdana;
}

/* 1. The parent container turns on Flexbox */
.container {
  display: flex;       /* Aligns items side-by-side */
  gap: 20px;          /* Adds space between the boxes */
  width: 80%;        /* Takes up full width of the screen */
 }

/* Styling shared by both boxes */
.box {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
        }

        /* 2. Control the size of individual boxes */
.large-box {
  flex: 7;            /* Takes up 7 parts of the available space (70%) */
}

.small-box {
  flex: 3;            /* Takes up 3 parts of the available space (30%) */
}

.theinfo {
  background-color: white;
}