@import url(https://fonts.googleapis.com/css2?family=Aclonica&family=Great+Vibes&family=Inter:wght@300;400;800&display=swap);*{font-family:Aclonica,sans-serif;margin:0;padding:0}.container{background:url(../img/bgmain.jpg) center center/cover no-repeat;height:100vh;width:100vw;position:relative;margin:0 auto}.header{text-align:center;color:#923e43;letter-spacing:.2rem;margin:0 auto;margin-bottom:30px;font-size:40px;text-shadow:1px 1px 2px red,0 0 1em #00f,0 0 .2em #00f}.wrapper{margin:0 auto;display:grid;justify-content:center;grid-template-columns:repeat(4,200px);gap:10px;grid-template-rows:repeat(3,275px);grid-auto-flow:column;perspective:1000px}.card{border-radius:5px;transition:.8s;transform-style:preserve-3d;position:relative;z-index:3}.card__front-side{z-index:2;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:5px;position:absolute;top:0;left:0;transform:rotateY(0);cursor:pointer;background:linear-gradient(149deg,#18bb9c 0,#6a39af 42%,#bb1894 72%,#733586 100%);-webkit-animation:gradient 15s infinite linear;animation:gradient 15s infinite linear;background-size:400%}.card__back-side{width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:5px;position:absolute;top:0;left:0;transform:rotateY(180deg)}.active{transform:rotateY(180deg)}@-webkit-keyframes gradient{0%{background-position:80% 0}50%{background-position:20% 100%}100%{background-position:80% 0}}@keyframes gradient{0%{background-position:80% 0}50%{background-position:20% 100%}100%{background-position:80% 0}}.visible{visibility:hidden}.victory{width:100%;height:100%;background:linear-gradient(149deg,#18bb9c 0,#6a39af 42%,#bb1894 72%,#733586 100%);-webkit-animation:gradient 15s infinite linear;animation:gradient 15s infinite linear;background-size:400%;color:#f0f8ff;display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:50px}.victory__title{font-size:36px;margin-bottom:20px;text-align:center}.victory__desc{font-size:24px;margin-bottom:20px}.victory__btn{width:300px;height:60px;text-transform:uppercase;color:red;font-size:30px;border-radius:5px;cursor:pointer}@media screen and (max-width:1200px){.wrapper{grid-template-columns:repeat(4,200px);grid-template-rows:repeat(3,275px)}}@media screen and (max-width:766px){.wrapper{grid-template-columns:repeat(4,125px);grid-template-rows:repeat(3,175px)}.header{font-size:30px}}@media screen and (max-width:425px) and (orientation:portrait){.wrapper{grid-template-columns:repeat(4,85px);grid-template-rows:repeat(3,125px)}}@media screen and (max-width:375px) and (orientation:portrait){.wrapper{grid-template-columns:repeat(4,75px);grid-template-rows:repeat(3,110px)}}@media screen and (max-width:320px) and (orientation:portrait){.wrapper{grid-template-columns:repeat(4,60px);grid-template-rows:repeat(3,100px)}}@media screen and (max-height:800px) and (orientation:landscape){.wrapper{grid-template-columns:repeat(4,150px);grid-template-rows:repeat(3,210px)}}@media screen and (max-height:766px) and (orientation:landscape){.wrapper{grid-template-columns:repeat(6,110px);grid-template-rows:repeat(2,160px)}.header{font-size:30px}}@media screen and (max-height:425px) and (orientation:landscape){.wrapper{grid-template-columns:repeat(6,85px);grid-template-rows:repeat(2,125px)}}@media screen and (max-height:375px) and (orientation:landscape){.wrapper{grid-template-columns:repeat(6,75px);grid-template-rows:repeat(2,110px)}}@media screen and (max-height:320px) and (orientation:landscape){.wrapper{grid-template-columns:repeat(6,60px);grid-template-rows:repeat(2,95px)}.header{margin-bottom:10px}}