/* USER STYLES */
/* Styles are what change the color and sizes of stuff on your site. */

/* Variables: Used to keep images and colors consistent throughout the code */
:root {
  --header-image: url('https://mercury-atlas.neocities.org/images/dithered-image.png');
  --body-bg-image: url('https://mercury-atlas.neocities.org/images/tiles/skulls.jpg');

  /* Colors */
  --content: #43256E;
}

/* CUSTOM FONTS */
/* If you download a font file, you can upload it to Neocities and link it here. */

@font-face {
  font-family: Fondamento;
  src: url('https://mercury-atlas.neocities.org/fonts/Fondamento-Regular.ttf');
}

@font-face {
  font-family: Rosarivo;
  src: url('https://mercury-atlas.neocities.org/fonts/Rosarivo-Regular.ttf');
}

@font-face {
  font-family: Jacquard24;
  src: url('https://mercury-atlas.neocities.org/fonts/Jacquard24-Regular.ttf');
}

@font-face {
  font-family: Iceberg;
  src: url('https://mercury-atlas.neocities.org/fonts/Iceberg-Regular.ttf');
}

/* GLOBAL STYLES */

* {
  box-sizing: border-box;
}

body {
  font-family: 'Rosarivo', sans-serif;
  margin: 0;
  min-height: 100vh;
  background-color: #08031A;
  background-size: 65px;
  color: #e39c19;
  background-image: var(--body-bg-image);
  cursor: url(https://mercury-atlas.neocities.org/cursors/skull_normal1.cur), default;
}

/* LAYOUT ELEMENTS */

#container {
  max-width: 1100px; /* Width of your layout */
  margin: 0 auto;    /* Centers the entire page */
}

/* Links inside the main container (excluding nav) */
#container a {
  color: #ED64F5;
  font-weight: bold;
}

#header {
  width: 100%;
  height: 150px;
  background-color: #5e4e8c;
  background-image: var(--header-image);
  background-position: bottom center;
  background-size: 100%;
}

/* NAVIGATION */

#navbar {
  height: 60px;
  background-color: #191919;
  width: 100%;
}

#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
  padding-top: 10px;
}

#navbar li a {
  color: #999999;
  font-family: 'Iceberg', sans-serif;
  font-size: 27px;
  text-shadow: 0px 0px 4px #000000, 0px 0px 8px #000000, 0px 0px 12px #000000, 0px 0px 16px #000000;
}

#navbar li a:hover {
  color: #d49531;
  text-decoration: underline;
}

/* MAIN CONTENT AND SIDEBARS */

#flex {
  display: flex;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #191919;
  flex: 1;
  padding: 20px;
  order: 2; /* Content sits in the middle */
  color: #858585;
  text-shadow: 0px 0px 4px #000000, 0px 0px 8px #000000, 0px 0px 12px #000000, 0px 0px 16px #000000;
}

#leftSidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 4px groove #454545;
  width: 200px;
  padding: 20px;
  gap: 7px;
  background-color: #191919;
  font-size: smaller;
  order: 1;
}

#rightSidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  padding: 20px;
  background-color: #191919;
  font-size: smaller;
  order: 3;
}

#hitText {
  font-size: 19px;
  margin: 0px;
}

/* EXTRAS */

footer {
  background-color: #13092D;
  width: 100%;
  height: 40px;
  padding: 10px;
  text-align: center;
}

#topBar {
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: smaller;
  background-color: #13092D;
}

h1, h2, h3 {
  font-family: 'Iceberg', sans-serif;
  color: #999999;
  font-size: 25px;
  text-shadow: 0px 0px 4px #000000, 0px 0px 8px #000000, 0px 0px 12px #000000, 0px 0px 16px #000000;
}

h1 {
  font-size: 27px;
}

strong {
  color: #999999;
}

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 5px;
  background-color: #101010;
  border: 4px groove #454545;
  font-family: 'Iceberg', sans-serif;
  color: #999999;
}

/* MEDIA QUERIES (Mobile Responsiveness) */

@media only screen and (max-width: 1000px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }

  /* Adjusting order for mobile stacking */
  main {
    order: 1;
  }

  #leftSidebar {
    order: 2;
  }

  #rightSidebar {
    order: 3;
  }

  #navbar ul {
    flex-wrap: wrap;
  }
}


/* Base URL mapped to a variable for cleaner code, though you can write it directly */
:root {
  --cursor-url: 'https://mercury-atlas.neocities.org/cursors/';
}

/* This forces the mouse to ignore the object and interact with the <a> tag wrapping it */
#melonland-surf-club {
  pointer-events: none;
}

/* Ensure your wrapping link is treated like a normal block so it fits the badge perfectly */
.badge-link {
  display: inline-block;
}

/* 1. Normal / Default Cursor */
/* Applied to the whole body so it becomes the default state */
body {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_normal1.cur'), auto;
}

/* 2. Link / Pointer Cursor */
/* Applied to interactive elements like links and buttons */
a {
  cursor: none;
}

#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  pointer-events: none;
  z-index: 9999;
  
  display: none;
}

/* 3. Text Cursor */
/* Applied to paragraphs, headings, and text input fields */
p, span, h1, h2, h3, h4, h5, h6, input[type="text"], textarea {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_text4.cur'), text;
}

/* 4. Unavailable / Not-Allowed Cursor */
/* Applied to disabled elements */
:disabled, .disabled {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_unavailable1.cur'), not-allowed;
}

/* 5. Working / Progress Cursor */
/* Used when a page or section is loading */
.loading, .working {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_working1.cur'), wait; 
  /* 'progress' is also a valid fallback keyword here */
}

/* 6. Move Cursor */
/* Applied to draggable elements */
.draggable {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_move2.cur'), move;
}

/* 7. Vertical Resize Cursor (North-South) */
.resize-vertical {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_res_vert1.cur'), ns-resize;
}

/* 8. Horizontal Resize Cursor (East-West) */
.resize-horizontal {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_res_horiz1.cur'), ew-resize;
}

/* 9. Diagonal Resize Cursor */
.resize-diagonal {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_res_diag1_1.cur'), nwse-resize; 
  /* nwse = North-West to South-East */
}

/* -------------------------------------------------------------------------- */
/* 10. Animated Wait Cursor (NOT SUPPORTED BY MODERN BROWSERS)                */
/* This is mapped to 'wait' but will likely just show the default wait cursor */
.busy-animated {
  cursor: url('https://mercury-atlas.neocities.org/cursors/skull_white_110ms.gif'), wait;
}