base.scss

$bluish: rgb(222, 233, 255);
$cyanish: rgb(170, 231, 255);
$dark: black;
$deep: #135;
$ghost: rgba($bluish, 0.6);
$lite: white;
$main: 72vh;
$mobile: 38rem;

html {
  height: 100vh;
  line-height: 1;
}

body {
  color: $deep;
  font-family: serif;
  font-size: large;
  margin: 0;

  &::after {
    content: '';
    position: fixed;
    top: 0;
    height: 100vh;
    left: 0;
    right: 0;
    /* width: 100vw; */
    z-index: -1;

    /* background-attachment: fixed; kills mobile */
    background-image: url('./images/bkgr.png');
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

a {
  border-bottom: 2px solid $ghost;
  font-family: sans-serif;
  text-decoration: none;

  &:hover,
  &:focus {
    border-bottom: 2px solid red;
  }
}

.btn {
  background: rgba($cyanish, 0.4);
  border-radius: 0.25rem;
  box-shadow: 1px 2px 3px rgba(black, 0.2);
  border: 1px solid $lite;
  border-bottom-width: 2px;
  display: inline-block;
  font-family: monospace, serif;
  margin: auto;
  padding: 0 0.5rem;
}

p {
  line-height: 1.4;
}

section {
  max-width: 30rem;
  margin: 2rem auto;
}

.fancy,
html[dir] {
  @import './styles/footer.scss';
  @import './styles/misc.scss';
  @import './styles/scrollshade.scss';
}