/* Imports */
@import url("https://fonts.googleapis.com/css2?family=Kalam&family=Zen+Kaku+Gothic+Antique:wght@300&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
@import "social-sharing.css";
@import "colors.css";
@import "global.css";

/* HEADER */
header {
  grid-area: head;
  color: white;
  text-align: center;
}

/* NAV */
nav {
  grid-area: nav;
}

nav ul {
  list-style-type: none;
  display: flex;
  padding: 5px;
  justify-content: space-around;
  font-size: 1.5em;
}

nav ul li {
  padding-right: 10px;
}

nav a {
  color: #f6f7ebff;
  text-decoration: none;
}

nav a:hover {
  opacity: 0.7;
  text-decoration: none;
}



/* MAIN */
main {
  grid-area: main;
  margin-bottom: 20px;
  padding: 0 15px;
}

article button {
  border-radius: 4px;
  border: none;
  background-color: #f5b841;
  display: block;
  padding: 10px;
  margin-top: 10px;
  text-decoration: none;
}

article a, article a:visited {
  color: black;
  text-decoration: none;
}

article a:hover {
  opacity: 0.7;
  text-decoration: none;
}


/* SIDE MENU */
aside {
  grid-area: aside;
}

.side-menu {
  padding: 0 5%;
  margin: auto;
  padding-bottom: 20px;
}

.about-me-figure {
  text-align: center;
}

/* FOOTER */
footer {
  grid-area: foot;
  color: white;
  text-align: center;
  padding: 10px 0;
}

/* MEDIA QUERIES */
@media(min-width: 600px) and (max-width: 900px) {
  body {
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "head head head head head"
        "nav nav nav nav nav"
        "main main main aside aside"
        "foot foot foot foot foot";
  }
}

@media(min-width: 901px) {
  body {
      grid-template-columns: repeat(7, 1fr);
      grid-template-rows: auto;
      grid-template-areas:
        "head head head head head head head"
        "nav nav nav nav nav nav nav"
        "main main main main main aside aside"
        "foot foot foot foot foot foot foot";
  }
}