sf-static/alternative-web/styles.css

@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&family=Roboto:wght@100;300;400;500;700;900&display=swap");
* {
  --fluid-size: var(--min-font-size) * 1px + (var(--max-font-size) - var(--min-font-size)) * ((100vw - 420px) / (1200 - 420));
  --bkg-color: rgb(200, 0, 0);
  --faded-black: rgba(0, 0, 0, .20);
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  --min-font-size: 50;
  --max-font-size: 80;
  scroll-padding-top: clamp(var(--min-font-size) * 1.5px, var(--fluid-size), var(--max-font-size) * 1.5px);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  background: var(--bkg-color);
}

#loader {
  width: 100vw;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px);
  font-family: 'Fredoka One', serif;
  color: #eee;
  text-shadow: 0px 3px 0px #8b8b8b;
  text-transform: uppercase;
}

header {
  position: fixed;
  height: 100vh;
  width: calc(100vw - 20px);
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

header p {
  --min-font-size: 50;
  --max-font-size: 80;
  font-size: clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px);
  font-family: 'Fredoka One', serif;
  margin: 0;
  line-height: .8;
  margin-left: -.25em;
  color: rgba(0, 0, 0, 0.1);
  text-shadow: 0px 2px 3px rgba(255, 0, 0, 0.1);
  letter-spacing: 0px;
}

main {
  z-index: 2;
  width: clamp(50vw, 350px, 100vw - 100px);
  margin-bottom: 200px;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
}

footer .vol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: 'Roboto', sans-serif;
  font-size: 1.25em;
  padding: .5em;
  background: #1542F6;
  color: white;
  letter-spacing: 10px;
  font-weight: 100;
}

footer .vol a {
  font-weight: 900 !important;
}

nav.glossary {
  background-color: var(--bkg-color);
  z-index: 2;
  width: 100vw;
}

nav.glossary ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  margin: 0;
  padding: .5em;
}

nav.glossary ul li {
  border-radius: .5em;
  background-color: var(--faded-black);
  padding: 10px;
  margin: .25em;
  font-family: 'Roboto', sans-serif;
  border: 2px solid transparent;
  text-transform: uppercase;
  font-weight: 800;
}

nav.glossary ul li a {
  color: var(--bkg-color);
  text-transform: uppercase;
  font-weight: 800;
  position: relative;
}

nav.glossary ul li a:hover {
  text-decoration: none;
  color: white !important;
}

nav.glossary ul li a:hover:after {
  content: '';
  position: absolute;
  width: calc(100% + 16px);
  height: .15em;
  background-color: black;
  left: -8px;
  top: .5em;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
  border-radius: 100px;
}

nav.glossary ul li:first-child {
  background-color: transparent;
  border: 2px solid var(--faded-black);
  color: var(--faded-black);
}

nav.glossary ul li .todo {
  display: none;
  background: white;
  border-radius: 100px;
  color: black;
}

nav.contact {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: .4;
  position: fixed;
  height: 100vh;
  width: 100vw;
  top: 0px;
  right: 0px;
  font-family: 'Roboto', sans-serif;
}

nav.contact ul {
  padding: 0;
  margin: 0;
  margin-right: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

nav.contact ul li {
  list-style-type: none;
  font-size: 16pt;
  font-weight: bold;
  height: 1.5em;
}

nav.contact ul li.hidden {
  display: none;
}

nav.contact ul li .suggestions {
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  -webkit-transform-origin: 51% -261%;
          transform-origin: 51% -261%;
  text-transform: uppercase;
  font-weight: 900;
  font-size: .75em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 14px;
  line-height: .9;
}

nav.contact ul li .arrow {
  height: 1.5em;
}

nav.contact ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: transparent;
}

@media screen and (max-width: 767px) {
  nav.contact ul li a span {
    display: none;
  }
}

nav.contact ul li a:hover {
  text-decoration: underline;
  color: black;
  -webkit-transition: .3 all;
  transition: .3 all;
}

