@import url('https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Quintessential&display=swap');

 body {
background-image: url("https://wallpapers.com/images/hd/olive-greenaesthetic-desktop-fancy-pattern-vsyop0z466fzpbth.jpg");
background-position: center;
display: flex;

}
.blueberry {
 width: 1200px;
 margin: 0px auto;
 display: grid;
 grid-gap: 10px;
 background-clip: padding-box;
 padding: 15px;
}

header {
 grid-row: 1 / 2;
 grid-column: 1 / 4;
 display: flex;

}

 nav {
  grid-row: 2 / 4;
  grid-column: 1 / 2;
  text-align: center; 
  
}

nav li {
border: 2px #e09f4f solid;
border-radius: 10px;
padding: 3px;
background: #ffbf70;
background: linear-gradient(0deg, rgba(255, 191, 112, 1) 0%, rgba(247, 233, 188, 1) 100%);
}

nav a { color: #9e6c2e; }
nav h2 { font-family: "Quintessential", serif; font-weight: 400; font-style: normal; }
nav ul { list-style: none; }

nav .inside {
  background-color: white;
  border: 5px solid;
  border-image: url("https://i.ibb.co/LYSfp26/C9487459-587-E-4-EDC-89-C1-2-B2-F0804-F5-A7.png") 35 round;
  background-clip: padding-box; 
  margin-bottom: 10px;
  padding: 7px;
}
.sidebar-section:not(:last-child) {
  margin-bottom: 1.5em;
}

hr {
  border: none;
  border-top: 3px double #333333;
  color: #333333;
  overflow: visible;
  text-align: center;
  height: 5px;
}

hr::after {
  background: white;
  content: "☘";
  padding: 0 4px;
  position: relative;
  top: -13px;
}

.blueberry ul {
margin: 0;
padding: 0;

}

.blueberry li {
  margin: 10px 0;

}

main {
grid-row: 2 / 3;
grid-column: 2 / 3;
height: min-content;
display: flex;
flex-wrap: wrap;
}

main > * {  
  flex: 1 1 33%
  
}

main .one {
  background-color: white;
  border: 5px solid;
  border-image: url("https://i.ibb.co/LYSfp26/C9487459-587-E-4-EDC-89-C1-2-B2-F0804-F5-A7.png") 35 round;
  background-clip: padding-box;
  margin-bottom: 10px;
  margin-right: 10px;
  padding: 7px;
  
}
  
.one h2 { text-align: start;  font-family: "Quintessential", serif; font-weight: 400; font-style: normal;  }
.one p { text-align: center; }

main .two {
  background-color: white;
  border: 5px solid;
  border-image: url("https://i.ibb.co/LYSfp26/C9487459-587-E-4-EDC-89-C1-2-B2-F0804-F5-A7.png") 35 round;
  background-clip: padding-box;
  margin-bottom: 10px;
  padding: 7px;
  text-align: left;
}
  
  .two li { margin-left: 15px; }
  .two h2 {   font-family: "Quintessential", serif; font-weight: 400; font-style: normal; }
  
main .three {
  background-color: white;
  border: 5px solid;
  border-image: url("https://i.ibb.co/LYSfp26/C9487459-587-E-4-EDC-89-C1-2-B2-F0804-F5-A7.png") 35 round;
  background-clip: padding-box; 
  margin-bottom: 10px;
  padding: 7px;

  
}

.contents {
  display: flex;
  gap: 10px;
}

.separate {
flex: 1;
padding: 5px;
border: black 2px solid;

}

side {
 grid-row: 2 / 3;
 grid-column: 3 / 4;
 height: min-content;

  
}

side .inside {
  background-color: white;
  border: 5px solid;
  border-image: url("https://i.ibb.co/LYSfp26/C9487459-587-E-4-EDC-89-C1-2-B2-F0804-F5-A7.png") 35 round;
  background-clip: padding-box;
  text-align: center;
  margin-bottom: 10px;
  padding: 7px;

}

.socials ul { list-style: none; }
.socials h2 { font-family: "Quintessential", serif; font-weight: 400; font-style: normal; }

.moon {
background-color: #211e2e;
border: black 2px solid;
height: 160px;
}

label,
textarea {
  font-size: 0.8rem;
  letter-spacing: 1px;
}

textarea {
  padding: 7px;
  max-width: 100%;
  line-height: 1.5;
  border-radius: 5px;
  border: 1px solid #cccccc;
  box-shadow: 1px 1px 1px #999999;
}

label {
  display: block;
  margin-bottom: 10px;
}

side .inside img {
padding-right: 5px;
}

.owl img {
  position: absolute;
  margin-top: 420px;
  z-index: 1;
  left:950px;
  
}

/* DEMO-SPECIFIC STYLES */
.typewriter h1 {
  color: #fff;
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid orange; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em; /* Adjust as needed */
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
      font-family: "Homemade Apple", cursive;
  font-weight: 400;
  font-style: normal;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: white }
}