.btn{margin:0;padding:.6rem 1rem;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 .3s ease-in-out;&:hover{cursor:pointer;background:var(--light-red)}}.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)}dialog:has(.card){min-width:50%;min-height:50%;background:transparent;border:none}dialog .card{min-width:100%;min-height:100%;font-size:140%}::-webkit-backdrop{background:#36435a}::backdrop{background:#36435a}.cards-nav{display:flex;gap:1rem;justify-content:center;font-size:120%;color: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;&.loading{opacity:.1}.card-header{position:relative;background-color:var(--dark-blue);color:var(--white);padding:0 0 0 1rem;border-radius:1rem 1rem 0 0;box-sizing:border-box;& h3{margin:0;font-size:120%;padding:.8rem 0;& svg{font-size:80%;position:relative;top:-1px;left:3px;opacity:.9}}.card-menu{position:absolute;display:inline-block;right:-1rem;top:-2rem;z-index:1;background:transparent;text-align:right;border-radius:0 1rem 0 0;padding:2rem;.btn-lock{cursor:pointer;border-radius:50%;border:1px solid white;width:2.2rem;height:2.2rem;margin-top:6px;margin-right:-6px}.card-menu-toggler{font-size:120%;display:inline-block;padding:0 4px 0 0;margin-top:.8rem}.card-menu-content{display:none;list-style:none;background:white;margin:0;text-align:left;border-radius:0 1rem 0 0;opacity:.9;& li{padding:0;margin:0;border-bottom:1px solid var(--light-grey);&:first-child{border-radius:0 1rem 0 0;button{border-radius:0 1rem 0 0}}}& button{color:var(--body-colour);background:white;padding:.6rem 4rem .6rem .8rem;border:none;margin:0;width:100%;text-align:left;font-size:100%;&:hover{cursor:pointer;background:var(--light-grey)}& svg{margin-right:.8rem;width:1rem}}}&:not(:has(.btn-lock)):hover{cursor:pointer;.card-menu-toggler{display:none}.card-menu-content{display:block;margin:0 -1rem 0 0;padding:0}}}}.card-body{background-color:var(--light-blue);padding:.5rem 2rem;width:100%;box-sizing:border-box;border-radius:0 0 1rem 1rem;flex-grow:1;min-height:240px;&:not(.describe-the-picture):has(img){display:flex;flex-direction:column;align-items:center}}.card-footer{width:100%;background-color:var(--light-grey);padding:.4rem .5rem;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;border-radius:0 0 1rem 1rem;box-sizing:border-box;.btn{min-width:8rem;padding:.5rem}&:not(:has(.btn)){display:none}}&.card-error{background:var(--red);.card-header{background:var(--red)}.card-body{background:var(--light-red);color:white}}&.card-editor{label,p{color:var(--body-colour)}select{font-size:100%}}}.describe-the-picture .card-body{padding:0;min-height:300px}.card-image-wrapper{position:relative;margin:0;flex:1 1;text-align:center;box-sizing:border-box;padding:8px 8px 0;max-width:300px;width:100%}.card-image-wrapper img{height:auto;border:4px solid var(--white);box-shadow:3px 3px 10px rgba(0,0,0,.3)}.describe-the-picture .card-image-wrapper{width:100%;max-width:100%;padding:0}.describe-the-picture .card-image-wrapper img{object-fit:cover;border-radius:0 0 1rem 1rem;border:none;box-shadow:none}:root{--light-blue:#7bacd5;--dark-blue:#015eb7;--red:#da2a1c;--light-red:#ef3f2f;--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;background-size:90%}body,html{padding:0;margin:0}body{min-height:100vh;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;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}.card-display-controls{display:flex;justify-content:center;gap:1rem;padding:1rem 1rem 0}