@import 'fonts';
@import 'config';

body {
  background: var(--b-color);
  margin: 0;
  /*
  background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .075) 25%, rgba(255, 255, 255, .075) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .075) 75%, rgba(255, 255, 255, .075) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .075) 25%, rgba(255, 255, 255, .075) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .075) 75%, rgba(255, 255, 255, .075) 76%, transparent 77%, transparent);
  background-size: 4.5rem 4.5rem;
  */
}

main {
  max-width: 60rem;
  min-height: calc(100vh - 23rem);
  margin: 0 auto;
  padding: 0 4rem;
}

@media only screen and (max-width: 768px) {
  main { padding: 2rem 1.5rem }
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

*, *:after, *:before { 
  box-sizing: border-box;
  
  &:focus {
    outline: none;
  }
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
b,
label {
  color: var(--f-color);
  font-family: var(--p-font);
  margin: 0;
  padding: 0;
}

a {
  color: var(--link);
  text-decoration: none;
}