/* 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-image: url(background.png);
  color: black;
  font-family: "Roboto Mono";
  background-repeat: repeat;
  background-size: contain;
}
a {
  color: #ff7ca2;
}
.roboto-mono {
  font-family: "Roboto Mono", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}
.container {
      background-color: white;
    width: 900px;
    height:780px;
                    border: 5px double #ff7ca2;
                    border-radius: 20px;
                    margin: auto;
                              border-top-style: none;
                                                                                border-top-left-radius: 0px ;
                   border-top-right-radius: 0px ;
}
.grid {
    display: grid;
  grid-template: 20px / auto auto auto;
  background-color: transparent;
  width: 900px;
  height: auto;
}
.banner {
               background-size: 100% 100%;
               background-repeat: no-repeat;
        background-position: center;
        background-image: url("banner.png");
        width: 900px;
        height:150px;
        margin: auto;
                          border: 5px double #ff7ca2;
                    border-radius: 20px;
                                                  border-bottom-left-radius: 0px ;
                   border-bottom-right-radius: 0px ;
                    
}
.box1 {
        background-color: white;
    width: 250px;
        height:auto;
                    border: 8px double #a2bb99;
                    border-radius: 20px;
                                        margin: auto;
}
.box2 {
        background-color: white;
    width: 300px;
        height:auto;
                    border: 8px double #a2bb99;
                    border-radius: 20px;
                                        margin: auto;
}
.box3 {
        background-color: white;
    width: 250px;
        height:auto;
                    border: 8px double #a2bb99;
                    border-radius: 20px;
                    margin: auto;
}
.box4 {
        background-color: #fff0f4;
    width: 90%;
        height:auto;
                    border: 4px ridge #ff7ca2;
                    margin: auto;
                    text-align: center;
}
.box5 {
          background-color: #fff0f4;
    width: 90%;
        height:200px;
                    border: 4px ridge #ff7ca2;
                    margin: auto;
                    text-align: center;
                    overflow: scroll;
}
.my-button {
  background-color: #ff7ca2; /* Green background */
  border: 5px ridge #a2bb99; /* Remove default border */
  color: white; /* White text */
  padding: 15px 32px; /* Some padding */
  text-align: center; /* Center the text */
  text-decoration: none; /* Remove underline for anchor tags styled as buttons */
  display: inline-block; /* Make it behave like an inline-block element */
  font-size: 16px; /* Increase font size */
  margin: 4px 2px; /* Add some margin */
  cursor: pointer; /* Change mouse cursor to a hand on hover */
  border-radius: 8px; /* Rounded corners */
  transition-duration: 0.4s; /* Smooth transition for hover effects */
  width: 98%;
}

.my-button:hover {
  background-color: #f6aabf; /* Darker green on hover */
}
  
  .about {
    width: 500px;
    height: auto;
      border: 30px solid transparent;
  padding: 10px;
  border-image: url("border.png") 30 round;
    border-image-repeat: repeat;
  border-image-slice: 20;
  margin: auto;
  }
  .box6 {
  border: 30px solid transparent;
  padding: 10px;
  border-image: url("border.png") 30 round;
  border-image-repeat: repeat;
  border-image-slice: 20;
  width: 250px;
  height: 130px;
  margin: auto;
  float: right;
}
.imagebox {
  margin-right: auto;
    border: 30px solid transparent;
  padding: 10px;
  background-image: url("stocking.gif");
  border-image: url("border2.png") 30 round;
  border-image-repeat: repeat;
    border-image-slice: 20;
  width: 50px;
  height: 50px;
                 background-size: 117% 117%;
                 background-repeat: no-repeat;
                 background-position: center;
                 float: left;
                                    display: inline-block;
}
.acontainer {
  width: 950px;
  height: 470px;
  background-color: white;
  margin: auto;
  border: 30px solid transparent;
  padding: 10px;
  border-image: url("border2.png") 30 round;
  border-image-repeat: repeat;
  border-image-slice: 20;
  border-radius: 30px;
}
.grid2 {
    display: grid;
  grid-template: 20px / auto auto auto;
  background-color: transparent;
  width: 950px;
  height: auto;
}
#pagedoll {
  position: fixed; /* Keeps the pagedoll in place when scrolling */
  bottom: 0;      /* Positions the pagedoll at the bottom of the screen */
  left: 0;        /* Positions the pagedoll at the left of the screen */
  /* Optional properties */
  width: 375px;   /* Adjusts the size of the pagedoll */
  height: auto;   /* Maintains the image's aspect ratio */
  z-index: 100;   /* Ensures the pagedoll appears above other content */
}

.icontainter {
    width: 550px;
  height: 470px;
  margin: auto;
    padding: 10px;
  border: 30px solid transparent;
  border-image: url("border3.png") 30 round;
  border-radius: 70px;
                 background-size: 100% 100%;
                 background-repeat: no-repeat;
                 background-position: center;
  background-image: url("white.png");
  text-align: center;
}
.scrolli {
  background-color: #ffd9f1;
  overflow: auto;
  border: 2px solid #f1cad9;
  width: 500px;
  height: 100px;
  margin: auto;
}
#pagedolls {
  position: fixed; /* Keeps the pagedoll in place when scrolling */
  bottom: 0;      /* Positions the pagedoll at the bottom of the screen */
  left: 100px;        /* Positions the pagedoll at the left of the screen */
  /* Optional properties */
  width: 355px;   /* Adjusts the size of the pagedoll */
  height: auto;   /* Maintains the image's aspect ratio */
  z-index: 100;   /* Ensures the pagedoll appears above other content */
}
  
.sep {
        background-color: transparent;
    width: 100%;
        height:auto;
                    border: 5px solid transparent;
                    margin: auto;
}
.welc {
         background-color: white;
    width: 200px;
        height:auto;
                    border: 5px groove #ff7ca2;
                    margin: auto;
                    text-align: center;
}







.mobile {
      background-color: white;
    width: 90%;
    height:1050px;
                    border: 5px groove #ff7ca2;
                    border-radius: 2px;
                    margin: auto;
                              border-top-style: none;
                                                                                border-top-left-radius: 0px ;
                   border-top-right-radius: 0px ;
                                                                     border-bottom-left-radius: 20px ;
                   border-bottom-right-radius: 20px ;
}
.banner2 {
               background-size: 100% 100%;
               background-repeat: no-repeat;
        background-position: center;
        background-image: url("banner2.png");
        width: 90%;
        height:130px;
        margin: auto;
                          border: 5px groove #ff7ca2;
                    border-radius: 20px;
                                                  border-bottom-left-radius: 0px ;
                   border-bottom-right-radius: 0px ;
                   background-color: white;
                    
}
.mobileb {
        background-color: #ffc6d5;
    width: 90%;
        height:auto;
                    border: 5px groove #a2bb99;
                    margin: auto;
}