p {
color: aqua;
font-size: 15px;
  overflow: auto;
}
h1 {
color: purple;
font-size: 50px;
border-width:15px;
border-style:solid;
border-image: url("") 7 fill round;
margin: auto;
width: 800px;
height: 100px;
position: relative;
z-index: 4;
background-color: steelblue;
}
p2 {
  color: aqua;
font-size: 15px;
  overflow: auto;
}
body {
  -webkit-userselect: none; /* Safari */
  -ms-userselect: none;     /* IE 10+ and Edge */
  user-select: none;         /* Standard syntax */
   font-family: "courier new", monospace, cursive;
   text-align: center;
    background-color: black;
  cursor: url('https://img.icons8.com/?size=32&id=0aci0uaFVuHJ&format=png'), auto;
}
p {
  /* 1. Define the border: width, style, and color */
  border: 5px solid #00FFFF; /* Example: 2px solid red border */
  
  /* 2. Add space between text and border */
  padding: 10px 15px; /* Example: 5px top/bottom, 10px left/right padding */
  
  /* 3. Set the background color inside the border */
  background-color: blueviolet; /* Example: light grey background */

  width: 500px;
  height: 50px;
}
p2 {
  /* 1. Define the border: width, style, and color */
  border: 5px solid #00FFFF; /* Example: 2px solid red border */
  
  /* 2. Add space between text and border */
  padding: 10px 15px; /* Example: 5px top/bottom, 10px left/right padding */
  
  /* 3. Set the background color inside the border */
  background-color: blueviolet; /* Example: light grey background */
  
  /* Optional: Round the corners */
  border-radius: 10px; 

  /* Optional: Ensure the box only takes up the necessary width for inline elements */
  display: inline-block; 
  
  width: 100px;
  height: 500px;
  position: relative;
  top: 50px;
  left: 10px;
  right: 10px;
}
.colored-box {
  border: 5px solid #00FFFF;
  background-color: blueviolet;
  display: inline-block; 
  margin: 20px 30px;
  overflow: auto;
  
}
#box1 {
  width: 500px;
  height: 100px;
  padding: 10px 20px;
  position: relative;
  bottom: 80px;
  left: 30px;
  
}
#box2 {
  width: 200px;
  height: 200px;
  padding: 10px 20px;
  position: relative;
  right: 60px;
  top: 20px;
}
  #box3 {
  width: 495px;
  height: 600px;
  padding: 10px 20px;
  position: relative;
  bottom: 130px;
  right: 130px;
  }
.scroll-box {
  height: 300px; /* Or use vh, e.g., 50vh */
  overflow-y: auto; /* Adds vertical scrollbar when needed */
  border: 1px solid #ccc;
  padding: 10px;
}

/* Width and height of the scrollbar */
::webkit-scrollbar {
  width: 10px;
}

/* Track/background */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle/thumb */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}