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

body {
  background: $b-color;
  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;
  margin: 0;
}

main {
  max-width: 60rem;
  min-height: calc(100vh - 464px);
  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: $f-color;
  font-family: $p-font;
  margin: 0;
  padding: 0;
}

a {
  color: $link;
  text-decoration: none;
}

@import 'components/header';
@import 'components/footer';
@import 'pages/index';
@import 'pages/pages';
@import 'pages/event';
@import 'pages/guide';
@import 'pages/auth';
@import 'pages/404';