:root {
  

  --clr-primary-100: hsl(0,0%,100%);
  --clr-primary-200: hsl(204, 100%, 50%);

  --clr-accent-200: hsl(35, 100%, 50%); 

  --clr-neutral-100: hsl(0, 0%, 0%);
  --clr-neutral-200: hsl(0, 0%, 10%);

  --ff-primary: 'GT Walsheim Pro', sans-serif;
  --ff-decorative: 'BaroqueTextJFRegular';

  --ff-body: var(--ff-primary);

  --fw-regular: 300;
  --fw-semibold: 500;
  --fw-bold: 700;

  --fs-100: 1rem;
  --fs-150: 1.25rem;
  --fs-200: 1.5rem;
  --fs-250: 1.75rem;
  --fs-300: 2rem;
  --fs-400: 3rem;
  --fs-500: 4rem;
  --fs-600: 5rem;
  --fs-700: 6rem;
  --fs-800: 7rem;
  --fs-900: 8rem;
  --fs-1000: 9rem;
  --fs-1200: 10rem;

  --fs-button: var(--fs-200);
  --fs-body: var(--fs-200);
  --fs-nav: var(--fs-300);
  --fs-secondary-heading: var(--fs-200);
  --fs-primary-heading: var(--fs-500);
  --fs-decorative: var(--fs-700);

  --logo-size-m: 3rem;
  --logo-size-l: 6rem;
  --logo-size-xl: 12rem;
  --logo-size-xxl: 18rem;

  --anim-fade-speed: 5s;
  --anim-fadein-speed: 5s;
  --anim-slide-speed: 2s;
  
  --opacity-100: 1;
  --opacity-50: 0.5;
  --opacity-0: 0;

  --sliding-background_text-pos: -50px;

  --global-spacing: 50px
}

/*@media (min-width: 50em) {
  :root {
    --fs-body: var(--fs-500);
    --fs-primary-heading: var(--fs-800);
    --fs-secondary-heading: var(--fs-700);
    --fs-nav: var(--fs-300);
    --fs-button: var(--fs-300)
  }
}*/

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
*, 
h1,
p
{
  margin: 0;
  padding: 0;
}

h1 {
  margin: 0%;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

/* Set core body defaults */
body {
  text-rendering: optimizeSpeed;
  line-height: 1;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@font-face {
  font-family: "GT Walsheim Pro";
  src: url("fonts/GTWalsheimPro-CondensedRegular.ttf") format("opentype");
  src: url("fonts/GTWalsheimPro-CondensedRegular.woff") format("woff");
  src: url("fonts/GTWalsheimPro-CondensedRegular.woff2") format("woff2"),
  url("fonts/GTWalsheimPro-CondensedRegular.ttf") format("opentype"),
  url("fonts/GTWalsheimPro-CondensedRegular.woff") format("woff"),
  url("fonts/GTWalsheimPro-CondensedRegular.woff2") format("woff2");
}

@font-face {
  font-family: 'BaroqueTextJFRegular';
  src:
      url('fonts/baroquetextjf_regular.woff2') format('woff2'),
      url('fonts/baroquetextjf_regular.woff') format('woff'),
      url('fonts/BaroqueTextJFRegular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
    background-color: var(--clr-neutral-100);
}

.front-text {
  position: relative;
  color: var(--clr-primary-100);
  font-size: var(--fs-primary-heading);
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  user-select: none;
}

.background-text { 
  position: relative;
  z-index: 0;
  color: var(--clr-neutral-200);
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-primary-heading);
  transition: transform, var(--anim-slide-speed);
  user-select: none;
}

.background-text:hover {
    transform: translateX(var(--sliding-background_text-pos));
    color: var(--clr-primary-200);
  }

#dot {
  position: relative;
  color: var(--clr-primary-200);
  font-family: var(--ff-primary);
  font-weight: var(--fw-bold);
  font-size: var(--fs-primary-heading);
  user-select: none;
}

#me {
    z-index: 1;
    opacity: 20%;
    max-height: auto;
    max-width: 100%;
    transition: opacity, var(--anim-fade-speed);
    /*pointer-events: none;*/ /*make a div that wraps the image so we can use this and still use :hover*/
    user-select: none;
}

#me:hover {
  opacity: var(--opacity-100);
}

/* #logo-white {
  position: absolute;
  opacity: var(--opacity-0);
  height: var(--logo-size-m);
  animation: anim-whitelogo-fadein var(--anim-fadein-speed) linear forwards; /*animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
}

#logo-blue {
  position: absolute;
  opacity: var(--opacity-0);
  height: var(--logo-size-m);
  animation: anim-bluelogo-fadein var(--anim-fadein-speed) linear forwards;
} */

/* Utility classes */

.fw-bold { font-weight: var(--fw-bold); }
.fw-semi-bold { font-weight: var(--fw-seim-bold); }
.fw-regular { font-weight: var(--fw-regular); }

.clr-primary-100 { color: var(--clr-primary-100); }
.clr-primary-200 { color: var(--clr-primary-200); }

.clr-accent-200 { color: var(--clr-accent-200); }

.clr-neutral-100 { color: var(--clr-neutral-100); }
.clr-neutral-100 { color: var(--clr-neutral-200); }

.fs-button { font-size: var(--fs-button); }
.fs-body { font-size: var(--fs-body); }
.fs-nav { font-size: var(--fs-nav); }
.fs-primary-heading { font-size: var(--fs-primary-heading); }
.fs-secondary-heading { font-size: var(--fs-secondary-heading); }
.fs-decorative { font-size: var(--fs-decorative); }

.fs-100 { font-size: var(--fs-100); }
.fs-150 { font-size: var(--fs-150); }
.fs-200 { font-size: var(--fs-200); }
.fs-250 { font-size: var(--fs-250); }
.fs-300 { font-size: var(--fs-300); }
.fs-400 { font-size: var(--fs-400); }
.fs-500 { font-size: var(--fs-500); }
.fs-600 { font-size: var(--fs-600); }
.fs-700 { font-size: var(--fs-700); }
.fs-800 { font-size: var(--fs-800); }
.fs-900 { font-size: var(--fs-900); }
.fs-1000 { font-size: var(--fs-1000); }
.fs-1200 { font-size: var(--fs-1200); }

.pointer-events-none { pointer-events: none; }

.global-spacing { padding-top: var(--global-spacing); }

/* Animations */

@keyframes anim-whitelogo-fadein {
  50% { opacity: 50%; }
  100% { opacity: 0%; }
}

@keyframes anim-bluelogo-fadein {
  50% { opacity: 0%; }
  100% { opacity: 100%; }
}