*{box-sizing:border-box;margin:0;padding:0}:root{--cream: #FAF7F3;--light-tan: #F0E4D3;--dark-tan: #DCC5B2;--navy: #1C2B4A;--gold: #C9A84C;--crimson: #9B1D2A;--slate: #4A5C7A;--white: #FFFFFF;--shadow: rgba(28,43,74,.2)}img{width:100%}ul{list-style:none}body{display:flex;flex-direction:column;justify-content:center;background-color:var(--cream);color:var(--navy)}@keyframes reveal{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{transform:translate(-100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes wobble{0%,to{transform:translateY(-5px) rotate(0)}25%{transform:translateY(-5px) rotate(-3deg)}75%{transform:translateY(-5px) rotate(3deg)}}@keyframes golden{0%{background-position:200% center}to{background-position:-200% center}}@keyframes colorCycle{0%{color:#1a1a1a}20%{color:#b771e5}40%{color:#daa520}60%{color:#476eae}80%{color:#c5172e}to{color:#1a1a1a}}header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--dark-tan);padding:20px;position:sticky;z-index:100;top:0;background-color:var(--light-tan)}header img{width:50px;height:50px}header h1{text-align:center;font-size:2rem;animation:colorCycle 10s linear infinite}header h1:hover{background:linear-gradient(90deg,var(--navy) 30%,var(--gold) 50%,var(--navy) 70%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:golden 3s linear infinite}#logo-container{display:flex}#search-form{display:flex;gap:20px;align-items:center}input{padding:5px 10px}button{padding:5px}#main-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:100px;gap:50px;background:linear-gradient(to bottom,var(--gold),var(--cream));font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif}#page-title{font-size:3rem;font-weight:200}#main-page p{font-size:1.5rem;font-weight:700;width:90%}#card-details{scroll-margin-top:100px}#card-details,#tester{padding:30px;display:flex;align-items:flex-start;gap:20px}#card-basics{display:flex;flex-direction:column;width:250px;flex-shrink:0;gap:10px;animation:slideIn 1s ease-out forwards}#card-specifics{padding-left:20px;text-align:justify;font-size:large}#card-specifics span{color:var(--crimson)}.hidden{display:none!important}#deck-modal{position:fixed;inset:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:200}#deck-modal-content{background-color:var(--cream);padding:30px;border-radius:10px;max-width:500px;width:90%;display:flex;flex-direction:column;gap:15px;position:relative;animation:reveal .8s ease-out forwards}#deck-modal-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.2rem;cursor:pointer;color:var(--navy)}#deck-modal-list{display:flex;flex-direction:column;gap:10px;list-style:none}#deck-modal-list a{color:var(--navy);text-decoration:none;padding:10px;border:1px solid var(--dark-tan);border-radius:6px;display:block;transition:background-color .2s ease}#deck-modal-list a:hover{background-color:var(--light-tan);box-shadow:0 8px 24px var(--navy);transition:appear .6s ease-in forwards}.printing-label{font-weight:700;margin-top:10px;color:var(--navy)}#cards-list{justify-content:center;display:grid;gap:10px;grid-template-columns:repeat(5,1fr);list-style:none;padding:25px}.card{padding:5px}.card p{color:var(--slate)}.img{max-width:250px;max-height:400px;position:relative;transition:transform .3s ease,box-shadow .3s ease;border-radius:6px;cursor:pointer}.img:hover{animation:wobble .75s ease-in-out infinite;box-shadow:0 8px 24px var(--navy)}@media(max-width:576px){#cards-list{grid-template-columns:1fr;justify-items:center;justify-content:center}#tester{display:flex;flex-direction:column;justify-content:center}#card-specifics{text-align:justify;padding:0%}}@media(min-width:576px){#cards-list{grid-template-columns:repeat(2,1fr);justify-items:center;justify-content:center}#card-details{display:flex;flex-direction:column}}@media(min-width:700px){#cards-list{grid-template-columns:repeat(3,1fr)}}@media(min-width:875px){#cards-list{grid-template-columns:repeat(4,1fr)}}@media(min-width:1050px){#cards-list{grid-template-columns:repeat(5,1fr)}}@media(min-width:1200px){#cards-list{grid-template-columns:repeat(6,1fr)}}@media(min-width:1400px){#cards-list{grid-template-columns:repeat(7,1fr)}}
