/* Set the background color of body to tan */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

body {
  width: 100%;

  margin:auto;
  padding: 0;

    font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;

}
p{
  color: #000;
  text-decoration: none;
  text-anchor: none;
}

article {
  margin: 0;
  display: grid;
  place-items: center;
}

header{
    font-size: 32px;

  }

header a{
    text-decoration: none;
    color: #000;
  }
  
.res {
  width: 100%;
  height: auto;
}

#logo{
  padding: 30px 0;
/*  background-color: cornsilk;*/
  display: flex;
  justify-content: center;
}

#timer{
    text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

.fullBlock{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 100px 0;
}
.fullBlock .item{

}

.awards{
  font-size: 32px;

}

#pictureEffect p {
  height: 200px;
  width: 500px;
  margin: 0 auto;
  position: relative;
}

#pictureEffect img {
  height: 111px;
  position: absolute;
  left: 0;
  offset-path: path('m 0 50 q 50-30 100-30 t 100 30 100 0 100-30 100 30');
  box-shadow: 1px 1px 3px #0008;
  transition: transform .4s ease-out, offset-path .4s cubic-bezier(.77,-1.17,.75,.84),box-shadow .3s, z-index .3s;
  z-index: 0;
}

#pictureEffect img:hover {
  transform: scale(3);
  /* on hover, the path gets a bit shorter & flattened & shifted to left/bottom a bit for nicer movement */
  offset-path: path('m 5 65 q 45-0 90-0 t 90 0 90 0 90-0 90 0');
  box-shadow: 3px 4px 10px #0006;
  /* ensures that image gets on top of stack at the start of "popping" animation
     and gets back at the end of getting back. With smaller value, 2 different transitions would be needed */
  z-index: 999;
}

#pictureEffect img:nth-last-child(3):first-child {
  offset-distance: 17%;
}
#pictureEffect img:nth-last-child(2):nth-child(2) {
  offset-distance: 49%;
}
#pictureEffect img:last-child:nth-child(3) {
  offset-distance: 81%;
}

/* 4 images */
#pictureEffect img:nth-last-child(4):first-child {
  offset-distance: 10%;
}
#pictureEffect img:nth-last-child(3):nth-child(2) {
  offset-distance: 35%;
}
#pictureEffect img:nth-last-child(2):nth-child(3) {
  offset-distance: 65%;
}
#pictureEffect img:last-child:nth-child(4) {
  offset-distance: 90%;
}

/* 5 images */
#pictureEffect img:nth-last-child(5):first-child {
  offset-distance: 0%;
}
#pictureEffect img:nth-last-child(4):nth-child(2) {
  offset-distance: 25%;
}
#pictureEffect img:nth-last-child(3):nth-child(3) {
  offset-distance: 51%;
}
#pictureEffect img:nth-last-child(2):nth-child(4) {
  offset-distance: 75%;
}
#pictureEffect img:last-child:nth-child(5) {
  offset-distance: 100%;
}



/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 769px) {
  .fullBlock{
/*    flex-direction: column;*/
  }
  .fullBlock .item{
/*    width: 100%;*/
  }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (min-width: 770px) {
  body {
    /*background-color: olive;*/
    min-width: 320px;
  }

  .fullBlock{
/*    flex-direction: row;*/
  }

    .fullBlock .item{
/*    width: 49%;*/
  }
}