:root{
  --primary-green: #00C6BD;
  --secondary-gray: #ccd6f6;

  /* font sizes */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --text-7xl: 4.5rem;
}

/* General Styling */
html{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body{
  background-color: #0a192f;
  color: #778899;
}

/* Remove Default Style */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.hightlight{
  color: var(--primary-green);
}

.underline{
  border-bottom-width: 0;
  background-image: linear-gradient(transparent, transparent), linear-gradient(var(--primary-green), var(--primary-green));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.2s ease-in-out;
}

.underline:hover{
  background-size: 100% 2px;
  background-position: 0 100%;
}

/* Layout */
main{
  max-width: 24rem;
  margin: 0 auto;
}

@media (min-width: 640px){
  main{
    max-width: 32rem;
  }
}

@media (min-width: 768px){
  main{
    max-width: 42rem;
  }
}

@media (min-width: 1024px){
  main{
    max-width: 48rem;
  }
}

@media (min-width: 1280px){
  main{
    max-width: 64rem;
  }
}