:root {
  --std-radius: 2pt;
  --off-white: rgb(241, 241, 241);
  --color-primary: rgb(0, 153, 255);
}

* {
  box-sizing: border-box;
}

html {
  font-family: "Inter", sans-serif;
}

body {
  width: 100%;
  padding: 0;
  margin: 0;
  overflow: scroll;
  overflow-x: hidden;
  overflow-y: overlay;
}

body * {
  width: 100%;
  padding: 0;
  margin: 0;
  display: block;
}

button {
  background-color: transparent;
  outline: none;
  border: none;
  color: var(--color-primary);
  text-align: left;
}

button :nth-child(2) {
  float: right;
  text-align: left;
}

button > * {
  width: unset;
  display: inline;
}

button :hover {
  filter: brightness(85%);
  cursor: pointer;
}

img {
  object-fit: cover;
  display: block;
  height: 100%;
}

footer {
  padding: 20pt;
  margin-top: 20pt;
}

h1 {
  margin: 0.5em 0pt;
}

p {
  margin: 0.5em 0;
  max-width: 300pt;
}

a {
  color: inherit;
  display: inline;
  text-decoration: none;
  transition: color 100ms;
}

a:hover {
  color: var(--color-primary);
}

input {
  font: inherit;
  background-color: var(--off-white);
  border: none;
  padding: 10pt;
  border-radius: 0;
  outline: none;
  border-radius: var(--std-radius);
}

input:focus {
  background-color: aliceblue;
}

textarea {
  font: inherit;
  background-color: var(--off-white);
  border: none;
  padding: 10pt;
  border-radius: var(--std-radius);
  outline: none;
  resize: none;
}

textarea:focus {
  background-color: aliceblue;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: minmax(400px, 1fr);
  column-gap: 60pt;
  height: 100%;
  width: 100%;
  max-width: 1500px;
  margin: auto;
}

@media only screen and (max-width: 1000px) {
  .grid {
    grid-auto-rows: minmax(300px, 1fr);
  }
}

.grid-span {
  grid-column: 1 / -1;
}

.full-height {
  height: 100%;
}

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

.content {
  padding-top: 1rem;
}

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

.relative {
  position: relative;
}

.pad-sides {
  padding: 0pt 60pt;
  height: 100%;
  max-width: 1500px;
  margin: auto;
}

.pad-bottom {
  padding-bottom: 60pt;
}

.pad-top {
  padding-top: 60pt;
}

@media only screen and (max-width: 1000px) {
  .pad-sides {
    padding: 20pt;
  }
}

.hide-overflow > * {
  overflow: hidden;
}

.weight-normal {
  font-weight: normal;
}

.text-margin-right {
  margin-right: 1.5rem;
}

.inline {
  display: inline;
  width: unset;
}

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

.text-right {
  text-align: right;
}

.text-right * {
  text-align: right !important;
}

.text-center * {
  display: inline;
  margin: 0 10pt;
}

.text-tiny {
  font-size: 10pt;
}

.text-margin-bottom {
  margin-bottom: 1.5rem;
}

.inline-flex {
  display: inline-flex;
}

.all-inline * {
  display: inline;
  margin-right: 20pt;
}

.row-height {
  max-height: 400pt;
}

.separator-lines {
  border-top: 1px solid rgb(204, 204, 204);
  border-bottom: 1px solid rgb(204, 204, 204);
}

.flat-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.flat-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.flat-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.flat-left {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.text-massive {
  font-size: 90pt;
}

.blur {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
}