body {
  margin: 0 auto;
  font-family: Arial;
}

.zone {
  /*padding:30px 50px;*/
  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;
}

/***********************************************************************
 *  Nav Bar
 **********************************************************************/
.navbar {
  display: flex;
  margin: 0;
  font-size: 0.7em;
}
/*
.bg-light {
    background-color: #7abcff;
}
*/
.push {
  margin-left: auto;
}

li {
  padding: 20px;
}

a {
  color: #f5f5f6;
  text-decoration: none;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/***********************************************************************
 *  Cover
 **********************************************************************/
.container {
  /*show heigh: auto*/
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover {
  width: 30rem;
}

/***********************************************************************
 *  Grid Panel
 **********************************************************************/
.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  grid-gap: 20px;
}

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

.box > img {
  width: 100%;
}

.box:hover {
  -webkit-transform: rotate(-7deg);
  -moz-transform: rotate(-7deg);
  -o-transform: rotate(-7deg);
  transform: rotate(-7deg);
}

.box > img {
  width: 100%;
  height: 100%;
}

/***********************************************************************
 *  Footer
 **********************************************************************/
footer {
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #444;
}

.copyright {
  font-size: 20px;
  color: black;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

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

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

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

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