/* 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: #c81d2d;
  background-image: radial-gradient( rgb(155 20 30 / 0%) 65%, rgb(155 20 30 / 75%) 100% ), linear-gradient( 90deg, rgb(200 29 45 / 100%) 40%, rgb(200 29 45 / 0) 60% ),
                    url("/HorsePattern1.png"), url("/HorsePattern2.png"), url("/HorsePattern1.png"), url("/HorsePattern1.png");
  background-repeat: no-repeat, no-repeat, repeat, repeat, repeat, repeat; /* Or omit this line as 'repeat' is the default */
  background-size: cover, 100%, 17.5%, 10%, 15%, 10%;
  background-position: 0, 0, 3.75%, 3.75%, 0, 0;
  background-attachment: fixed, fixed, scroll, scroll, scroll, scroll ;
  color: #fff833;
  font-family: Helvetica;
}

img {
  width: 37.5%;
  height: 75%;
  position: fixed;
  top: 50%;
  left: 75%;
  transform: translate(-50%, -50%)
}

.shadow {
  background-image: radial-gradient( rgb(0 0 0 / 75%) 10%, rgb(0 0 0 / 0%) 70% );
  width: 25%;
  height: 10%;
  position: fixed;
  top: 82.5%;
  left: 75%;
  transform: translate(-50%, -50%)
}

.bold {
  font-size: 50px;
}

.HeaderBox {
  display: flex;
  align-items: center;
  justify-content: space-around;
  
   color: black;
  text-align: center;
  width: 45%; /* Sets the width of the box */
  height: 17.5%; /* Sets the height of the box */
  background-color: #f8fda2; /* Sets a background color */
  border-radius: 10% / 25%;
  box-shadow:
  inset 4px 4px 25px rgb(235 255 205 / 0.6),
  inset -4px -4px 25px rgb(50 25 0 / 0.6);
  box-sizing: border-box;
  position: Fixed;
  top: 10%;
  left: 25%;
  transform: translate(-50%, -50%)
}

.BodyBox {
  display: flex;
  align-items: center;
  justify-content: space-around;
  
   color: black;
  text-align: center;
  width: 45%; /* Sets the width of the box */
  height: 67.5%; /* Sets the height of the box */
  background-color: #edf6e9; /* Sets a background color */
  border-radius: 15% 15% 25% 15%;
  box-shadow:
  inset 4px 4px 25px rgb(255 255 255 / 0.6),
  inset -4px -4px 25px rgb(0 0 0 / 0.6);
  box-sizing: border-box;
  position: absolute;
  top: 55%;
  left: 25%;
  transform: translate(-50%, -50%)
}

.FooterBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
   color: black;
  text-align: start;
  width: 45%; /* Sets the width of the box */
  height: 7.5%; /* Sets the height of the box */
  background-color: #f8fda2; /* Sets a background color */
  border-radius: 5% / 35%;
  box-shadow:
  inset 4px 4px 25px rgb(235 255 205 / 0.6),
  inset -4px -4px 25px rgb(50 25 0 / 0.6);
  box-sizing: border-box;
  position: fixed;
  top: 95%;
  left: 25%;
  transform: translate(-50%, -50%)
}

.BlogListContainer {
    color: black;
  width: 45%; /* Sets the width of the box */
  height: 67.5%; /* Sets the height of the box */
  box-sizing: border-box;
  position: absolute;
  overflow-y: scroll;
  top: 55%;
  left: 25%;
  transform: translate(-50%, -50%)
}

.BlogListBox {
  display: flex;
  align-items: center;
  justify-content: space-around;
  
   color: black;
  text-align: center;
  width: 100%; /* Sets the width of the box */
  height: 30%; /* Sets the height of the box */
  background-color: #edf6e9; /* Sets a background color */
  border-radius: 5% / 40%;
  margin: 5% 0;
  box-shadow:
  inset 4px 4px 25px rgb(255 255 255 / 0.6),
  inset -4px -4px 25px rgb(0 0 0 / 0.6);
  box-sizing: border-box;
}

.styled {
  border: 0;
  font-family: Trebuchet MS;
  font-size: 32px;
  padding: 1% 2%;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 1px black;
  border-radius: 15%;
  background-color: #7d510f;
  background-image: linear-gradient(
    to top left,
    rgb(0 0 0 / 0.2),
    rgb(0 0 0 / 0.2) 30%,
    transparent
  );
  box-shadow:
    inset 4px 4px 6px rgb(255 255 255 / 0.6),
    inset -4px -4px 6px rgb(0 0 0 / 0.6);
}

.styled:hover {
  color: black;
  background-color: #fff4a1;
}

.styled:active {
  box-shadow:
    inset -4px -4px 6px rgb(255 255 255 / 0.6),
    inset 4px 4px 6px rgb(0 0 0 / 0.6);
}