:root {
  --ctp-mocha-rosewater: #f5e0dc;
  --ctp-mocha-rosewater-rgb: 245 224 220;
  --ctp-mocha-rosewater-hsl: 9.600 55.556% 91.176%;
  --ctp-mocha-flamingo: #f2cdcd;
  --ctp-mocha-flamingo-rgb: 242 205 205;
  --ctp-mocha-flamingo-hsl: 0.000 58.730% 87.647%;
  --ctp-mocha-pink: #f5c2e7;
  --ctp-mocha-pink-rgb: 245 194 231;
  --ctp-mocha-pink-hsl: 316.471 71.831% 86.078%;
  --ctp-mocha-mauve: #cba6f7;
  --ctp-mocha-mauve-rgb: 203 166 247;
  --ctp-mocha-mauve-hsl: 267.407 83.505% 80.980%;
  --ctp-mocha-red: #f38ba8;
  --ctp-mocha-red-rgb: 243 139 168;
  --ctp-mocha-red-hsl: 343.269 81.250% 74.902%;
  --ctp-mocha-maroon: #eba0ac;
  --ctp-mocha-maroon-rgb: 235 160 172;
  --ctp-mocha-maroon-hsl: 350.400 65.217% 77.451%;
  --ctp-mocha-peach: #fab387;
  --ctp-mocha-peach-rgb: 250 179 135;
  --ctp-mocha-peach-hsl: 22.957 92.000% 75.490%;
  --ctp-mocha-yellow: #f9e2af;
  --ctp-mocha-yellow-rgb: 249 226 175;
  --ctp-mocha-yellow-hsl: 41.351 86.047% 83.137%;
  --ctp-mocha-green: #a6e3a1;
  --ctp-mocha-green-rgb: 166 227 161;
  --ctp-mocha-green-hsl: 115.455 54.098% 76.078%;
  --ctp-mocha-teal: #94e2d5;
  --ctp-mocha-teal-rgb: 148 226 213;
  --ctp-mocha-teal-hsl: 170.000 57.353% 73.333%;
  --ctp-mocha-sky: #89dceb;
  --ctp-mocha-sky-rgb: 137 220 235;
  --ctp-mocha-sky-hsl: 189.184 71.014% 72.941%;
  --ctp-mocha-sapphire: #74c7ec;
  --ctp-mocha-sapphire-rgb: 116 199 236;
  --ctp-mocha-sapphire-hsl: 198.500 75.949% 69.020%;
  --ctp-mocha-blue: #89b4fa;
  --ctp-mocha-blue-rgb: 137 180 250;
  --ctp-mocha-blue-hsl: 217.168 91.870% 75.882%;
  --ctp-mocha-lavender: #b4befe;
  --ctp-mocha-lavender-rgb: 180 190 254;
  --ctp-mocha-lavender-hsl: 231.892 97.368% 85.098%;
  --ctp-mocha-text: #cdd6f4;
  --ctp-mocha-text-rgb: 205 214 244;
  --ctp-mocha-text-hsl: 226.154 63.934% 88.039%;
  --ctp-mocha-subtext1: #bac2de;
  --ctp-mocha-subtext1-rgb: 186 194 222;
  --ctp-mocha-subtext1-hsl: 226.667 35.294% 80.000%;
  --ctp-mocha-subtext0: #a6adc8;
  --ctp-mocha-subtext0-rgb: 166 173 200;
  --ctp-mocha-subtext0-hsl: 227.647 23.611% 71.765%;
  --ctp-mocha-overlay2: #9399b2;
  --ctp-mocha-overlay2-rgb: 147 153 178;
  --ctp-mocha-overlay2-hsl: 228.387 16.757% 63.725%;
  --ctp-mocha-overlay1: #7f849c;
  --ctp-mocha-overlay1-rgb: 127 132 156;
  --ctp-mocha-overlay1-hsl: 229.655 12.775% 55.490%;
  --ctp-mocha-overlay0: #6c7086;
  --ctp-mocha-overlay0-rgb: 108 112 134;
  --ctp-mocha-overlay0-hsl: 230.769 10.744% 47.451%;
  --ctp-mocha-surface2: #585b70;
  --ctp-mocha-surface2-rgb: 88 91 112;
  --ctp-mocha-surface2-hsl: 232.500 12.000% 39.216%;
  --ctp-mocha-surface1: #45475a;
  --ctp-mocha-surface1-rgb: 69 71 90;
  --ctp-mocha-surface1-hsl: 234.286 13.208% 31.176%;
  --ctp-mocha-surface0: #313244;
  --ctp-mocha-surface0-rgb: 49 50 68;
  --ctp-mocha-surface0-hsl: 236.842 16.239% 22.941%;
  --ctp-mocha-base: #1e1e2e;
  --ctp-mocha-base-rgb: 30 30 46;
  --ctp-mocha-base-hsl: 240.000 21.053% 14.902%;
  --ctp-mocha-mantle: #181825;
  --ctp-mocha-mantle-rgb: 24 24 37;
  --ctp-mocha-mantle-hsl: 240.000 21.311% 11.961%;
  --ctp-mocha-crust: #11111b;
  --ctp-mocha-crust-rgb: 17 17 27;
  --ctp-mocha-crust-hsl: 240.000 22.727% 8.627%;
    --ctp-latte-rosewater: #dc8a78;
  --ctp-latte-rosewater-rgb: 220 138 120;
  --ctp-latte-rosewater-hsl: 10.800 58.824% 66.667%;
  --ctp-latte-flamingo: #dd7878;
  --ctp-latte-flamingo-rgb: 221 120 120;
  --ctp-latte-flamingo-hsl: 0.000 59.763% 66.863%;
  --ctp-latte-pink: #ea76cb;
  --ctp-latte-pink-rgb: 234 118 203;
  --ctp-latte-pink-hsl: 316.034 73.418% 69.020%;
  --ctp-latte-mauve: #8839ef;
  --ctp-latte-mauve-rgb: 136 57 239;
  --ctp-latte-mauve-hsl: 266.044 85.047% 58.039%;
  --ctp-latte-red: #d20f39;
  --ctp-latte-red-rgb: 210 15 57;
  --ctp-latte-red-hsl: 347.077 86.667% 44.118%;
  --ctp-latte-maroon: #e64553;
  --ctp-latte-maroon-rgb: 230 69 83;
  --ctp-latte-maroon-hsl: 354.783 76.303% 58.627%;
  --ctp-latte-peach: #fe640b;
  --ctp-latte-peach-rgb: 254 100 11;
  --ctp-latte-peach-hsl: 21.975 99.184% 51.961%;
  --ctp-latte-yellow: #df8e1d;
  --ctp-latte-yellow-rgb: 223 142 29;
  --ctp-latte-yellow-hsl: 34.948 76.984% 49.412%;
  --ctp-latte-green: #40a02b;
  --ctp-latte-green-rgb: 64 160 43;
  --ctp-latte-green-hsl: 109.231 57.635% 39.804%;
  --ctp-latte-teal: #179299;
  --ctp-latte-teal-rgb: 23 146 153;
  --ctp-latte-teal-hsl: 183.231 73.864% 34.510%;
  --ctp-latte-sky: #04a5e5;
  --ctp-latte-sky-rgb: 4 165 229;
  --ctp-latte-sky-hsl: 197.067 96.567% 45.686%;
  --ctp-latte-sapphire: #209fb5;
  --ctp-latte-sapphire-rgb: 32 159 181;
  --ctp-latte-sapphire-hsl: 188.859 69.953% 41.765%;
  --ctp-latte-blue: #1e66f5;
  --ctp-latte-blue-rgb: 30 102 245;
  --ctp-latte-blue-hsl: 219.907 91.489% 53.922%;
  --ctp-latte-lavender: #7287fd;
  --ctp-latte-lavender-rgb: 114 135 253;
  --ctp-latte-lavender-hsl: 230.935 97.203% 71.961%;
  --ctp-latte-text: #4c4f69;
  --ctp-latte-text-rgb: 76 79 105;
  --ctp-latte-text-hsl: 233.793 16.022% 35.490%;
  --ctp-latte-subtext1: #5c5f77;
  --ctp-latte-subtext1-rgb: 92 95 119;
  --ctp-latte-subtext1-hsl: 233.333 12.796% 41.373%;
  --ctp-latte-subtext0: #6c6f85;
  --ctp-latte-subtext0-rgb: 108 111 133;
  --ctp-latte-subtext0-hsl: 232.800 10.373% 47.255%;
  --ctp-latte-overlay2: #7c7f93;
  --ctp-latte-overlay2-rgb: 124 127 147;
  --ctp-latte-overlay2-hsl: 232.174 9.623% 53.137%;
  --ctp-latte-overlay1: #8c8fa1;
  --ctp-latte-overlay1-rgb: 140 143 161;
  --ctp-latte-overlay1-hsl: 231.429 10.048% 59.020%;
  --ctp-latte-overlay0: #9ca0b0;
  --ctp-latte-overlay0-rgb: 156 160 176;
  --ctp-latte-overlay0-hsl: 228.000 11.236% 65.098%;
  --ctp-latte-surface2: #acb0be;
  --ctp-latte-surface2-rgb: 172 176 190;
  --ctp-latte-surface2-hsl: 226.667 12.162% 70.980%;
  --ctp-latte-surface1: #bcc0cc;
  --ctp-latte-surface1-rgb: 188 192 204;
  --ctp-latte-surface1-hsl: 225.000 13.559% 76.863%;
  --ctp-latte-surface0: #ccd0da;
  --ctp-latte-surface0-rgb: 204 208 218;
  --ctp-latte-surface0-hsl: 222.857 15.909% 82.745%;
  --ctp-latte-base: #eff1f5;
  --ctp-latte-base-rgb: 239 241 245;
  --ctp-latte-base-hsl: 220.000 23.077% 94.902%;
  --ctp-latte-mantle: #e6e9ef;
  --ctp-latte-mantle-rgb: 230 233 239;
  --ctp-latte-mantle-hsl: 220.000 21.951% 91.961%;
  --ctp-latte-crust: #dce0e8;
  --ctp-latte-crust-rgb: 220 224 232;
  --ctp-latte-crust-hsl: 220.000 20.690% 88.627%;
  color-scheme: light dark;
}

