aero.css

/* ******************* */
/*   Important things  */
/* ******************* */

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3-Regular.ttf");
}

:root {
  --primary: rgb(255, 0, 136);
  --red: rgb(236, 64, 64);
  --green: rgb(76, 207, 24);
  --blue: rgb(68, 109, 243);

  --dark: hsl(0, 0%, 10%);
  --light: hsl(0, 0%, 90%);
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-family: "Source Sans 3", sans-serif;
}

/* ******************* */
/*       Bread         */
/* ******************* */

body {
  margin: 0;
  padding: 0;
  color: hsl(0, 0%, 97%);
  background: hsl(0, 0%, 5%);
}

/* ******************* */
/*       Buttons       */
/* ******************* */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  gap: 0.5em;
  background: hsl(0, 0%, 10%);
  color: hsl(0, 0%, 95%);
  border: 1px solid transparent;
  border-radius: 0.2em;
  cursor: pointer;
  padding: 0.5em 1em;
  outline-color: #fff;
  text-decoration: none;
  transition: 200ms;
}

.button:focus {
  outline-offset: -4px;
}

.button:hover {
  opacity: 0.8;
}

.button.primary {
  background: var(--primary);
}

.button.outlined {
  border: 1px var(--primary) solid;
  background: transparent;
}

.button.ghost {
  background: transparent;
}

.button.ghost:hover {
  background: hsl(0, 0%, 10%);
  opacity: 1;
}

.button.link {
  background: transparent;
  padding: 0;
  border: 1px transparent solid;
  outline: none;
}

.button.link:focus {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.button.link:hover {
  opacity: 1;
}

/* ******************* */
/*       Hyperlink     */
/* ******************* */

.hyperlink {
  background: transparent;
  padding: 0;
  border: 1px transparent solid;
  outline: none;
  color: inherit;
  text-decoration: none;
}

.hyperlink:hover {
  text-decoration: underline;
}

/* ******************* */
/*        Divider      */
/* ******************* */

hr {
  border: none;
  border-bottom: 1px rgba(255, 255, 255, 0.1) solid;
}

/* ******************* */
/*        Inputs       */
/* ******************* */

.select {
  background: hsl(0, 0%, 5%);
  color: hsl(0, 0%, 97%);
  border: 1px hsl(0, 0%, 10%) solid;
  padding: 0.5em 1em;
  font-size: 1em;
  border-radius: 0.2em;
  cursor: pointer;
  outline-color: #fff;
}

.input {
  background: hsl(0, 0%, 5%);
  color: hsl(0, 0%, 97%);
  border: 1px hsl(0, 0%, 10%) solid;
  padding: 0.5em 1em;
  font-size: 1em;
  border-radius: 0.2em;
  outline-color: #fff;
}

/* ******************* */
/*        Cards       */
/* ******************* */

.card {
  padding: 1em;
  border: 1px hsl(0, 0%, 10%) solid;
  border-radius: 0.2em;
}

.card .title {
  margin-top: 0;
}

/* ******************* */
/*  Titles & Subtitles */
/* ******************* */

.title {
  font-size: 2em;
  margin-bottom: 0;
}

.subtitle {
  font-size: 1em;
  font-weight: normal;
  color: hsl(0, 0%, 80%);
}

/* ******************* */
/*      Sections       */
/* ******************* */

.section {
  display: block;
  width: 100%;
  padding: 1em;
  margin: 1em 0;
}

.section.medium {
  padding: 2em;
}

.section.large {
  padding: 3em;
}

/* ******************* */
/*       Helpers       */
/* Very many symbols...*/
/* ******************* */

/* Flex Helpers */

.align-items-center {
  display: flex;
  align-items: center;
}

.justify-content-center {
  display: flex;
  justify-content: center;
}

/* Text Align Helpers */

.has-text-centered {
  text-align: center;
}

/* Text Color Helpers */

.has-color-primary {
  color: var(--primary);
}

.has-color-red {
  color: var(--red);
}

.has-color-green {
  color: var(--green);
}

.has-color-blue {
  color: var(--blue);
}

.has-color-dark {
  color: var(--dark);
}

.has-color-light {
  color: var(--light);
}

/* Background Color Helpers */

.has-background-primary {
  background: var(--primary);
}

.has-background-red {
  background: var(--red);
}

.has-background-green {
  background: var(--green);
}

.has-background-blue {
  background: var(--blue);
}

.has-background-dark {
  background: var(--dark);
}

.has-background-light {
  background: var(--light);
}

/* Margin Helpers */

.mt-1 {
  margin-top: 0.2em;
}

.mt-2 {
  margin-top: 0.5em;
}

.mt-3 {
  margin-top: 1em;
}

.mt-4 {
  margin-top: 1.25em;
}

.mt-5 {
  margin-top: 1.5em;
}

.mb-1 {
  margin-bottom: 0.2em;
}

.mb-2 {
  margin-bottom: 0.5em;
}

.mb-3 {
  margin-bottom: 1em;
}

.mb-4 {
  margin-bottom: 1.25em;
}

.mb-5 {
  margin-bottom: 1.5em;
}

.ml-1 {
  margin-left: 0.2em;
}

.ml-2 {
  margin-left: 0.5em;
}

.ml-3 {
  margin-left: 1em;
}

.ml-4 {
  margin-left: 1.25em;
}

.ml-5 {
  margin-left: 1.5em;
}

.mr-1 {
  margin-right: 0.2em;
}

.mr-2 {
  margin-right: 0.5em;
}

.mr-3 {
  margin-right: 1em;
}

.mr-4 {
  margin-right: 1.25em;
}

.mr-5 {
  margin-right: 1.5em;
}

.mx-1 {
  margin: 0.2em;
}

.mx-2 {
  margin: 0.5em;
}

.mx-3 {
  margin: 1em;
}

.mx-4 {
  margin: 1.25em;
}

.mx-5 {
  margin: 1.5em;
}

/* Padding Helpers */

.pt-1 {
  padding-top: 0.2em;
}

.pt-2 {
  padding-top: 0.5em;
}

.pt-3 {
  padding-top: 1em;
}

.pt-4 {
  padding-top: 1.25em;
}

.pt-5 {
  padding-top: 1.5em;
}

.pb-1 {
  padding-bottom: 0.2em;
}

.pb-2 {
  padding-bottom: 0.5em;
}

.pb-3 {
  padding-bottom: 1em;
}

.pb-4 {
  padding-bottom: 1.25em;
}

.pb-5 {
  padding-bottom: 1.5em;
}

.pl-1 {
  padding-left: 0.2em;
}

.pl-2 {
  padding-left: 0.5em;
}

.pl-3 {
  padding-left: 1em;
}

.pl-4 {
  padding-left: 1.25em;
}

.pl-5 {
  padding-left: 1.5em;
}

.pr-1 {
  padding-right: 0.2em;
}

.pr-2 {
  padding-right: 0.5em;
}

.pr-3 {
  padding-right: 1em;
}

.pr-4 {
  padding-right: 1.25em;
}

.pr-5 {
  padding-right: 1.5em;
}

.px-1 {
  padding: 0.2em;
}

.px-2 {
  padding: 0.5em;
}

.px-3 {
  padding: 1em;
}

.px-4 {
  padding: 1.25em;
}

.px-5 {
  padding: 1.5em;
}