@import url("https://fonts.googleapis.com/css2?family=Lora&display=swap");
/*Color variables*/
/*Font-family variables*/
/*Sizes page*/
/*Mixin declaractions*/
/*A nesting declaration*/
body {
  background-color: #000000;
}
body div {
  max-width: 1000px;
  margin: auto 0;
}
@media (min-width: 900px) {
  body div {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 25% 80%;
  }
}
body div header {
  text-align: right;
  grid-column: 1/2;
}
body div main {
  grid-column: 2/3;
}

/*Headers*/
h1,
h2 {
  font-family: lora;
}

header {
  background-color: #6495ED;
  padding: 2rem;
  text-align: right;
}

/*Images*/
img {
  max-width: 100%;
}

/*Main*/
main {
  background-color: #FAEBD7;
  padding: 2rem;
}

main,
nav ul li {
  font-family: Arial, Helvetica, sans-serif;
  list-style: none;
  padding: 0.2rem 0;
}

/*article*/
article {
  max-width: 35rem;
  padding: 2rem;
  margin: 2rem auto;
  background-color: #FFFFFF;
  box-shadow: 4px 2px 2px 2px rgba(4, 19, 61, 0.2);
  text-align: center;
}

article div {
  text-align: left;
}

article p {
  text-align: justify;
}

/*links*/
a,
a:visited {
  color: #6495ED;
  text-decoration: none;
}

nav ul li a {
  color: #FAEBD7;
}

nav ul li a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

main {
  background-color: #FAEBD7;
  padding: 2rem;
}

header h1 a {
  color: #FAEBD7 !important;
}

nav li a:visited {
  color: #FAEBD7;
  text-decoration: none;
}

article h2 a:hover,
article p a:hover {
  color: #6495ED;
  text-decoration: underline;
}

article h2 a,
a:visited {
  color: #000000;
}

article p a:visited {
  color: #6495ED;
  text-decoration: none;
}

nav ul li a:active,
article h2 a:active,
a:active,
article p a:active {
  color: #DEB887;
}

/*# sourceMappingURL=main.css.map */