/*
based on https://glitch.com/~minty-monotype
*/
body {
  background-color: #e9f4fa;
  color: #058118;
  font-family: "DM Mono", serif;
  margin: auto 2ch;
  text-align: justify;
}



/* visited link */
a:visited {
  color: #02370a;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

/* unvisited link */
a:link {
  color: #180581;
  text-decoration: none;
  &:hover {
    border-bottom: 2px solid;
  }
}

/* to use for nav with shadow */
p.two {
  border-style: solid;
  border-width: medium;
}

/* make text not overly long */
p {
  max-inline-size: 66ch;
  overflow-wrap: break-word;
}

/* make images scale better on mobile */
/* probably doesnt work well for vertical images but I will deal with it once I get there */
img {
  max-height: 24rem;
  max-width: 100%;
  object-fit: scale-down;
  object-position: left top;
}

.noise {
    z-index: -1;
    background-image: url(./noise.png);
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
}
.gradient {
    z-index: -2;
    background: linear-gradient(141deg,oklch(0.96 0.07 143.73) 0%, #e9f4fa 30%);
    background-repeat: no-repeat;
    background-size: cover;
}

.gradient {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
}