body {
  margin: auto 0;
}

.zone {
  cursor: pointer;
  color: #fff;
  font-size: 2em;
  border-radius: 4px;
  border: 1px solid #bbb;
  transition: all 0.3s linear;
}

.zone:hover {
  -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px,
    inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px,
    inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  -o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px,
    inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
  box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px,
    inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}

.main-nav {
  display: flex;
  list-style: none;
  font-size: 0.7em;
  margin: 0;
}
@media only screen and (min-width: 641px) and (max-width: 800px) {
  .main-nav {
    font-size: 0.7em;
    padding: 0;
  }
  .container {
    font-size: 1.6rem;
  }
}
@media only screen and (max-width: 640px) {
  .main-nav {
    font-size: 0.5em;
    padding: 0;
  }
  .container {
    font-size: 1.4rem;
  }
}

.push {
  margin-left: auto;
}
li {
  padding: 20px;
  margin: 0;
}
a {
  color: #f5f5f6;
  text-decoration: none;
}

/* COVER */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20vh;
  padding: 40px;
}

/* PROJECT GRID */
.grid-wrapper {
  display: grid;
  grid-gap: 0px;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}
.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.box {
  background-color: #444;
  padding: 20px;
  margin: 40px;
}

.footer-text a {
  color: #000;
  text-decoration: underline;
}

/* FOOTER */
.footer-text {
  padding: 40px;
  text-align: center;
  color: #000;
  font-size: 1.5em;
}

/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
 *  Green Background
 **********************************************************************/
.green {
  background: #279d9f; /* Old browsers */
  background: -moz-linear-gradient(top, #279d9f 0%, #0cdade 100%); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #279d9f),
    color-stop(100%, #0cdade)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #279d9f 0%,
    #0cdade 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    #279d9f 0%,
    #0cdade 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #279d9f 0%, #0cdade 100%); /* IE10+ */
  background: linear-gradient(top, #279d9f 0%, #0cdade 100%); /* W3C */
}

/***********************************************************************
 *  Red Background
 **********************************************************************/
.red {
  grid-row: span 6;
  background: #ce3375; /* Old browsers */
  background: -moz-linear-gradient(top, #ce3375 0%, #cf0404 100%); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #ce3375),
    color-stop(100%, #a1084a)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #ce3375 0%,
    #a1084a 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    #ce3375 0%,
    #cf0404 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ce3375 0%, #cf0404 100%); /* IE10+ */
  background: linear-gradient(top, #ce3375 0%, #cf0404 100%); /* W3C */
}

/***********************************************************************
 *  Yellow Background
 **********************************************************************/
.yellow {
  background: #ffa74f; /* Old browsers */
  background: -moz-linear-gradient(top, #ffa74f 0%, #e57606 100%); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #ffa74f),
    color-stop(100%, #e57606)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #ffa74f 0%,
    #e57606 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    #ffa74f 0%,
    #e57606 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffa74f 0%, #e57606 100%); /* IE10+ */
  background: linear-gradient(top, #ffa74f 0%, #e57606 100%); /* W3C */
}

/***********************************************************************
 *  Blue Background
 **********************************************************************/
.blue {
  background: #1b5091; /* Old browsers */
  background: -moz-linear-gradient(
    top,
    #1b5091 0%,
    #1768ba 44%,
    #1781eb 100%
  ); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #1b5091),
    color-stop(44%, #1768ba),
    color-stop(100%, #1781eb)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #1b5091 0%,
    #1768ba 44%,
    #1781eb 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    #1b5091 0%,
    #1768ba 44%,
    #1781eb 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(
    top,
    #1b5091 0%,
    #1768ba 44%,
    #1781eb 100%
  ); /* IE10+ */
  background: linear-gradient(
    top,
    #1b5091 0%,
    #1768ba 44%,
    #1781eb 100%
  ); /* W3C */
}