:root{
  --ns-max-width: 1200px;
  --ns-gutter: clamp(14px, 3vw, 28px);
  --ns-radius: 12px;
  color-scheme: dark;
  accent-color: #33d9f6;
}

*,
*::before,
*::after{ box-sizing: border-box; }

html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: clamp(16px, 1.1vw + 12px, 20px);
  scrollbar-color: #33d9f6 #07111a;
}

body{
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
  background-color: #070b12;
  color: #d7e4ee;
}

img,
svg,
video,
canvas,
iframe{
  max-width: 100%;
  height: auto;
}

input,
select,
textarea,
button{
  font: inherit;
  max-width: 100%;
  color: inherit;
  accent-color: #33d9f6;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
select{
  -webkit-appearance: none;
  appearance: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus{
  outline: 2px solid #33d9f6;
  outline-offset: 2px;
}

input:invalid,
select:invalid,
textarea:invalid,
:-moz-ui-invalid{
  box-shadow: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus{
  -webkit-text-fill-color: #d7e4ee;
  caret-color: #d7e4ee;
  -webkit-box-shadow: 0 0 0 1000px #091018 inset;
  box-shadow: 0 0 0 1000px #091018 inset;
  transition: background-color 9999s ease-out 0s;
  border-color: #33d9f6;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration{
  -webkit-appearance: none;
}

a,
a:visited{
  color: #8ceeff;
  -webkit-tap-highlight-color: transparent;
}

main{ width: 100%; }

.container,
.page-shell,
.wrap,
.content,
.panel,
.card,
.login-shell,
.signup-shell,
.form-shell{
  max-width: var(--ns-max-width);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 900px){
  main,
  .container,
  .page-shell,
  .wrap,
  .content,
  .panel,
  .card,
  .login-shell,
  .signup-shell,
  .form-shell{
    padding-left: var(--ns-gutter);
    padding-right: var(--ns-gutter);
  }
  .grid,
  .cards,
  .card-grid,
  .tiles{
    grid-template-columns: 1fr !important;
  }
  .stack-mobile{ flex-direction: column !important; }
}

@media (max-width: 700px){
  [style*="width:"]{ max-width: 100% !important; }
  [style*="min-width:"]{ min-width: 0 !important; }
  [style*="max-width:"]{ max-width: 100% !important; }
}