/* CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
  display: block;
}

/* Variables */
* {
  /* Primitives */
  /* greys */
  --grey00: #ffffff;
  --grey50: #e6e6e6;
  --grey100: #c2c2c2;
  --grey150: #818181;
  --grey200: #000000;

  /* colors */
  --cyan: #008081;
  --blue: #080081;
  --yellow: #ffffdf;

  /* Tokens */
  /* html background */
  --html_bg: var(--grey200);

  /* wallpaper */
  --wallpaper: var(--cyan);

  /* text */
  --body: var(--grey200);
  --body_inverted: var(--grey00);
  --fg_window_top: var(--grey00);
  --fg_icons: var(--grey00);

  /* menubar */
  --menu_bg: var(--grey100);
  --menu_border_outer: var(--grey00);
  --menu_border_inner: var(--grey00);
  --menu_border_hover: var(--grey50);

  /* windows */
  --window_top_bg: var(--blue);
  --window_top_fg: var(--grey00);
  --window_top_bg_unfocused: var(--grey150);
  --window_bg: var(--grey100);
  --window_border: var(--grey50);
  --topbox_bg: var(--grey100);
  --topbox_border: var(--grey50);
  --element_bg: var(--grey00);
  --element_bg_alt: var(--yellow);
  --element_bg_cyan: var(--cyan);

  /* start menu */
  --start_bg: var(--grey100);
  --start_side_bg: var(--grey150);
  --start_hover: var(--blue);
}

/* Fonts */
@font-face {
  font-family: "arial";
  src: url("../fonts/ArialCEMTBlack.ttf");
}
@font-face {
  font-family: "new_bold";
  src: url("../fonts/NewsGothicMTBold.ttf");
}
@font-face {
  font-family: "new_regular";
  src: url("../fonts/NewsGothicMT.ttf");
}

/* Cursor settings*/
html {
  background-color: var(--html_bg);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  cursor: url("../icons/mouse_pointer.png") 0 0, auto;
  user-select: none;
  -webkit-user-select: none;
}

/* Hover states */
.icon:hover,
button:hover,
.start_button:hover,
.app:hover,
.topbox:hover,
a:hover,
a img:hover {
  cursor: url("../icons/mouse_hand.png") 0 0, pointer;
}



body {
  background-color: var(--wallpaper);
  background-image: url("../imgs/codemonkey_bg_dither.png");
  background-repeat: no-repeat;
  background-position: center;
  /* background-size: 50vw 50vh; */
  /* background-size: 60%; */
  /* background-image: url("../imgs/ibm.bmp"); */
  /* background-repeat: repeat; */
  /* background-size: 68px 64px; */
  height: 100vh;
  width: 100vw;
  margin: auto;
}

body.retro {
  background-image: url("../imgs/wallpaper.bmp");
  background-repeat: repeat;
  background-size: 50% 50%;
  background-position: unset;
}

@media screen and (min-width: 800px) {
  body {
    background-size: 30%;
  }
}

main {
  height: 95vh;
  top: 0;
}

nav {
  bottom: 0;
  height: 5vh;
  width: 100vw;
  background-color: var(--menu_bg);
  position: fixed;
  z-index: 100;
  border-top: 3px ridge var(--menu_border_outer);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

h1 {
  font-size: 1.75rem;
  font-family: 'new_bold';
}

p {
  font-family: 'new_regular';
  font-size: 1.1rem;
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
}

a {
  margin-left: 0%;
  font-family: 'new_regular';
  color: #E78F4B;
  text-decoration: underline;
}

a:hover {
  text-decoration: none; /* Remove underline when hovering */
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  width: 25px;
  margin-left: 100px;
}

/* Track */
::-webkit-scrollbar-track {
  background: repeating-conic-gradient(var(--grey50) 0% 25%, transparent 0% 50%)
    50% / 3px 3px;
  border: 2px inset var(--window_border);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--grey150);
  border: 2.5px outset var(--window_border);
}