* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poiret One", serif;
  background-color: #f7f7f7;
}
main {
  margin: 50px;
}
html {
  scroll-behavior: smooth;
  height: 100%;
}

/*.home{
  display: grid;
  grid-template-columns: 1fr 1fr;
}*/

h1 {
  text-align: center;
  padding: 85px;
  font-size: 100px;
  margin-top: revert;
  font-weight: bold;
}

#cards {
  display: grid;
  margin-top: 55px;
  margin-bottom: 186px;
  text-decoration: none;
  width: 100%;
}

#cards article {
  padding: 0px; /*https://www.w3schools.com/css/css_align.asp*/
  height: 10rem;
  text-align: center;
  align-content: center;
}

#cards p {
  text-align: center;
  font-size: 50px;
  color: white;
  /*padding: 51px;*/
  position: relative;
  z-index: 1;
}

#cards a {
  text-decoration: none;
}

#cards a img {
  transition: opacity 750ms;
  opacity: 0;
}

#cards a:hover img {
  opacity: 0.75;
}

.top {
  background-image: linear-gradient(to right, #873fb7, #64319b);
  position: relative;
}

.middle {
  background-image: linear-gradient(to left, #4a6047, #334431);
  position: relative;
}

.bottom {
  background-image: linear-gradient(to right, #51331f, #362215);
  position: relative;
}

.dance,
.paint,
.wood {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; /*https://stackoverflow.com/questions/1093955/make-the-image-go-behind-the-text-and-keep-it-in-center-using-css   and   https://www.w3schools.com/howto/howto_css_image_text.asp*/
  opacity: 0;
  left: -1px;
  top: 0;
  z-index: 0;
  overflow: hidden;
}

article h2 {
  font-size: 80px;
}

/*article p {
  margin-top: 40px;
}*/

#dance,
#painting,
#woodworking {
  margin-bottom: 150px;
}

main img {
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.445);
  border-radius: 10px;
}

main img:hover {
  transform: scale(1.05);
  transition: transform 1.2s;
}

/*#dance {
  display: grid;
  grid-template-rows: 1fr 1fr;
}*/

/*#dance section {
  display: grid;
  grid-template-rows: 1fr;
  margin-bottom: 40px;
}*/

#dance iframe {
  width: 100%;
  height: 80%;
  margin-top: 40px;
  border-radius: 10px;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.445);
}

#dance p,
#painting p,
#woodworking p {
  font-size: 22px;
  line-height: 45px;
  margin-top: 40px;
}

#dance .content {
  display: grid;
  grid-template-rows: 1fr 1fr;
  row-gap: 40px;
}

#dance .imgs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
}

#dance figcaption,
#painting figcaption,
#woodworking figcaption {
  top: 50px;
  position: relative;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  opacity: 0;
}

/*#dance .imgs:hover .hit{
  opacity: 1;
}*/

#dance .imgs figure:hover .hit {
  transform: translateY(-25px);
  transition: transform 0.5s;
  opacity: 1;
}

#dance .imgs figure:hover .lux {
  transform: translateY(-25px);
  transition: transform 0.5s;
  opacity: 1;
}

#dance img {
  width: 100%;
}

#painting {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  row-gap: 40px;
}

#painting .img {
  display: grid;
  grid-template-rows: 1fr;
  row-gap: 40px;
}

#painting .greenpaint {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  column-gap: 40px;
}

#painting .img figure:hover .porcocap {
  transform: translateY(-20px);
  transition: transform 0.5s;
  opacity: 1;
}

#painting .img figure:hover .monetcap {
  transform: translateY(-20px);
  transition: transform 0.5s;
  opacity: 1;
}

#painting .img figure:hover .treecap {
  transform: translateY(-20px);
  transition: transform 0.5s;
  opacity: 1;
}

.monet,
.tree,
.porco {
  width: 100%;
}

#woodworking {
  display: grid;
  grid-template-rows: 1fr;
  row-gap: 40px;
}

#woodworking .woodimg {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr;
  grid-template-rows: 1fr 1fr;
  column-gap: 40px;
  row-gap: 40px;
}

#woodworking img {
  width: 100%;
}

#woodworking .woodimg figure:hover .onecap {
  transform: translateY(-20px);
  transition: transform 0.5s;
  opacity: 1;
}

#woodworking .woodimg figure:hover .twocap {
  transform: translateY(-20px);
  transition: transform 0.5s;
  opacity: 1;
}

#woodworking .woodimg figure:hover .threecap {
  transform: translateY(-20px);
  transition: transform 0.5s;
  opacity: 1;
}

#woodworking .woodimg figure:hover .fourcap {
  transform: translateY(-20px);
  transition: transform 0.5s;
  opacity: 1;
}

/*#woodworking figure, #painting figure, #dance figure{
  margin: 50px;
}*/

footer {
  text-align: center;
  font-weight: bold;
  line-height: 1rem;
  height: 4rem;
}

/*Mac Monitor*/
@media screen and (min-width: 1000px) {
  main {
    margin: 100px;
  }

  article h2 {
    font-size: 100px;
  }

  #cards article {
    padding: 0px;
    /*https://www.w3schools.com/css/css_align.asp*/
    height: 9rem;
    text-align: center;
    align-content: center;
  }

  #dance,
  #painting,
  #woodworking {
    margin-bottom: 200px;
    margin-top: 268px;
  }

  #woodworking figure,
  #painting figure,
  #dance figure {
    margin: 0px;
  }

  /*#dance {
    display: grid;
    grid-template-columns: 4fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 60px;
  }*/

  #dance iframe {
    width: 100%;
    height: 93%;
    font-weight: bold;
    margin-top: 0px;
  }

  #dance .content {
    margin-top: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 0fr;
    column-gap: 60px;
  }

  #dance .imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
  }

  /*#dance .content {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr;
    row-gap: 75px;
  }

  #dance .imgs{
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 75px;
  }*/

  #dance p,
  #painting p,
  #woodworking p {
    font-size: 25px;
    line-height: 50px;
  }

  #dance img {
    width: 100%;
  }

  #painting {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    row-gap: 60px;
  }

  #painting .img {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
  }

  #painting .greenpaint {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 60px;
  }

  .porco,
  .monet,
  .tree {
    width: 100%;
  }

  #woodworking {
    row-gap: 60px;
  }

  #woodworking .woodimg {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 60px;
  }

  #woodworking img {
    width: 100%;
  }
}

/* Windows Monitor*/
@media screen and (min-width: 2200px) {
  #cards article {
    height: 11rem;
    text-align: center;
    align-content: center;
  }

  #dance .content {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
    row-gap: 55px;
    margin-top: 60px;
    column-gap: 60px;
  }

  #dance .imgs {
    column-gap: 60px;
  }

  #dance .iframe {
    width: 100%;
    height: 100%;
  }
}