.deepblue {
  background: linear-gradient(to bottom, #3aa0ff, #0078D7 60%, #005a9e);
}

.navy {
  background: linear-gradient(to bottom, #1f5fa8, #003A75 60%, #00264d);
}

.cobalt {
  background: linear-gradient(to bottom, #4fa8ff, #0050EF 60%, #003bb3);
}

.azure {
  background: linear-gradient(to bottom, #4cb8ff, #0063B1 60%, #004b87);
}

.skyblue {
  background: linear-gradient(to bottom, #78c6ff, #2D89EF 60%, #1a5fb4);
}

/*green*/

.teal {
  background: linear-gradient(to bottom, #1bc6b3, #008272 60%, #005c50);
}

.lime {
  background: linear-gradient(to bottom, #b6f53a, #7FBA00 60%, #5e8b00);
}

.green {
  background: linear-gradient(to bottom, #3edb3e, #00A300 60%, #007500);
}

.emerald {
  background: linear-gradient(to bottom, #2dd12d, #008A00 60%, #005e00);
}

.mint {
  background: linear-gradient(to bottom, #44ffd8, #00B294 60%, #00856f);
}

/*orange*/

.orange {
  background: linear-gradient(to bottom, #ff8a5e, #F25022 60%, #b63710);
}

.tangerine {
  background: linear-gradient(to bottom, #ff8f66, #E95420 60%, #a53714);
}

.mustard {
  background: linear-gradient(to bottom, #ffd66b, #D29200 60%, #9c6c00);
}

.gold {
  background: linear-gradient(to bottom, #ffe27a, #C19C00 60%, #8a6f00);
}

.amber {
  background: linear-gradient(to bottom, #ffd966, #FFB900 60%, #c78e00);
}

/*red*/

.red {
  background: linear-gradient(to bottom, #ff5c6b, #E81123 60%, #a50012);
}

.crimson {
  background: linear-gradient(to bottom, #ff4a4a, #A80000 60%, #730000);
}

.darkred {
  background: linear-gradient(to bottom, #c21f1f, #7A0000 60%, #4f0000);
}

.magenta {
  background: linear-gradient(to bottom, #ff66c7, #FF0097 60%, #b3006c);
}

.rose {
  background: linear-gradient(to bottom, #ff5ab3, #E3008C 60%, #a10063);
}

/*purple*/

.purple {
  background: linear-gradient(to bottom, #9a5fc4, #68217A 60%, #441351);
}

.violet {
  background: linear-gradient(to bottom, #a17bff, #603CBA 60%, #3f2685);
}

.plum {
  background: linear-gradient(to bottom, #8656d6, #5C2D91 60%, #3e1c63);
}

/*random colors*/
.black {
  background: linear-gradient(to bottom, #444, #000);
}

.charcoal {
  background: linear-gradient(to bottom, #3a3a3a, #1F1F1F);
}

.darkgray {
  background: linear-gradient(to bottom, #555, #2B2B2B);
}

.gray {
  background: linear-gradient(to bottom, #666, #3F3F3F);
}

.lightgray {
  background: linear-gradient(to bottom, #aaa, #767676);
}

.silver {
  background: linear-gradient(to bottom, #ddd, #A6A6A6);
}

.white {
  background: linear-gradient(to bottom, #ffffff, #e5e5e5);
}
* {
  border-radius: 5px;
  box-shadow: none;
}

body {
  margin: 0;
  font-family: "Segoe UI", "Inter", sans-serif;
  background: linear-gradient(to bottom, #dfefff, #bcdcff);
}

.tile {
  display: inline-flex;
  box-sizing: border-box;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  font-weight: 600;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: 
    transform 0.15s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 25px rgba(255,255,255,0.35),
              inset 0 0 60px rgba(255,255,255,0.15);
  pointer-events: none;
}

.tile:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow:
    0 8px 20px rgba(0,0,0,0.25),
    0 0 25px rgba(255,255,255,0.4);
  filter: brightness(1.1);
}
.tile {
  border: 1px solid rgba(255,255,255,0.4);
}

.tile:hover {
  box-shadow:
    0 12px 30px rgba(0,0,0,0.3),
    0 0 40px rgba(255,255,255,0.6),
    inset 0 0 15px rgba(255,255,255,0.5);
}
.tile-16  { width: 16px;  height: 16px; }
.tile-24  { width: 24px;  height: 24px; }
.tile-32  { width: 32px;  height: 32px; }
.tile-40  { width: 40px;  height: 40px; }
.tile-48  { width: 48px;  height: 48px; }
.tile-64  { width: 64px;  height: 64px; }
.tile-80  { width: 80px;  height: 80px; }
.tile-96  { width: 96px;  height: 96px; }
.tile-120 { width: 120px; height: 120px; }
.tile-160 { width: 160px; height: 160px; }
.tile-200 { width: 200px; height: 200px; }
.tile-240 { width: 240px; height: 240px; }
.tile-320 { width: 320px; height: 320px; }
.tile-wide-80   { width: 160px; height: 80px; }
.tile-wide-120  { width: 240px; height: 120px; }
.tile-wide-160  { width: 320px; height: 160px; }
.tile-tall-80   { width: 80px;  height: 160px; }
.tile-tall-120  { width: 120px; height: 240px; }
.tile-tall-160  { width: 160px; height: 320px; }
.metro-grid {
  display: grid;
  grid-auto-flow: dense;
  gap: 8px;
  align-content: start;
}
.metro-grid-4  { grid-template-columns: repeat(4, 1fr); }
.metro-grid-6  { grid-template-columns: repeat(6, 1fr); }
.metro-grid-8  { grid-template-columns: repeat(8, 1fr); }
.metro-grid-12 { grid-template-columns: repeat(12, 1fr); }
.metro-grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
.metro-m-8  { margin: 8px; }
.metro-m-16 { margin: 16px; }
.metro-m-24 { margin: 24px; }
.metro-m-32 { margin: 32px; }
.metro-grid > .tile {
  margin: 0;
}
/* Written for Blekko revival  Do not distribute  Copyright (C) Mirrall*/

/*Cubes?? Idk*/

.metro-grid {
  display: grid;
  grid-auto-flow: dense;
  gap: 8px;
  align-content: start;
  perspective: 800px;
}

.tile {
  display: inline-flex;
  box-sizing: border-box;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: visible;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.4);
  transform-style: preserve-3d;
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;

  will-change: transform;
}
.tile::before,
.tile::after {
  content: "";
  position: absolute;
  background: inherit;
  border-radius: inherit;
  pointer-events: none;
}

.tile::before {
  width: var(--depth, 14px);
  height: 100%;
  top: 0;
  left: 100%;

  transform-origin: left;
  transform: rotateY(90deg);
}

.tile::after {
  height: var(--depth, 14px);
  width: 100%;
  left: 0;
  top: 100%;

  transform-origin: top;
  transform: rotateX(-90deg);
}
.tile:hover {
  --depth: 14px;

  transform:
    rotateX(8deg)
    rotateY(-8deg)
    translateY(-6px);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.35);
}
.tile::before { filter: brightness(0.9); }
.tile::after  { filter: brightness(0.8); }

/*main stuff not tile related*/

header,footer,body,html,h1,h2,h3,h4,h5,h6,p,div {padding: 0; margin:0;}
      header, footer {background: linear-gradient(
    to bottom,
    rgb(190, 190, 190) 0%,
    rgb(119, 119, 119) 3%,
    rgb(35, 35, 35) 55%,
    rgb(0, 0, 0) 55%,
    rgb(22, 22, 22) 98%,
    rgb(0, 0, 0) 100%
  ); padding: 5px; color: white;}
      header h1, header nav {display: inline-block;}
      header nav {float: right; margin-top: 8.5px; color: grey;}
      header nav a {color: grey;}
      header nav a:hover {color: #66b3fb;}
      main {box-shadow: 5px 5px 5px rgba(0,0,0,0.2);  padding: 15px; border-radius: 4.5px; width: 900px; margin: auto; margin-top: 10px;}
      main p {margin-top: 20px;} main a {color: white;}
      footer {margin-top: 20px; color: white; width: 99vw;} body {background: url("https://frutigeraeroarchive.org/images/wallpapers/microsoft/microsoft_100.jpg"); background-repeat: no-repeat; background-size: cover; color: white;}