* {
  box-sizing: border-box;
}
html,
body {
  padding: 0;
  margin: 0;
  color: white;
  font-family: 'Inter', 'Roboto', sans-serif;
  font-size: 16px;
  height: 100vh;
}
body {
  background-color: black;
  background-image:  url('/assets/img/site-background.svg');
  background-size: cover;
}
.backdrop {
  width: 100%;
  height: 100vh;
  overflow: auto;
  background: linear-gradient(120deg, rgba(14,42,89,0.9), rgba(33,77,38,0.9));
  background-position: fixed;
}
a {
  background: #6dd95e;
  color:  black;
  border-radius: 3px;
  padding-right: 0.2em;
  padding-left: 0.2em;
  text-decoration: none;
}
a::after {
  content: "\2192";
}
a.external::after {
  content: "\2197";
}
a.back::after {
  content: "";
}
a.back::before {
  content: "\2190";
}
a:hover {
  background:  white;
}

.footer {
  color: #666666;
  font-size: 12px;
}
.footer a {
  background: transparent;
  color: #666666;
  border-radius: 0;
  padding-right: auto;
  padding-left: auto;
  text-decoration: underline;
}
.footer a::after {
  content: "\2197";
}
.footer a.back::after {
  content: "";
}
.footer a.back::before {
  content: "\21B5";
}
.footer a:hover {
  color:  white;
}


/* Layout */
.outline {
  max-width: 600px;
  min-width: 300px;
  height: 100%;
  min-height: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}
.outline-bg {
  height: 100%;
  min-height: 100%;  
  /*background-color: #BBE776;*/
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 30px;
  padding-bottom: 30px;
}
.outline-bg.bg-1 {
  /*background-image:  url('/assets/img/bg_1_light.jpg');*/
}
.outline-bg.bg-2 {
  /*background-image:  url('/assets/img/bg_2.jpg');*/
}

.panel {
  padding: 20px;
  margin: 0 -20px 20px -20px;
  background: rgba(0, 0, 0, 0.80);
}
.panel-head {
  font-size: 1.3em;
}
.panel-body {
  font-size: 1.3em;
}

/* Colors */
.primary {
  color: white;
}
.secondary {
  color: rgba(48, 118, 238, 0.9);
}
.tertiary {
  color: rgba(76, 178, 88, 0.9);
}

/* Utilities */
.float-right {
  float:  right;
}
.hidden {
  visibility: hidden;
}
.d-n {
  display: none;
}
.d-i {
  display: inline;
}
.d-b {
  display: block;
}
.d-f {
  display: flex;
}
.d-ib {
  display: inline-block;
}
.d-if {
  display: inline-flex;
}