/* 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." */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 30px;
  background: #222222;
  font-family: "VT323", monospace;
  font-size: 19px;
  color: #3f736a;
}

b {color:#898796;}
i {color:#a9cbc8;}

a {
  color: #555;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #e6f6f1;
}

::-webkit-scrollbar-thumb {
  background: #c7ece6;
  border: 2px solid #e6f6ef;
}

::-webkit-scrollbar-thumb:hover {
  background: #c4c9d9;
}

.container {
  max-width: 780px;
  margin: auto;
  background: #f4fdfb;
  border: 4px solid #1DCD9F;
}

.topbar {
  background: #d4f0e8;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #b8e0ca;
}

.site-name {
  font-size: 24px;
  letter-spacing: 1px;
}

.links a {
  color: #4a8a70;
  text-decoration: none;
}

.links a:hover {
  text-decoration: underline;
}


.main-nav {
  background: #eefbf9;
  border-bottom: 2px solid #b8e0ca;
  padding: 6px 15px;
  display: flex;
  gap: 16px;
  font-size: 19px;
}

.main-nav a {
  color: #4a8a70;
  text-decoration: none;
}

.main-nav a:hover {
  text-decoration: underline;
}

.main {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.sidebar {
  width: 220px;
}

.box {
  background: #eefbf9;
  border: 2px solid #b8e0ca;
  padding: 10px;
  margin-bottom: 15px;
}

.dragbox {
  background: #eefbf9;
  padding: 10px;
  margin-bottom: 15px;
  position: absolute; /* Use 'fixed' if you want it to stay in place while scrolling */
  top: 50px;          /* Distance from the top of the page */
  left: 50px;        /* Distance from the right of the page */
  width: 400px;       /* Width of the box */
  border: 4px solid #1DCD9F; /* Border style and color */
  z-index: 100;       /* Keeps the box on top of other elements */
  user-select: none;
  box-shadow: 10px 10px 0px #0d382d;
}

.dragbox2 {
  background: #eefbf9;
  padding: 10px;
  margin-bottom: 15px;
  position: absolute; /* Use 'fixed' if you want it to stay in place while scrolling */
  z-index: 1;
  top: 180px;          /* Distance from the top of the page */
  left: 150px;        /* Distance from the right of the page */
  width: 350px;       /* Width of the box */
  border: 4px solid #1DCD9F; /* Border style and color */
  z-index: 0;       /* Keeps the box on top of other elements */
  user-select: none;   /* stops cursor from selecting other text while dragging */
  box-shadow: 10px 10px 0px #0d382d;   /* drop shadow */
}

.dragbox3 {
  background: #eefbf9;
  padding: 10px;
  margin-bottom: 15px;
  position: absolute; /* Use 'fixed' if you want it to stay in place while scrolling */
  z-index: 1;
  top: 75px;          /* Distance from the top of the page */
  right: 245px;        /* Distance from the right of the page */
  width: 275px;       /* Width of the box */
  border: 4px solid #1DCD9F; /* Border style and color */
  z-index: 100;       /* Keeps the box on top of other elements */
  user-select: none;   /* stops cursor from selecting other text while dragging */
  box-shadow: 10px 10px 0px #0d382d;   /* drop shadow */
}

.floatingbox {
  background: #eefbf9;
  padding: 10px;
  margin-bottom: 15px;
  position: absolute; /* Use 'fixed' if you want it to stay in place while scrolling */
  top: 50px;          /* Distance from the top of the page */
  left: 50px;        /* Distance from the right of the page */
  width: 400px;       /* Width of the box */
  border: 4px solid #1DCD9F; /* Border style and color */
  z-index: 100;       /* Keeps the box on top of other elements */
}

details {
  background: #d4f0e8;
  padding: 2px 0 2px 10px;
  margin-bottom: 5px;
  font-size: 20px;
  border-left: 5px solid #169976
}

summary {
  background: #d4f0e8;
  padding: 2px 0 2px 10px;
  margin-bottom: 5px;
  font-size: 20px;
}

details[open] {
   padding: 2px 0 2px 10px;
}

details[open] summary {
  margin-bottom: 5px;
}

.side-title-clear {
  background: #fff;
  padding: 2px 0 2px 10px;
  margin-bottom: 5px;
  font-size: 20px;
  display: flex;
  align-items: center; /* Centers text and GIF vertically */
}

#right{
     float:right;
}

.side-title {
  background: #fff;
  padding: 2px 0 2px 10px;
  margin-bottom: 5px;
  font-size: 20px;
  border-left: 5px solid #169976;
}


.content {
  flex: 1;
}

.content-title {
  background: #d4f0e8;
  padding: 2px 0 2px 10px;
  margin-bottom: 5px;
  font-size: 20px;
  border-left: 5px solid #169976;
}

.footer {
  background: #eefbf9;
  border-top: 2px solid #b8e0ca;
  padding: 8px;
  text-align: center;
  font-size: 16px;
  color: #5fa38b;
}


@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
  }

  
  .main-nav {
    flex-direction: column;
    gap: 8px; 
    align-items: center;    

  }

  
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  
  .links {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  .dragbox, .dragbox2, .dragbox3 {
    display: none;
  }
}

.crt-overlay { pointer-events: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; }

/* Disc - https://www.cursors-4u.com/cursor/oth163 */
* {
  cursor: url('https://cdn.cursors-4u.net/previews/disc-248e88a4-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */
/* Disc - https://www.cursors-4u.com/cursor/oth165 */
* a:hover, button:hover {
  cursor: url('https://cdn.cursors-4u.net/previews/disc-7c72d227-32.webp') 32 32, auto !important;
}
/* End www.Cursors-4U.com Code */