* {
  font-family: 'Maven Pro', sans-serif;
}

body {
  background-color: #000000;
}


.darkgrey {
  color: #EEEEEE;
  background-color: #212121;
}

.darkgrey-4 {
  color: #EEEEEE;
  background-color: #424242;
}

.bg-black {
  color: #EEEEEE;
  background-color: #000000;
}

.toplogo {
  padding-left: 4rem;
  padding-right: 4rem;
  top: 0;
  position: absolute;
  width: 100%;
}

.img-shadow {
  box-shadow: 4px 3px 5px 2px #010101, -2px 0px 3px 1px #010101;
}

.img-shadow-white {
  box-shadow: 4px 3px 5px 2px #111111, -2px 0px 3px 1px #111111;
}

.div-shadow {
  box-shadow: 3px 3px 4px -2px #11111199, 0px 0px 0px 0px #11111199;
}

.form-shadow {
  box-shadow: 2px 2px 3px -2px #11111199, 0px 0px 0px 0px #11111199 !important;
}

.fs-shadow {
  text-shadow: 2px 2px 2px #00000056;
}
.fs-l-1 {
  font-size: calc(1.4rem + 2vw);
}

.fs-l-2 {
  font-size: calc(1.2rem + 1.6vw);
}

.fs-l-3 {
  font-size: calc(1rem + .6vw);
}

.fs-ibarra {
  font-family: 'Ibarra Real Nova', sans-serif;
  font-weight: bold;
  letter-spacing: 0.08rem
}


.bg-overlay {
  position: relative;
  z-index: 1;
}

/* Fullscreen WebGL canvas background */
#bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
  pointer-events: none;
}


/* WebGL unsupported message */
#fallback {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: radial-gradient(1200px 700px at 30% 20%, #1b2250, #070812 70%);
  color: rgba(255,255,255,0.9);
  z-index: 2;
  text-align: center;
  padding: 24px;
}

/*********************************************************************************************/

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400;
  src: url('/images/mavenpro.ttf') format('truetype');
}

@font-face {
  font-family: 'Ibarra Real Nova';
  font-style: normal;
  font-weight: 400;
  src: url('/images/ibarrarealnova.ttf') format('truetype');
}

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('/images/materialicons.ttf') format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
}

.micon {
  font-family: 'Material Icons';
}

.southlandlogotop {
  font-family: 'Ibarra Real Nova', sans-serif;
  font-weight: bold;
  font-size: clamp(4rem, 5vw, 7rem);
  color: white;
  letter-spacing: 0.1rem;
  text-shadow: 
    -0.02rem -0.02rem 0 black,  
    0.02rem -0.02rem 0 black,  
    -0.02rem 0.02rem 0 black,  
    0.02rem 0.02rem 0 black,
    0.2rem 0.2rem 0.25rem rgba(0, 0, 0, 0.2);
}

.southlandlogobottom {
  font-family: 'Ibarra Real Nova', sans-serif;
  font-weight: bold;
  font-size: clamp(4rem, 5vw, 7rem);
  color: white;
  letter-spacing: 0.1rem;
  text-shadow: 
    -0.02rem -0.02rem 0 black,  
    0.02rem -0.02rem 0 black,  
    -0.02rem 0.02rem 0 black,  
    0.02rem 0.02rem 0 black,
    0.2rem 0.2rem 0.25rem rgba(0, 0, 0, 0.2);
}


.animcard {
  --border-angle: 0turn;
  --main-bg: conic-gradient(
      from var(--border-angle),
      rgba(34, 17, 51, 1),
      rgba(17, 17, 34, 1) 5%,
      rgba(17, 17, 34, 1) 60%,
      rgba(34, 17, 51, 1) 95%
    );
  
  border: solid 0.4rem transparent;
  border-radius: 2em;
  --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #b6b6b6, #f1f1f1 99%, transparent);
  
  background: 
    var(--main-bg) padding-box,
    var(--gradient-border) border-box, 
    var(--main-bg) border-box;
  
  background-position: center center;

  animation: bg-spin 4s linear infinite;
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}
@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

@media (min-width: 740px) {
  .featurewidth {
    min-width: 716px;
    max-width: 716px;
  }
}

@media (min-width: 1408px) {
  .featurewidth {
    min-width: 1346px;
    max-width: 1346px;
  }
}