@charset "UTF-8";
/* Variáveis padrão */
/* Fontes */
@font-face {
  /* https://fonts.google.com/specimen/Mooli/about */
  font-family: "Mooli";
  src: url("font/Mooli-Regular.ttf") format("truetype");
}
/* Cursores customizados */
body {
  cursor: url("img/cursor-mario.png") 2 3, default;
}

a {
  cursor: url("img/cursor-hand.png") 6 1, pointer;
}

/* Padrões de texto */
body {
  font-family: "Mooli", system-ui;
  /* Gambiarra de ajuste de tamanho.
     Para deixar o cursor do mouse preenchendo a janela inteira. */
  height: 100%;
  margin: 0;
}

a {
  text-decoration: underline;
  text-decoration-skip-ink: auto; /* Pula sublinha debaixo da baseline :D */
  text-decoration-style: wavy; /* dotted também fica bom */
  color: #0D77FA;
}

body {
  /* Background */
  background-image: linear-gradient(rgba(235, 75, 98, 0.8), rgba(235, 75, 98, 0.8)), url("../img/webtreats-seamless-cloud-4.jpg");
  background-size: rgba(235, 75, 98, 0.5);
  background-color: 250px;
  color: black;
  /* Grid */
  display: grid;
  grid-template-columns: 800px 220px;
  grid-template-areas: "header    header" "main      aside " "footer    footer";
  row-gap: 10px;
  column-gap: 25px;
  justify-content: center;
}

/* Responsividade */
@media screen and (max-width: 1059px) {
  body {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "main" "aside " "footer";
    margin-left: 5px;
    margin-right: 5px;
  }
}
header {
  grid-area: header;
  justify-self: center;
}

main {
  grid-area: main;
}

aside {
  grid-area: aside;
  align-self: start;
}

footer {
  grid-area: footer;
  justify-self: center;
}

/* Bordas e fundos */
main, aside {
  /* bg */
  background-image: linear-gradient(rgba(235, 218, 143, 0.8), rgba(235, 218, 143, 0.8)), url("../img/pai.jpg");
  background-size: 300px;
  background-color: #EBDA8F;
  /* border */
  border-radius: 20px;
  border: 7px dashed #FFFFFF;
  padding-left: 23px;
  padding-right: 23px;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: 0px 0px 10px 5px rgba(1, 1, 1, 0.3);
  text-shadow: 1px 1px rgba(255, 255, 255, 0.6666666667);
}

header, footer {
  color: white;
  text-shadow: 2px 2px black;
}

/* Imagens responsivas */
img {
  max-width: 100%;
  height: auto;
}

header img {
  box-shadow: 0px 0px 5px 5px rgba(255, 255, 255, 0.5);
}

h1, h2, h3, h4, h5, h6 {
  background-image: url("img/cheese-seamless-vector-background.jpg");
  background-size: 100px;
}

/*# sourceMappingURL=index-style.css.map */