/*colour and whatnot*/

body {
  color: light-dark(var(--ctp-latte-text),var(--ctp-mocha-text));
  background: light-dark(var(--ctp-latte-base),var(--ctp-mocha-base));
  border-color:light-dark(var(--ctp-latte-red),var(--ctp-mocha-red));
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2vw;
  user-select: none;
}

form {
  display: flex;


  justify-content: center;


  align-items: center;

  flex-direction: column;
  border-radius: 15px;
}

/*normal*/
input {
  background: light-dark(var(--ctp-latte-surface0),var(--ctp-mocha-surface0));
  color: light-dark(var(--ctp-latte-text),var(--ctp-mocha-text));
  height: 2vw;
  width: 15vw;
  border-radius: 15px;
  border-width: 0px;
  font-size: 0.8vw;
}

input[type=file]::file-selector-button {
  background: light-dark(var(--ctp-latte-surface0),var(--ctp-mocha-surface0));
  color: light-dark(var(--ctp-latte-text),var(--ctp-mocha-text));
  height: 2vw;
  width: 15vw;
  border-radius: 15px;
  border-width: 0px;
  font-size: 0.8vw;

}

input:hover {
  background: light-dark(var(--ctp-latte-surface1),var(--ctp-mocha-surface1));
}






.loggin_Input {

  margin-bottom: 1.5vw;
  margin-top: 1.5vw;

}
.menu {
  background: light-dark(var(--ctp-latte-crust), var(--ctp-mocha-crust));
  margin: 27vh 0vh 40vw 40vw;

  min-height: 10vh;

  width: 20vw;


  display: flex;


  justify-content: center;


  align-items: center;

  flex-direction: column;
  border-radius: 15px;
}
#mainMenu{
  width: 53vw;
  margin: 20vh 0vh 23.5vw 23.5vw;
}

