html {
    background-image:url(/assets/background001.gif); /* bg image */
    background-repeat: no-repeat; /* makes bg image not repeat */
    background-size: 2000px 927px; /* makes bg filled in webpage*/
     font-family: 'courier new'; /* changes the font */
   
}

#star-border-box {
  
  height:770px; /* makes the border the size of the webpage */
  border: 50px solid transparent; /* needed to make star border */
  padding: 10px; /* Padding helps ensure content doesn't overlap the border */
  border-image: url("assets/stars-border.gif") 300 round; /* Apply the image border and size */
}

#main-section {
    background-color: #475cf5;
    border: aqua 5px groove;
    border-radius: 10px;
    position: absolute;
    left: 175px;
    top: 150px;
    padding: 15px;
    height: 660px;
    width: 1500px;
    margin: auto;
}

#welcome {
    background-color: #47D6F5;
    border: #00a8ff 5px groove; /* changes color and style and thickness of border */
    border-radius: 10px; /* changes the curvature of the border */
    position: absolute; /* allows you to move the element freely */
    text-align: center; /* centers text */
    align-content: center; /* also centers text but in a different way (dont ask me) */
    left: 150px; /* adjusts positioning */
    top: 60px; 
    padding: 15px; /* adds space around the outside to the context inside */
    padding-top: 1px;
    height: 75px; /* size of the box */
    width: 550px;
    margin: auto;
    h1 {color:#e9a9e0;}
    text-shadow: 3px 3px 3px #49869b;
}

#sidebar {
    background-color: #47D6F5;
    border: #00a8ff 5px groove; /* changes color and style and thickness of border */
    border-radius: 10px; /* changes the curvature of the border */
    position: absolute; /* allows you to move the element freely */
    text-align: center; /* centers text */
    align-content: center; /* also centers text but in a different way (dont ask me) */
    left: 950px; /* adjusts positioning */
    top: 60px; 
    padding: 1px; /* adds space around the outside to the context inside */
    padding-top: 1px;
    height: 90px; /* size of the box */
    width: 550px;
    margin: auto;
    h1 {color:#e9a9e0;}
    text-shadow: 3px 3px 3px #49869b;
    display: flex;
    gap: 10px; /* Adds space between the buttons */
    justify-content: center;
    align-items: center;
}

   button{
    font-size: 17px;
    height: 50px;
    width: 120px;
    border: #58bff5 5px groove;
    border-radius: 10px;
    background-color: #e9a9e0;
    text-shadow: 3px 3px 3px #91499b;
}

#about-me {
    background-color: #47D6F5;
    border: #00a8ff 5px groove; /* changes color and style and thickness of border */
    border-radius: 10px; /* changes the curvature of the border */
    position: absolute; /* allows you to move the element freely */
    text-align: center; /* centers text */
    align-content: center; /* also centers text but in a vertical way */
    left: 327px; /* adjusts positioning */
    top: 325px; 
    padding: 15px; /* adds space around the outside to the context inside */
    padding-top: 1px;
    height: 300px; /* size of the box */
    width: 550px;
    margin: auto;
    h1 {color:#e9a9e0;
    text-shadow: 3px 3px 3px #49869b;}
    
}
.scrollable-box {
  background-color: #47D6F5;
  border: #00a8ff 5px groove; /* Adds a visible border to the box */
  border-radius: 10px; /* changes the curvature of the border */
  position: absolute;
  text-align: center; /* centers text */
  left: 950px;
  top: 325px;
  width: 710px;            /* Sets a fixed width for the box */
  height: 180px;           /* Sets a fixed height for the box */
  overflow: auto;          /* Key property: adds scrollbars when content exceeds the size */
  padding: 10px;           /* Adds some space around the content */
  scrollbar-width: thin;
  scrollbar-color: #bf84b7 #ebb9e4 ;
  h1 {color:#e9a9e0;
  text-shadow: 3px 3px 3px #49869b;}
}

#links {
   background-color: #47D6F5;
    border: #00a8ff 5px groove; /* changes color and style and thickness of border */
    border-radius: 10px; /* changes the curvature of the border */
    position: absolute; /* allows you to move the element freely */
    text-align: center; /* centers text */
    align-content: center; /* also centers text but in a different way (dont ask me) */
    left: 950px; /* adjusts positioning */
    top: 550px; 
    padding: 1px; /* adds space around the outside to the context inside */
    padding-top: 1px;
    height: 90px; /* size of the box */
    width: 730px;
    margin: auto;
    h1 {color:#e9a9e0;}
    text-shadow: 3px 3px 3px #49869b;
    display: flex;
    gap: 10px; /* Adds space between the buttons */
    justify-content: center;
    align-items: center;
}

#credits {
    position: absolute;
    top: 805px;
    left: 905px;
}

#supports {
    position: absolute;
    top: 805px;
    left: 1505px;
}

#planet {
    position: absolute;
    left: 825px;
    top: 175px;
       }



#windows {
    position: absolute;
    left: -95px;
    top: -70px;
}