/* Imports */
@import './fonts.css';

/* Colours */
:root {
	--bg: #000201;
	--greenerBg: #0c0e0d;
	--text: #f2f2f2;
	--accent1: #59dafb;
	--accent2: #a5fb59;
	--dimText: #444444;
}

.bg-accentBlue {
  background: var(--accent1);
}

.bg-accentGreen {
  background: var(--accent2);
}

/* Typography */
.fancy {
  font-family: 'playfairDisplay', serif;
}

.blue {
	--accent: var(--accent1);
}

.green {
	--accent: var(--accent2);
}

.halfAccent {
	background: linear-gradient(180deg, var(--text) 50%, var(--accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.halfAccentTop {
	background: linear-gradient(0, var(--text) 30%, var(--accent) 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

h1 {
  font-size: 5rem;
  font-family: 'Satoshi', sans-serif;
}

a {
  color: var(--text);
}

/* Basecoat */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  margin: 0;
}

/* Layout */
section {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100%;
}

/* Positions */
.fixed {
  position: fixed;
}

/* Shapes */
.circle {
  height: 300vw;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

/* Mobile Support */
@media (max-width: 600px) {
  #mobileHidden {
    display: none !important;
    user-select: none !important;
  }
}

/* Misc */
#followCursor {
  pointer-events: none;
  transform: translate(-50%, -50%);
}