.bikeBox{
  background-color: light-dark(var(--ctp-latte-surface0),var(--ctp-mocha-surface0));
  height:50vw ;
  width:50vw;
  border-radius: 15px;
  margin-bottom: 1.5vw;
  margin-top: 1.5vw;
}

#create_acount {
  margin-top: 0px;
}

#sign_In {
  background-color: light-dark(var(--ctp-latte-overlay0),var(--ctp-mocha-overlay0));
}

#sign_In:hover {
  background-color: light-dark(var(--ctp-latte-overlay1),var(--ctp-mocha-overlay1));
}
.navbar {
  /* Use Mantle to distinguish from Base body, or Crust for darker */
  background: light-dark(var(--ctp-latte-mantle),var(--ctp-mocha-mantle));
  border-bottom: 1px solid light-dark(var(--ctp-latte-overlay0),var(--ctp-mocha-overlay0));
  height: 70px; /* Fixed height for consistency */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%; /* Horizontal breathing room */
  box-sizing: border-box;
  position: fixed; /* Stick to top */
  top: 0;
  left: 0;
  z-index: 1000; /* Ensure it sits on top of forms */
}

/* Logo Styling */
.logo {
  color: light-dark(var(--ctp-latte-mauve),var(--ctp-mocha-mauve));
  font-size: 1.5rem; /* rem is safer than vw for text readability */
  font-weight: bold;
  cursor: pointer;
  letter-spacing: 1px;
}