nav.contact ul li img {
  height: 1.5em;
}

section {
  margin-top: 10vh;
  border-radius: 30px;
  background: -webkit-gradient(linear, left top, right top, from(#e4cfb4), to(#bba587));
  background: linear-gradient(to right, #e4cfb4, #bba587);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1px 10px 1px 50px;
  position: relative;
  -webkit-box-shadow: 0px 3px 0px #9b8465, 0 0 100px 10px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 3px 0px #9b8465, 0 0 100px 10px rgba(0, 0, 0, 0.5);
}

h1 {
  color: #eee;
  text-shadow: 0px 3px 0px #8b8b8b;
  text-transform: uppercase;
  position: absolute;
  top: -1.5em;
  --min-font-size: 30;
  --max-font-size: 60;
  font-size: clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px);
  font-family: 'Fredoka One', serif;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

h1:after {
  content: '';
  position: absolute;
  width: calc(100% + 20px);
  height: .15em;
  background-color: black;
  left: -10px;
  -webkit-transform: rotate(5deg);
          transform: rotate(5deg);
  border-radius: 100px;
}

.items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
}

.items .item {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 6em;
      grid-template-columns: auto 6em;
      grid-template-areas: "title badges"
 "desc badges";
}

li {
  list-style: none;
}

.item-title {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: title;
  font-family: 'Roboto', sans-serif;
}

.item-title h2 {
  --min-font-size: 24;
  --max-font-size: 40;
  font-size: clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0;
}

.item-title h2:before {
  content: '';
  width: 20px;
  height: 20px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 100px 24px 24px 100px;
  margin-right: 10px;
}

.item-title .link-twitter {
  margin-left: 30px;
  color: var(--bkg-color);
  font-weight: 700;
}

a {
  color: black;
  text-decoration: none;
  -webkit-transition: all .3s;
  transition: all .3s;
}

a:hover {
  color: black;
  text-decoration: underline;
}

p.desc {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: desc;
  --min-font-size: 12;
  --max-font-size: 20;
  font-size: clamp(var(--min-font-size) * 1px, var(--fluid-size), var(--max-font-size) * 1px);
  font-family: 'Roboto', sans-serif;
  margin-left: 30px;
  opacity: .5;
}

a > h2 {
  display: inline;
}

.badge- {
  display: none;
}

.badges {
  -ms-grid-row: 1;
  -ms-grid-row-span: 2;
  -ms-grid-column: 2;
  grid-area: badges;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  height: 100%;
  padding: 0;
}

.badge-1 {
  width: 2em;
  height: 2em;
  padding: .25em;
  overflow: hidden;
}

.badge-1 .flyout {
  font-family: 'Roboto', sans-serif;
  position: absolute;
  max-width: 2em;
  max-height: 2em;
  -webkit-transition: none;
  transition: none;
  padding: 10px;
  margin: -10px;
  border-radius: 10px;
}

.badge-1 .flyout p {
  opacity: 0;
  font-size: .75em;
  -webkit-transition: none;
  transition: none;
}

.badge-1 h3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding: 10px;
  margin: -10px;
}

.badge-1 h3:before {
  border-radius: 1em;
  text-align: center;
  content: '';
  font-family: 'Fredoka One', serif;
  font-size: .75em;
  text-align: center;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 2em;
  height: 2em;
}

.badge-1 h3 span {
  overflow: hidden;
  width: 0;
  opacity: 0;
  white-space: nowrap;
}

.badge-1:hover {
  overflow: visible;
  z-index: 2;
}

.badge-1:hover .flyout {
  background-color: white;
  border-radius: 10px;
  max-width: 20em;
  max-height: 20em;
  -webkit-box-shadow: 5px 0 10px 3px rgba(0, 0, 0, 0.1);
          box-shadow: 5px 0 10px 3px rgba(0, 0, 0, 0.1);
  -webkit-transition: all .3s;
  transition: all .3s;
  min-width: calc(2em + 15ch + 30px);
}

.badge-1:hover .flyout h3 span {
  margin-left: 10px;
  opacity: 1;
  width: 15ch;
  -webkit-transition: opacity .3s;
  transition: opacity .3s;
}

.badge-1:hover .flyout p {
  opacity: 1;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.badge-dx h3:before {
  background: #c80000;
  content: 'dx';
  -webkit-box-shadow: 0px 2px 0px #950000;
          box-shadow: 0px 2px 0px #950000;
}

.badge-bc h3:before {
  background: orange;
  content: 'bc';
  -webkit-box-shadow: 0px 2px 0px #cc8400;
          box-shadow: 0px 2px 0px #cc8400;
}

.badge-fd h3:before {
  background: #3088D4;
  content: 'fd';
  -webkit-box-shadow: 0px 2px 0px #246ead;
          box-shadow: 0px 2px 0px #246ead;
}

.badge-en h3:before {
  background: #59ff2f;
  content: 'en';
  color: #28c800;
  -webkit-box-shadow: 0px 2px 0px #28c800;
          box-shadow: 0px 2px 0px #28c800;
}

.badge-an h3:before {
  background: black;
  content: 'an';
  -webkit-box-shadow: 0px 2px 0px #4d4d4d;
          box-shadow: 0px 2px 0px #4d4d4d;
}

.badge-pr h3:before {
  background: #c766c7;
  content: 'pr';
  -webkit-box-shadow: 0px 2px 0px #b743b7;
          box-shadow: 0px 2px 0px #b743b7;
}

.badge-fs h3:before {
  background: hotpink;
  content: 'fs';
  -webkit-box-shadow: 0px 2px 0px #ff369b;
          box-shadow: 0px 2px 0px #ff369b;
}

.badge-os h3:before {
  background: #eee;
  content: 'os';
  color: #d5d5d5;
  -webkit-box-shadow: 0px 2px 0px #d5d5d5;
          box-shadow: 0px 2px 0px #d5d5d5;
}

@media screen and (max-width: 699px) {
  html {
    scroll-padding-top: 60px;
  }
  header {
    top: -5px;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  header p {
    --min-font-size: 40;
    margin-left: 0;
  }
  header p .dot {
    display: none;
  }
  header p.alternative {
    color: rgba(255, 255, 255, 0.1);
  }
  footer {
    font-size: .9em;
  }
  section {
    padding-left: 20px !important;
  }
  .item {
    -ms-grid-columns: auto !important;
        grid-template-columns: auto !important;
        grid-template-areas: "title"
 "desc"
 "badges" !important;
    margin-bottom: 30px;
  }
  .item h2 {
    --min-font-size: 40 !important;
  }
  .badges {
    -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
            justify-content: flex-start !important;
  }
  .badge-1 a {
    display: none;
  }
  nav.contact {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-top: 130px;
  }
  nav.glossary li {
    padding: 0 !important;
    background-color: transparent !important;
  }
  nav.glossary li a {
    color: var(--faded-black) !important;
  }
  nav.glossary li:first-child {
    background-color: var(--faded-black) !important;
    border-color: transparent !important;
    color: var(--bkg-color) !important;
    padding: 0 5px !important;
  }
  body {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  header {
    font-size: 2.1em !important;
  }
  main {
    width: 80vw;
    margin-left: 10px;
  }
  h1 {
    font-size: 40px;
    font-size: min(8vw,40px);
    line-height: 0em !important;
    top: -.85em;
  }
  h2 {
    font-size: 2em !important;
  }
  .item {
    margin-top: 1em;
    margin-bottom: 2em;
  }
  .badges {
    height: auto !important;
  }
  footer {
    font-size: min(4vw, 16px);
  }
}
/*# sourceMappingURL=styles.css.map */