*,*::after,*::before{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%}@media only screen and (max-width: 35em){html{font-size:45%}}@media only screen and (max-width: 38.75em){html{font-size:50%}}@media only screen and (min-width: 85rem){html{font-size:75%}}body{height:100vh;width:100%;color:white;font-family:"Saira Stencil One", sans-serif;background-image:url(../img/what-the-hex.png);text-align:center;-webkit-animation:animateBG 3s linear infinite;animation:animateBG 3s linear infinite;display:grid;grid-template-rows:repeat(3, 1fr);grid-template-columns:[full-start] minmax(1rem, 1fr) [center-start] minmax(-webkit-min-content, 60rem) [center-end] minmax(1rem, 1fr) [full-end];grid-template-columns:[full-start] minmax(1rem, 1fr) [center-start] minmax(min-content, 60rem) [center-end] minmax(1rem, 1fr) [full-end];grid-row-gap:4rem;align-content:center}@media only screen and (max-width: 35em){body{grid-template-columns:[full-start] minmax(2rem, 1fr) [center-start] minmax(-webkit-min-content, 40rem) [center-end] minmax(2rem, 1fr) [full-end];grid-template-columns:[full-start] minmax(2rem, 1fr) [center-start] minmax(min-content, 40rem) [center-end] minmax(2rem, 1fr) [full-end];grid-row-gap:3rem}}.heading-1{font-size:6rem;text-shadow:-0.5rem 0.5rem 0.1rem pink;grid-row:1/2;grid-column:center-start/center-end;align-self:end;justify-self:stretch;color:#11998e}@media only screen and (max-width: 35em){.heading-1{font-size:5rem}}.copyright{font-family:sans-serif;font-size:1.5rem;grid-row:3/4;grid-column:center-start/center-end;color:#11998e;align-self:start}.copyright a{color:pink;font-size:1.3rem}.container{grid-row:2/3;grid-column:center-start / center-end;color:black;background-color:#11998e;border-radius:1rem;justify-content:center;box-shadow:-1rem 1rem 0px pink;padding:1rem;display:grid;grid-template-rows:repeat(4, minmax(-webkit-min-content, 10rem));grid-template-rows:repeat(4, minmax(min-content, 10rem));grid-template-columns:repeat(5, 1fr);grid-gap:1rem;grid-auto-flow:column}@media only screen and (max-width: 35em){.container{grid-template-rows:repeat(5, minmax(-webkit-min-content, 8rem));grid-template-rows:repeat(5, minmax(min-content, 8rem));grid-template-columns:repeat(4, 1fr)}}.card__container{font-size:3rem;position:relative;cursor:pointer;perspective:200rem;transform-style:preserve-3d}.card__container.open .card__face--front{transform:rotateY(-180deg)}.card__container.open .card__face--back{transform:rotateY(0)}.card__face{position:absolute;height:100%;width:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px;transition:all 1s ease;background-color:white}.card__face--front{background-image:url("../img/001-cat.png");background-position:center;background-size:70%;background-repeat:no-repeat;-webkit-filter:grayscale(100%) opacity(50%);filter:grayscale(100%) opacity(50%)}.card__face--back{transform:rotateY(180deg);display:flex;justify-content:center;align-items:center}.card__face--back img{height:80%}.score{grid-row:1/-1;grid-column:5/6;border-radius:10px;height:100%;font-size:3rem;display:grid;grid-template-rows:repeat(4, 1fr);align-items:center;color:white}@media only screen and (max-width: 35em){.score{grid-row:1/2;grid-column:1/-1;grid-template-columns:repeat(3, 1fr);grid-template-rows:1fr}}.score__moves{grid-row:1/2;display:flex;flex-direction:column}@media only screen and (max-width: 35em){.score__moves{grid-row:1/2;grid-column:1/2}}.score__timer{grid-row:2/3;display:flex;flex-direction:column}@media only screen and (max-width: 35em){.score__timer{grid-row:1/2;grid-column:2/3}}.score__reset{grid-row:3/4;border:pink 1px solid;justify-self:center;align-self:center;cursor:pointer;display:flex;align-items:center;justify-content:center;height:60%;width:80%;border-radius:10px;background-color:pink;box-shadow:-0.4rem 0.5rem 0.1rem white;transition:all 0.2s;transform:translateX(0.4rem)}@media only screen and (max-width: 35em){.score__reset{grid-row:1/2;grid-column:3/4;height:60%;width:60%}}.score__reset--img{width:45%}.score__reset:active{box-shadow:none;transform:translate(-0.5rem, 0.4rem)}.popup-wrapper{background-color:rgba(17,153,142,0.5);grid-row:1/-1;grid-column:1/-1;width:100vw;height:100vh;display:none;z-index:1}.popup{width:30rem;height:40rem;background-color:white;border-radius:10px;grid-row:1/-1;grid-column:1/-1;z-index:1;justify-self:center;align-self:center;color:#11998e;display:grid;box-shadow:-0.5rem 0.5rem 0px #a59f9f;grid-template-rows:1fr 1fr 1fr 1fr;overflow:hidden;justify-items:center;display:none}.popup__img{grid-row:1/2;width:60%;align-self:end}.popup__msg{grid-row:2/3;font-size:4rem;text-shadow:-0.3rem 0.3rem 0.1rem pink}.popup__btn{background-color:pink;border:none;color:white;font-size:2.3rem;justify-self:stretch;cursor:pointer;transition:all .2s}.popup__btn:hover{background-color:#ebacb6;font-size:2.5rem}.popup .rating{grid-row:3/4}.fa,.fas{font-size:2.5rem;font-weight:100;color:#fde144}.checked{font-weight:900}@-webkit-keyframes animateBG{0%{background-position:top}100%{background-position:bottom}}@keyframes animateBG{0%{background-position:top}100%{background-position:bottom}}