.btn{margin:0;padding:.4rem .8rem;background:var(--red);border:none;border-radius:8px;color:white;font-size:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:background-color .15s ease-in-out;position:relative;&:hover{cursor:pointer;background:var(--dark-red)}&:after{content:"";position:absolute;inset:-4px;background:var(--red);border-radius:12px;z-index:-1}&:hover:after{background:var(--dark-red)}}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}.btn[disabled]{&:after{background:conic-gradient(from var(--angle),var(--dark-blue),var(--light-blue),var(--dark-blue));animation:spin 1.5s linear infinite}}@keyframes spin{0%{--angle:0deg}to{--angle:360deg}}.speech-bubble{transition:opacity .3s ease-in-out;& pre{position:relative;border-radius:1rem;padding:1rem 1.5rem;margin:1rem;font-family:inherit;text-align:left;background:var(--transparent-white);width:-moz-fit-content;width:fit-content;text-wrap:wrap;&:after{content:"";position:absolute;width:0;height:0;border:20px solid transparent;top:50%;border-bottom:0;margin-top:-10px}}&.hidden{opacity:0}}.speech-bubble-right pre{margin-left:auto}.speech-bubble-left pre:after{left:0;border-left:0;margin-left:-20px;border-right-color:var(--transparent-white)}.speech-bubble-right pre:after{right:0;border-right:0;margin-right:-20px;border-left-color:var(--transparent-white)}.card{display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;box-shadow:3px 3px 10px rgba(0,0,0,.3);box-sizing:border-box;border-radius:1rem;background:var(--light-blue);transition:opacity .6s ease;opacity:1;font-size:110%;line-height:1.5}.card{img{max-width:100%}}card.loading{opacity:.1}.card-header{display:grid;grid-template-columns:2rem 1fr 2rem;align-items:center;position:relative;background-color:var(--dark-blue);color:var(--white);border-radius:1rem 1rem 0 0;box-sizing:border-box;padding:.4rem .5rem}.card-header .icon-button{background:none;border:1px solid var(--white);border-radius:50%;font-size:1rem;width:2rem;height:2rem;opacity:.6;color:var(--white);display:grid;place-content:center}.card-header .icon-button:hover{opacity:1;cursor:pointer}.card-header h3{margin:0;font-size:120%;padding:0;text-align:center;font-weight:400}.card-header h3 svg{font-size:80%;position:relative;top:-1px;left:3px;opacity:.9}.card-header .header-button{background:none;border:none;font-size:inherit;color:inherit}.card-header .header-button:hover{cursor:pointer}.card-body{background:var(--light-blue);background:linear-gradient(200deg,rgba(54,67,90,1),rgba(123,172,213,1) 0,rgba(1,94,183,1));display:grid;min-height:240px;height:100%}.card-body:has(img){padding:0}.card-image-wrapper{grid-area:1/-1;display:grid;place-items:center}.card-image-wrapper img{max-width:100%;max-height:100%;display:block;box-sizing:border-box}.card-hidden{z-index:2;grid-area:1/-1;display:grid;font-size:1.4rem;place-content:center;padding:0 1rem .5rem;&:is(.overlay){background:rgba(0,0,0,.5)}.speech-bubble pre{background:var(--white)}}.card-footer{display:grid;grid-template-columns:2rem 1fr 2rem;background-color:var(--light-grey);padding:.4rem .5rem;border-radius:0 0 1rem 1rem;min-height:2rem}.card-footer span{display:flex;align-items:center;justify-content:center;gap:.5rem}.card-footer .icon-button{background:none;border:1px solid var(--dark-blue);border-radius:50%;font-size:1rem;opacity:.6;color:var(--dark-blue);display:grid;place-content:center;width:2rem;height:2rem}.card-footer .icon-button:hover{opacity:1;cursor:pointer}.card-error,.card-error .card-header{background:var(--red)}.card-error .card-body{background:var(--light-red);color:white;padding:0 1.5rem;place-content:start}.card-editor{label,p{color:rgba(0,0,0,.9)}select{font-size:1rem}.card-header{place-content:center}.card-body{padding:0 1.5rem;place-content:start}}.card-body:not(.describe-the-picture) img{border-radius:0}.focusCardDialog{display:grid;grid-template-columns:8rem 1fr 8rem;grid-template-rows:4rem calc(100% - 12rem) 8rem;grid-template-areas:"header header header" "navLeft main navRight" "footer footer footer";place-items:center;width:100%;height:100%;min-height:400px;background:#36435a;border:none}.focusCardDialog .card-modal-wrapper{grid-area:main;width:100%;height:100%;max-width:100%;.card{display:grid;grid-template-columns:1fr;grid-template-rows:3rem 1fr 3rem;height:100%;width:0;place-content:center;margin:0 auto;.card-body{background:linear-gradient(200deg,rgba(54,67,90,1),rgba(123,172,213,1) 0,rgba(1,94,183,1));margin:0 auto;padding:0;height:100%;aspect-ratio:4/3;.card-image-wrapper{background:rgba(0,0,0,.7)}.img{max-width:100%;aspect-ratio:4/3;height:100%;object-fit:contain;box-shadow:3px 3px 10px rgba(0,0,0,.3)}}}.card.card-editor .card-body{padding:0 1.5rem}}.card-modal-main{height:100%}.card-display-controls{display:grid;grid-template-columns:1fr 1fr 1fr;margin:1rem 1.7rem}.card-display-controls>span{display:flex;gap:1rem}.card-display-controls>span:first-child{justify-content:flex-start}.card-display-controls>span:nth-child(2){justify-content:center}.card-display-controls>span:nth-child(3){justify-content:flex-end}.card-modal-top-nav{grid-area:header;color:var(--white);font-size:140%;text-align:center}.cards-nav{grid-area:footer;display:flex;gap:1rem;justify-content:center;color:white}.card-modal-next button,.card-modal-prev button,.cards-nav button{font-size:120%;background:none;border:3px solid var(--white);color:var(--white);border-radius:50%;padding:1rem;width:3em;height:3em;opacity:.6;&:hover{opacity:1;cursor:pointer}}::-webkit-backdrop{background:#36435a}::backdrop{background:#36435a}.card-display-tags{margin:1rem 1.5rem 80px;label{display:block;margin-bottom:1rem}.edit-tags-controls{margin-top:2rem;display:flex;gap:1rem;button{width:12rem}}}@media (max-width:960px){.card-modal-next,.card-modal-prev{display:none}.focusCardDialog{grid-template-areas:"header header header" "main main main" "footer footer footer"}.card-display-controls button span{display:none}}:root{--light-blue:#7bacd5;--dark-blue:#015eb7;--red:#da2a1c;--light-red:#ef3f2f;--dark-red:#c01002;--orange:#ff9e15;--dark-orange:#ef8e05;--white:#ffffff;--transparent-white:rgba(255,255,255,0.8);--more-transparent-white:rgba(255,255,255,0.5);--body-colour:#36435a;--light-grey:#efefef}html{font-size:16px;font-family:Helvetica,sans-serif;min-height:400px}body,html{padding:0;margin:0;height:100%}body{background:rgba(255,255,255,.96)}body>header{position:relative;display:flex;justify-content:space-between;align-items:center;background-color:var(--body-colour);border-top:8px solid var(--dark-blue);border-bottom:8px solid var(--dark-blue);padding:1rem;box-shadow:0 5px 10px rgba(0,0,0,.3);font-size:120%;transition:margin-top .3s ease-in-out;&:has(.hidden-header){margin-top:-10rem;& .toggle-header{position:relative;top:6.8rem;right:-.9rem}}}.header-nav{display:flex;flex:1 1;gap:1rem;align-items:center;&>span{flex-grow:0;height:100px;width:180px;background:white;border-radius:50%;display:flex;justify-content:center;align-items:center;transform:rotate(-4deg) translateY(20px);& img{transform:rotate(4deg)}}&>div{display:flex;justify-content:flex-start;align-items:center;flex:1 1;&>div{flex-grow:0;display:flex;flex-direction:column}& nav{flex:1 1;& ul{list-style:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center;gap:.5rem;& li{font-size:100%;& a{display:inline-block;width:6rem;text-decoration:none;padding:.6rem 1rem;margin:.75rem 0;background:#4b566b;color:rgba(255,255,255,.9);border-radius:8px;text-align:center;transition:background-color .3s ease-in-out;&:hover{background:#3b465b}}&.active a{background:var(--dark-blue)}&:first-child{position:relative;ul{position:absolute;top:3.6rem;left:-8px;display:none;z-index:1000;background:rgba(255,255,255,.5);padding:4px 8px;border-radius:8px;li a{margin:.2rem 0}}&:hover ul{display:block}}}}}& h1{flex-grow:0;font-size:120%;letter-spacing:2px;color:var(--white);margin:0}& h2{flex-grow:0;font-size:100%;color:var(--light-blue);margin:0;& a{text-decoration:none;color:inherit;font-size:100%;&:hover{text-decoration:underline}}}}}.header-controls{display:flex;justify-content:flex-end;gap:.5rem}main{overflow:scroll}@media (max-width:1200px){.header-controls span{display:none}}@media (max-width:1100px){.header-nav>div{flex-direction:column;justify-content:center;align-items:flex-start;& nav{margin-left:-6px}}.header-controls{position:absolute;top:1rem;right:1rem}}@media (max-width:640px){.header-nav>span{display:none}}.card-display-wrapper>.btn{margin:1rem auto 0}.card-display{--min-card-width:400px;height:100%;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(var(--min-card-width),100%),1fr));grid-gap:8px;gap:8px;margin:1rem 1.5rem 80px}.languages-list{margin:3rem 40px;li{padding:.5rem 0}}.info-page{max-width:40rem;margin:0 auto 20rem;line-height:1.6;h1{margin-top:2rem}h2{margin-top:3rem}.image-wrapper{background:#f8f8f8;text-align:center;border-radius:8px;padding:1rem;box-sizing:border-box;img{max-width:100%}}.social-links{color:var(--body-colour);font-size:200%;display:flex;justify-content:center;align-items:center;gap:1rem}}.card-display-wrapper{overflow:scroll;height:100%}