/* ------------ global ------------ */
:root {
  --primary-color: 1, 1, 34;
  --secondary-color: rgb(7, 27, 114);
  --third-color: rgb(33, 63, 129);
  --fourth-color: rgb(70, 10, 126);

  color-scheme: dark;
  background-color: rgb(var(--primary-color));
}

p {
  font-family: "Saira", sans-serif;
  font-size: clamp(30px, 3vw, 130px);
  text-rendering: geometricPrecision;
  color: #cccccc;
  text-align: center;
  z-index: 2;
}

body { margin: 0; padding: 0; }
div { width: 100%; }

/* ------------ color classes ------------ */
.color2 { background-color: var(--secondary-color); }
.color3 { background-color: var(--third-color); }
.color4 { background-color: var(--fourth-color); }

/* ------------ utility classes ------------ */
.large { font-size: clamp(30px, 5vw, 250px); font-weight: 800; }
.spacing { height: 10vw; }

.container {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

/* ------------ backgrounds and loading ------------ */
.backstripes, .backtech, .backstripestext, .backstars, .backstars2, #loadingScreen {
  position: absolute;
  height: 100%;
}

.backstripes, .backstripestext {
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: repeat;
  -webkit-mask-repeat: repeat;
  z-index: 0;
  mask-image: url(R-AXP/BackStripes.png);
  -webkit-mask-image: url(R-AXP/BackStripes.png);
}

.backstripes {
  background: linear-gradient(rgba(255,255,255,0), var(--fourth-color));
  background-size: 100% auto;
  mask-size: 100% auto;
  opacity: .3;
}

.backstripestext {
  width: 80%;
  height: 50%;
  background-size: 120% auto;
  mask-size: 120% auto;
  opacity: .6;
}

.backtech { background: url(R-AXP/BackTech.png) 0 0/100% auto repeat-y; z-index: 2; }
.backstars, .backstars2 { background-size: 100% auto; opacity: .6; }
.backstars  { background-image: url(R-AXP/BackStars1.png); }
.backstars2 { background-image: url(R-AXP/BackStars2.png); }

#loadingScreen { position: fixed; z-index: 10; background: var(--primary-color); }

/* ------------ borders & gradients ------------ */
.border, .borderoutline, .border-upside-down, .borderoutline-upside-down {
  position: absolute;
  height: 2.5vw;
}

.border, .border-upside-down { z-index: 2; }
.borderoutline, .borderoutline-upside-down { z-index: 1; }

.border, .borderoutline { align-self: flex-end; }
.border-upside-down, .borderoutline-upside-down { align-self: flex-start; }

.border { clip-path: polygon(0% 110%, 0% 10%, 10% 10%, 30% 100%, 70% 100%, 90% 10%, 110% 10%, 110% 110%); }
.borderoutline { clip-path: polygon(0% 100%, 0% 0%, 10% 0%, 30% 90%, 70% 90%, 90% 0%, 100% 0%, 100% 100%); }
.border-upside-down { clip-path: polygon(0% -10%, 0% 90%, 10% 90%, 30% 0%, 70% 0%, 90% 90%, 110% 90%, 110% -10%); }
.borderoutline-upside-down { clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 30% 10%, 70% 10%, 90% 100%, 100% 100%, 100% 0%); }

/* ------------ header ------------ */
#addd {
  top: 0;
  position: fixed;
  height: 80px;
  width: 100%;
  background: #000;
  z-index: 4;
  display: flex;
}

#baaa {
  aspect-ratio: 1 / 1;
  display: flex;
  background: #000;
  z-index: 3;
  height: 120%;
}

#bee {
  display: flex;
  background: rgb(76, 0, 255);
  z-index: 3;
  height: 100%;
}

#adddd {
  height: 80px;
}

.footerc {
  height: 50vh;
}