@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cousine:wght@400;700&display=swap');

:root {
  --text: #fffce5;
  --background: #11000e;
  --primary: #e41aa4;
  --secondary: #5b0130;
  --accent: #eedb00;

  --main-font: 'Poppins';
  --accent-font: 'Jost';
  --monospace-font: 'Cousine';
}

body {
  font-family: var(--main-font);
  font-size: 24px;
  background-color: var(--background);
  color: var(--text);
  margin: 0px;
  overflow-x: hidden;
  padding: 5vh 20vw;
}

::-moz-selection {
  background-color: var(--secondary);
  color: var(--text);
}

::selection {
  background-color: var(--secondary);
  color: var(--text);
}

h1, h2 { font-family: var(--accent-font); }
h1, h2, h3, h4, h5, h6, p { margin: 0px; }
h1 { font-size: 96px; }
h2 { font-size: 48px; }
h3 { font-size: 24px; }

button {
  background-color: var(--secondary);
  color: var(--text);
  border: none;
  padding: 5px 7px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.25s
}

button:hover  { background-color: var(--primary); }
button:active { background-color: var(--accent); color: var(--background); scale: 90%; }

input, select, option {
  background-color: var(--secondary);
  color: var(--text);
  border: 2px var(--primary) solid;
  border-radius: 2px;
  transition: 0.25s
}

input:hover,
select:hover,
option:hover {
  background-color: var(--primary);
}

a:link       { color: var(--primary); text-decoration: none; }
a:visited    { color: var(--primary); }
a:hover      { -webkit-text-decoration: underline 2px; text-decoration: underline 2px; }

i { opacity: 80%; }

p {
  margin: 0px;
  padding: 2px;
}

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

.fleft  { float: left; }
.fright { float: right;}

.invis  { opacity: 0%; }
.hidden { display: none; }
.mono   { font-family: var(--monospace-font); }
.flip   { transform: scaleY(-100%); }

.text:not(svg)       { color: var(--text)       !important; }
.background:not(svg) { color: var(--background) !important; }
.primary:not(svg)    { color: var(--primary)    !important; }
.secondary:not(svg)  { color: var(--secondary)  !important; }
.accent:not(svg)     { color: var(--accent)     !important; }

svg.text       { fill: var(--text)       !important; }
svg.background { fill: var(--background) !important; }
svg.primary    { fill: var(--primary)    !important; }
svg.secondary  { fill: var(--secondary)  !important; }
svg.accent     { fill: var(--accent)     !important; }

.spacing.small  { height:  25px; }
.spacing.medium { height:  50px; }
.spacing.large  { height: 100px; }
.spacing {
  display: block;
  width: 0px;
  opacity: 0%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.text-gradient {
  background-image: linear-gradient(60deg, var(--primary) 20%, var(--accent)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  display: inline-block !important;
}
.text-gradient-reverse {
  background-image: linear-gradient(-60deg, var(--primary) 20%, var(--accent)) !important;
}
.text-gradient-internal {
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
}

@media screen and (max-width: 750px) {
  body {
    padding: 5vh 4vw;
    font-size: 16px;
  }
  h1 { font-size: 48px; }
  h2 { font-size: 24px; }
  h3 { font-size: 16px; }
}