/* Navigation List */
.nav-list {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

/* Links */
.nav-link {
  color:light-dark(var(--ctp-latte-subtext0),var(--ctp-mocha-subtext0));
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: light-dark(var(--ctp-latte-mauve),var(--ctp-mocha-mauve));
}

/* The "Sign In" Button style inside navbar */
.nav-btn {
  background-color: light-dark(var(--ctp-latte-surface0),var(--ctp-mocha-surface0));
  padding: 0.5rem 1.5rem;
  border-radius: 15px; /* Matches your form inputs */
  color: light-dark(var(--ctp-latte-text),var(--ctp-mocha-text));
  transition: background-color 0.3s ease;
}

.nav-btn:hover {
  background-color: light-dark(var(--ctp-latte-surface1),var(--ctp-mocha-surface1));
  color: light-dark(var(--ctp-latte-text),var(--ctp-mocha-text));
}

/* Hamburger Menu (Hidden on Desktop) */
.menu-toggle {
  display: none;
  cursor: pointer;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  transition: all 0.3s ease-in-out;
  background-color: var(--ctp-mocha-text);
  border-radius: 3px;
}




/*mobile*/
/* --- MOBILE STYLES (Phones & Tablets) --- */
@media screen and (max-width: 768px) {

  /* Fix the Microscopic Text */
  body {
    font-size: 16px;
    /*probably good*/
  }


  #loggin {

    width: 90%;
    margin: 20vh auto;
    padding: 20px;
  }


  input {
    width: 100%;
    height: 50px;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 15px;
  }


  .loggin_Input {
    margin: 10px 0;
    width: 100%;
  }
#mainMenu{
  width: 93vw;
  margin: 20vh 0vh 3.5vw 3.5vw;
}

.bikeBox{ 
  height:90vw ;
  width:90vw;
  border-radius: 15px;
  margin-bottom: 1.5vw;
  margin-top: 1.5vw;
}

.menu-toggle {
    display: block; /* Show hamburger on mobile */
  }

  /* Hide the menu by default on mobile */
  .nav-list {
    position: absolute;
    top: 70px; /* Push it below the navbar height */
    left: -100%; /* Hide off-screen left */
    flex-direction: column;
    width: 100%;
    text-align: center;
    padding: 2rem 0;
    gap: 2rem;
    transition: 0.3s ease-in-out;
    background-color: light-dark(var(--ctp-latte-mantle),var(--ctp-mocha-mantle));
    
  }

  /* Class added via JS to show menu */
  .nav-list.active {
    left: 0;
  }

  .nav-btn {
    background-color: transparent; /* Remove button bg on mobile for cleaner look */
    font-size: 1.2rem;
  }

}




/* --- PORTRAIT TABLETS --- */
@media screen and (min-width: 769px) and (max-width: 1024px) {

  body {
    font-size: 20px;
  }

  #loggin {
    width: 50vw;
    margin: 20vh auto;
    padding: 30px;
  }

  /* 3. Fix Input Fields */
  input {
    width: 100%;
    height: 3vw;
    min-height: 45px;
    font-size: 20px;
    margin-bottom: 20px;
  }


  .loggin_Input {
    margin-bottom: 2vw;
    width: 100%;
  }
}


/* --- LANDSCAPE TABLETS --- */
/* Target screens that are wide (1024px+) but not huge desktop monitors.
  maybe I add the thing to specify that its a rotated device
*/
@media screen and (min-width: 1024px) and (max-width: 1366px) {


  #loggin {
    margin: 10vh auto;
    width: 35vw;
    padding: 30px;
  }


  input {
    height: 45px;
    font-size: 18px;
  }


  body {
    font-size: 18px;
  }
}