/* 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: rgb(0,0,1);
  background-image: url(https://files.catbox.moe/3muv1r.gif);
  background-size: 750px 750px;
  font-family: sans-serif;
  color: #FFFFFF;
  /* idk why but the text align doesn't work here
  like how???*/
}
button {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid rgb(200,200,0);
  background-color: rgb(0,217,217);
  color: rgb(100,0,0);
  box-shadow: 1px 1px 2px #0000C8;
  border-radius: 10px;
  padding: 3px 10px;
  cursor: pointer;
}

.wrapper {
  height: 100px;
  width: 300px;
  display: flex;
  gap: 10px;
  text-align: center;
  font:
    28px "Marker Felt","Zapfino",cursive;
  border: 6px solid mediumturquoise; 
}
.bigWrapper {
  height: 1000px;
  width: 500px;
  display: flex;
  gap: 10px;
  border: 3px solid purple;
}

div {
  flex: 1;
}
.boxBig {
  background-color: rgb(177,156,217);
  outline: 2px solid darkred;
  color: rgb(0,0,0);
}
.boxLeft {
  background-color: rgb(245,130,130);
  outline: 2px solid darkred;
  /* text-shadow: 3px 3px purple; */
}
.boxRight {
  background-color: rgb(191,161,222);
  outline: 4px dashed #6e1478;
  color: rgb(255,255,255);
  text-decoration: underline;
  text-decoration-style: wavy;
  text-decoration-color: #8f8;
  text-shadow: 2px 2px 3px black;
}