/* Reset all margins, paddings, and borders */

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    
    color: #3f3f3f;
    font-family: "Short Stack", "Monospace", "Gill Sans", Verdana;
    margin-top: 2em;
    margin-left: 4em;
    margin-right: 4em;
    background-image: linear-gradient(to right, #a18cd1, #fbc2eb);
  }
  
  /* ---- CONTENT BOX ---- */

.content-box {
        border: 2px solid #333;
        padding: 3em;
        border-radius: 10px;
        background-color: #f0f0f0;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        max-width: 50%;
        max-height: 800px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10%;
        overflow: auto;
    }
    
    .content-box img {
    display: block;
    margin: 0 auto;
}
  /* ---- HEADERS ---- */
    
  h1 {

    font-family: 'Short Stack', "Comic Sans MS", "Comic Sans", Papyrus, cursive;
    color: #fc42c8;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: .5em;
 text-align: center;
  }
  
  h2, h3, h4, h5, h6 {
    font-family: "Comic Sans MS", "Comic Sans", Papyrus, cursive;
    color: #9e27c8;
    margin-bottom: .5em;
 text-align: center;
  }
    
  /* ---- 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 purple;
  background-color: pink;
  padding: 1em 1em .6em;
  max-width: 700px;
  box-sizing: border-box;
}



summary {
  color: #fc42c8;
  font-weight: bold;
  font-family: "Comic Sans MS", "Comic Sans", Papyrus, cursive;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

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

summary:hover {
    color: #9e27c8;
    
}

/* ---- 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 */
}

/* ---- IMAGE FORMAT ----*/

.bordered-img {
  border: .5em solid #fc42c8;
  width: 50%; /* Set the width of the image relative to its container */
  height: 50%; /* Set the height of the image relative to its container */
  max-width: 500px;
  transition: all 0.3s; /* Add transition for smooth resizing */
}

img:hover {
    border-color:red;
}

/* ---- BUTTON ---- */
button {
    border: none;
    background-color: transparent;
    font-family: "Comic Sans MS", "Comic Sans", Papyrus, cursive;
    color: #9e27c8;
 display: block; /* Set button as block-level element */
    margin: auto; /
}

/* ---- FONT ---- */

@import url('https://fonts.googleapis.com/css2?family=Short+Stack&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 */