/* 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." */
   
html {
    overflow: scroll;
    overflow-x: hidden;
}

body {
  background-color: white;
  background-image: url('https://i.imgur.com/VtQKqpF.jpeg');
  color: black;
  font-family: Verdana;
  margin-left: 30%;
  margin-right: 30%;
}

.mytitle {
  font-family: "homemadeapple-regular";
  font-size: 3rem;
  color: white;
  font-weight: bold;
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
}

.flex-container {
  display: flex;
  justify-content: space-between;
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
  max-height: 15.8rem;
  flex-direction: row;
  height: 15.8rem;
}

.box1 {
  background: white;
  width: 25%;
  padding: 0.5rem;
  border-radius: 2rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  text-align: center;
}

.box2 {
  background: white;
  background-image: url('https://i.imgur.com/7w0xHBa.jpeg');
  background-size: contain;
  background-size: 50%;
  width: 50%;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
  padding: 0.5rem;
  border-radius: 2rem;
  height: 14.8rem;
  max-height: 14.8rem;
  min-height: 14.8rem;
  overflow: auto;
}

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

.box3 {
  background: white;
  width: 25%;
  padding: 0.5rem;
  border-radius: 2rem;
  background-image: url("https://i.imgur.com/twYdzja.jpeg");
  background-size: 200%;
}

.kitty {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

.myname {
  font-family: "homemadeapple-regular";
  color: #e5a4ff;
  font-size: 1.5rem;
  filter: drop-shadow(0.2px 0.2px 0 black) drop-shadow(-0.2px 0.2px 0 black) drop-shadow(0 -0.2px 0 black) drop-shadow(0.2px 0 black);
  line-height: .5rem;
  font-weight: bold;
  text-decoration: #e5a4ff wavy underline;
}

.aboutme {
  font-family: "delius-regular";
  line-height: .8rem;
}

.moreabout {
  font-family: "homemadeapple-regular";
  color: white;
  font-size: 1.5rem;
  filter: drop-shadow(1.5px 1.5px 0 #572580) drop-shadow(-1.5px 1.5px 0 #572580) drop-shadow(0 -1.5px 0 #572580) drop-shadow(1.5px 0 #572580);
  font-weight: bold;
  line-height: .5rem;
  text-align: center;
}

.moreaboutbody {
  font-family: "delius-regular";
  text-align: justify;
  line-height: 1.2rem;
  filter: drop-shadow(2px 2px 0 white) drop-shadow(-2px 2px 0 white) drop-shadow(0 -2px 0 white) drop-shadow(2px 0 white);
  font-weight: bold;
}

.skroll {
  font-family: "delius-regular";
  line-height: .3rem;
  text-align: right;
  filter: drop-shadow(2px 2px 0 white) drop-shadow(-2px 2px 0 white) drop-shadow(0 -2px 0 white) drop-shadow(2px 0 white);
  font-weight: bold;
  color: #752580;
  margin-bottom: 2rem;
}

.dir {
  font-family: "homemadeapple-regular";
  color: black;
  font-size: 1.3rem;
  margin-bottom: -1rem;
  margin-top: 0.4rem;
}

.dirstuff {
  font-family: "delius-regular";
  line-height: 1rem;
  margin-top: -1rem;
}

.visitor {
  font-family: "homemadeapple-regular";
  font-size: 0.7rem;
  font-weight: bold;
  margin-top: -0.1rem;
}

.feeling {
  font-family: "delius-regular";
  line-height: 1rem;
  margin-top: -0.3rem;
  font-weight: bold;
  color: #752580;
}

.grid-container {
  display: grid;
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
  grid-template-columns: auto auto auto auto;
  margin-top: 0.5rem;
}

.grid1 {
  background: white;
  padding: 0.5rem;
  border-radius: 2rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  text-align: center;
  width: 30%;
}

.grid2 {
  background: white;
  padding: 0.5rem;
  border-radius: 2rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  text-align: center;
  width: 20%
}

.grid3 {
  background: white;
  padding: 0.5rem;
  border-radius: 2rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  text-align: center;
  width: 50%;
}

.grid4 {
  background: white;
  padding: 0.5rem;
  border-radius: 2rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  text-align: center;
}