@import url('/styles/common.css');
@import url('/styles/classes/breaks.css');
@import url('/styles/classes/flex.css');
@import url('/styles/classes/ul-directions.css');

@import url('/styles/components/footer.css');
@import url('/styles/components/header.css');
@import url('/styles/components/pre-icon.css');
@import url('/styles/components/reference.css');

body {
  max-width: 1300px;
  min-width: 300px;
  padding: 2em;
  margin: 4.5em auto auto;

  background: var(--background);
  font-family: var(--mono-font);
  font-weight: 400;
  font-size: 15px;
  color: var(--text);
  caret-color: var(--primary);
}
.light-mode {
  background-color: white;
  color: black;
  .theme-toggle-image {
	  content:url("/assets/moon.png");
  }
  button {
      background-color: white;
      border: 0px;
      margin: 0px
  }
}
.theme-toggle-image {
  content:url("/assets/sun.png");
}
button {
    background-color: black;
    border: 0px;
    margin: 0px
}

*, *::before, *::after {
  transition: all .3s ease-out;
}


.into-container {
  align-items: center;
}

.intro-container,
.sections {
  column-gap: 2em;
}

.intro-container > *:first-child {
  max-width: 55em;
  margin-bottom: 2em;
}

.logo {
  margin: 2.5em;
  width: 20em;
  border-radius: 50%;
  box-shadow: .5em .5em 50px #fff5;
}

@media (any-hover: hover) {
  .logo:hover {
    width: 25em;
    margin: 0;
    border-radius: 15%;
  }
}


.sections > * {
  max-width: 35em;
}