.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}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-color:var(--light-blue);padding:.5rem 2rem;box-sizing:border-box;flex-grow:1;min-height:240px;position:relative;display:flex;flex-direction:column;justify-content:center}.card-body:has(img){padding:0;background:black}.card-image-wrapper img{max-width:100%;max-height:100%;display:block;box-sizing:border-box}.card-hidden{position:absolute;padding:0;margin:0;inset:0;width:100%;display:grid;place-content:center;place-items:center;.speech-bubble pre{background:var(--white);&:after{display:none}}}.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}.card-editor{label,p{color:var(--body-colour)}select{font-size:100%}}.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}.card-modal-main{height:100%}.card-display .focusCardDialog .card{height:100%;min-height:300px;aspect-ratio:4/3;.card-image-wrapper{height:100%;background:black}img{height:100%;margin:0 auto;border:none;object-fit:fill}}.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}@media (max-width:960px){.card-modal-next,.card-modal-prev{display:none}.focusCardDialog{grid-template-columns:1fr;grid-template-rows:4rem 1fr 8rem;grid-template-areas:"header" "main" "footer";width:100%;height:100%;place-items:center}dialog .card{width:100%;height:100%;max-width:600px;max-height:400px}}: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;.card{box-sizing:border-box;font-size:110%;line-height:1.5;img{max-width:100%}}}.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%}.card-display-controls{display:flex;justify-content:center;gap:1rem;padding:1rem 1rem 0}