a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}a{color:inherit;text-decoration:none}*{box-sizing:border-box}body{overflow-x:hidden}*,:after,:before{box-sizing:border-box;font-family:cursive;margin:0;padding:0}:root{--card-first-position:10px;--border-radius:1rem;--perspective:300px;--rotateX:0deg;--rotateY:0deg;--angle:10deg}.region{cursor:pointer;height:calc(33.33333% - var(--card-first-position)*2/3);position:absolute;width:calc(33.33333% - var(--card-first-position)*2/3);z-index:10}.card-container .region.region1{border-top-left-radius:1rem;border-top-left-radius:var(--border-radius);left:calc(10px - var(--card-first-position)*2*0/3);left:calc(var(--card-first-position) - var(--card-first-position)*2*0/3)}.card-container .region.region1,.card-container .region.region2{top:calc(10px - var(--card-first-position)*2*0/3);top:calc(var(--card-first-position) - var(--card-first-position)*2*0/3)}.card-container .region.region2{left:calc(10px + 33.33333% - var(--card-first-position)*2*1/3);left:calc(var(--card-first-position) + 33.33333% - var(--card-first-position)*2*1/3)}.card-container .region.region3{border-top-right-radius:1rem;border-top-right-radius:var(--border-radius);left:calc(10px + 66.66667% - var(--card-first-position)*2*2/3);left:calc(var(--card-first-position) + 66.66667% - var(--card-first-position)*2*2/3);top:calc(10px - var(--card-first-position)*2*0/3);top:calc(var(--card-first-position) - var(--card-first-position)*2*0/3)}.card-container .region.region4{left:calc(10px - var(--card-first-position)*2*0/3);left:calc(var(--card-first-position) - var(--card-first-position)*2*0/3)}.card-container .region.region4,.card-container .region.region5{top:calc(10px + 33.33333% - var(--card-first-position)*2*1/3);top:calc(var(--card-first-position) + 33.33333% - var(--card-first-position)*2*1/3)}.card-container .region.region5{left:calc(10px + 33.33333% - var(--card-first-position)*2*1/3);left:calc(var(--card-first-position) + 33.33333% - var(--card-first-position)*2*1/3)}.card-container .region.region6{left:calc(10px + 66.66667% - var(--card-first-position)*2*2/3);left:calc(var(--card-first-position) + 66.66667% - var(--card-first-position)*2*2/3);top:calc(10px + 33.33333% - var(--card-first-position)*2*1/3);top:calc(var(--card-first-position) + 33.33333% - var(--card-first-position)*2*1/3)}.card-container .region.region7{border-bottom-left-radius:1rem;border-bottom-left-radius:var(--border-radius);left:calc(10px - var(--card-first-position)*2*0/3);left:calc(var(--card-first-position) - var(--card-first-position)*2*0/3)}.card-container .region.region7,.card-container .region.region8{top:calc(10px + 66.66667% - var(--card-first-position)*2*2/3);top:calc(var(--card-first-position) + 66.66667% - var(--card-first-position)*2*2/3)}.card-container .region.region8{left:calc(10px + 33.33333% - var(--card-first-position)*2*1/3);left:calc(var(--card-first-position) + 33.33333% - var(--card-first-position)*2*1/3)}.card-container .region.region9{border-bottom-right-radius:1rem;border-bottom-right-radius:var(--border-radius);left:calc(10px + 66.66667% - var(--card-first-position)*2*2/3);left:calc(var(--card-first-position) + 66.66667% - var(--card-first-position)*2*2/3);top:calc(10px + 66.66667% - var(--card-first-position)*2*2/3);top:calc(var(--card-first-position) + 66.66667% - var(--card-first-position)*2*2/3)}.card{border-radius:5px;margin-bottom:8px;position:relative;-webkit-transform:perspective(300px) rotateX(0deg) rotateY(0deg);transform:perspective(300px) rotateX(0deg) rotateY(0deg);-webkit-transform:perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));transform:perspective(var(--perspective)) rotateX(var(--rotateX)) rotateY(var(--rotateY));transition:.5s;width:200px}.region1:hover~.card{--rotateX:var(--angle);--rotateY:calc((var(--angle))*-2)}.region2:hover~.card,.region3:hover~.card{--rotateX:var(--angle)}.region3:hover~.card{--rotateY:var(--angle)}.region4:hover~.card{--rotateY:calc((var(--angle))*-2)}.region6:hover~.card{--rotateY:var(--angle)}.region7:hover~.card{--rotateX:calc((var(--angle))*-1);--rotateY:calc((var(--angle))*-2)}.region8:hover~.card,.region9:hover~.card{--rotateX:calc((var(--angle))*-1)}.region9:hover~.card{--rotateY:var(--angle)}.card img{border-radius:10px;width:100%}@media screen and (min-width:768px){.row .col{width:50%}.card h1{font-size:22px;top:50%}.card p{font-size:13px;top:60%}}@media screen and (min-width:1180px){.row .col{width:33.3333333333%}.card h1{font-size:22px;top:50%}.card p{font-size:13px;top:60%}}
/*# sourceMappingURL=main.e5d36a08.css.map*/