main{background:linear-gradient(rgb(37,116,37),rgb(36,36,36))}.container{width:100%;min-height:90vh;margin-top:2.5vh;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-template-rows:repeat(auto-fit,minmax(200px,1fr));padding:1rem;padding-top:0;margin-left:auto;margin-right:auto;justify-content:center}@media screen and (min-width: 1024px){.container{width:70%}}.card{width:220px;display:flex;flex-direction:column;align-items:center;gap:.3rem;border:2px solid black;transition:all .3s ease;position:relative;overflow:hidden;transform:scale(.8);padding:.5rem;aspect-ratio:1/1.6;border-radius:8px;box-shadow:0 0 5px 3px #000;background-color:#c98d1e}img{height:auto;width:100%;aspect-ratio:1/1.5;border-radius:8px;border:3px solid black;transition:border .3s ease}.card a:any-link{height:2rem;padding:0 .5rem;font-size:.8rem;color:#f0f8ff;transition:color .5s ease}.card a:hover,.card a:focus{color:#639}.card:hover,.card:focus{box-shadow:0 0 8px 5px #639;transform:scale(.9)}@media screen and (max-width: 769px){.card{width:max(128px,25vw);aspect-ratio:1/1.6}.card a{font-size:.7rem}.container{grid-template-columns:repeat(auto-fit,max(128px,25vw));margin-top:5vh}}.cover{top:0;left:0;height:100%;width:100%;position:absolute;background-color:#639;animation:shutter 2s ease-out;transform:translateY(-100%);border:3px solid black;transition:background-color 1s ease}.textWrapper{width:100%;left:50%;transform:translate(-50%);top:0;position:fixed;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);background-color:#257425;color:#f0f8ff}.textWrapper p{grid-column:1/ -1;justify-self:center}.textWrapper h2{justify-self:end;padding-right:2rem}.textWrapper h2:nth-of-type(2){justify-self:start}.overScreen{position:fixed;top:0;width:100%;height:100%;background-color:#000000df;z-index:2;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center}.overContainer{width:max(300px,40%);height:40%;background-color:#f0f8ff;border-radius:8px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:1.7fr .7fr 1fr 1.4fr;justify-items:center;overflow:hidden;box-shadow:0 0 5px 3px #000;background-color:#257425;color:#f0f8ff}.overContainer h1{grid-column:1 / -1;align-self:center;font-size:2.5rem}.overContainer p{grid-column:1 / -1;text-align:center;font-size:2rem}.overContainer p:nth-of-type(2){align-self:top}.btnWrapper{width:100%;grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,1fr)}.btn{width:100%;height:100%;border:2px solid black;transition:all .5s ease;background-color:#c98d1e;color:#f0f8ff;font-size:2rem}.btn:hover,.btn:focus{border:2px solid rebeccapurple;background-color:#639}@keyframes shutter{0%{transform:translateY(-100%)}25%{transform:translateY(-100%)}50%{transform:translateY(0)}75%{transform:translateY(0)}to{transform:translateY(-100%)}}.loadingScreen{position:fixed;height:100vh;width:100%;top:0;z-index:4;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.loadingScreen p{position:fixed;color:#f0f8ff;font-size:2rem;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%)}.spinnieContainer{display:grid;position:fixed;place-content:center;height:100%;width:100%;background-color:#000000bf;overflow:hidden;top:0;left:0}.spinnie{display:grid;place-content:center;position:relative;height:200px;width:200px;border-radius:50%;animation:rotate 2s linear infinite}.spinnieOpposite{display:grid;position:relative;height:150px;width:150px;border-radius:50%;animation:rotateOpposite 1s linear infinite}.spinnie:before{position:absolute;content:"";height:20px;width:20px;background-color:#fff;border-radius:50%}.spinnie:after{position:absolute;content:"";height:20px;width:20px;background-color:#fff;border-radius:50%;right:0}.spinnieOpposite:before{position:absolute;content:"";height:20px;width:20px;background-color:#fff;border-radius:50%}.spinnieOpposite:after{justify-self:right;position:absolute;content:"";height:20px;width:20px;background-color:#fff;border-radius:50%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes rotateOpposite{0%{transform:rotate(360deg)}to{transform:rotate(0)}}*{margin:0;padding:0;box-sizing:border-box}