/* Reset all margins, paddings, and borders */
* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    color: #3f3f3f;
    font-family: Gill Sans, Verdana, Monospace;
    margin-top: 2em;
    margin-left: 4em;
    margin-right: 4em;
    background-color: #f9f7bf;
    background-image: url("blueandredstars.png");
    transition: font-size 0.3s; /* Add transition for smooth font size changes */
  }
  
  /* ---- HEADERS ---- */
    
  h1 {
    background: #05338c;
    color: white;
    font-size: 2em;
    font-weight: bold;
    padding: .5em;
    margin-bottom: .5em;
    max-width: 100%;
    overflow: hidden; /* Prevent text from extending past background */
    /* You can choose one of the following to ensure text wraps within the background */
    overflow-wrap: break-word; /* For modern browsers */
    word-wrap: break-word; /* For older browsers */
    font-family: "Homemade Apple", "Cedarville Cursive", Verdana, cursive;
    border-radius: 0.5em;
    transition: font-size 0.3s; /* Add transition for smooth font size changes */
  }
  
@media screen and (max-width: 640px) {
    /* Styles for screens up to 767px wide */
    h1 {
        font-size: 1em; /* Example adjustment for smaller screens */
    }
}
  h2, h3, h4, h5, h6 {
    color: #6f5e75;
    margin-bottom: .5em;
    font-family: "Cedarville Cursive", Verdana, cursive;
    transition: font-size 0.3s; /* Add transition for smooth font size changes */
  }
    
  /* ---- TEXT SELECTION ---- */
  
  ::-moz-selection {
    color: #FFFFFF;
    background: #86af90;
  }
  
  ::selection {
    color: #FFFFFF;
    background: #86af90;
  }
  
  /* ---- HARD RULE ---- */
  
  hr {
      border: 2px solid;
      margin: 2em 0;
      color: #64755e;
}
  }
  
  /* ---- LINKS ---- */
  
  /* unvisited link */
  a:link {
    color: #5e6c75;
  }
  
  /* visited link */
  a:visited {
    color: #635e75;
  }
  
  /* mouse over link */
  a:hover {
    color: #8b969c;
  }
  
  /* selected link */
  a:active {
    color: #abb3b8;
  }


  /* ---- SUMMARY BOXES ---- */

details {
  border: 1px solid #514455;
  background-color: #9faa9b;
  padding: 1em 1em .6em;
  max-width: 700px;
  box-sizing: border-box;
}



summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid;
  margin-bottom: 0.5em;
}

/* ---- DL FORMAT ---- */

dt::before {
  content: "\2022"; /* Bullet character */
  color: #000; /* Bullet color */
  display: inline-block;
  width: 1em; /* Adjust spacing */
}

dt {
  margin: .2em 0;
}

dd {
  margin-left: 1em; /* Adjust spacing */
}


 /* ---- CONTENT BOX ---- */

.content-box {
        border: 2px solid #23365a;
        padding: 3em;
        border-radius: .5em;
        background-color: #f0f0f0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;
        width: 100%
        transition: all 0.3s; /* Add transition for smooth resizing */
    }
    
     @media screen and (max-width: 767px) {
            /* Styles for screens up to 767px wide */
            .content-box {
                max-width: 80%; /* Example adjustment for smaller screens */
            }
        }

        @media screen and (min-width: 768px) and (max-width: 1023px) {
            /* Styles for screens between 768px and 1023px wide */
            .content-box {
                max-width: 55%; /* Example adjustment for medium-sized screens */
            }
        }

        @media screen and (min-width: 1024px) {
            /* Styles for screens wider than 1023px */
            .content-box {
                max-width: 40%; /* Example adjustment for larger screens */
            }
        }
    
/* ---- IMAGES ----*/
img.boxed {
  width: 60%; /* Set the width of the image relative to its container */
  height: 60%; /* Set the height of the image relative to its container */
  max-width: 400px;
  border: .4em solid #E04D3E;
  border-radius: 3em;
  transition: all 0.3s; /* Add transition for smooth resizing */
  object-fit: cover;
}
@media screen and (max-width: 767px) {
            /* Styles for screens up to 767px wide */
            img.boxed {
                max-width: 100%; /* Example adjustment for smaller screens */
                transition: all 0.3s; /* Add transition for smooth resizing */
            }
}


/*---- SIDEBAR----*/

.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 160px; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/*----FONTS----*/

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

/* ---- CURSOR ----*/

 /* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/anime/ani-6/ani545.cur), auto !important;} /* End https://www.cursors-4u.com */