@import url(https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap);*,ul{margin:0}body,ul{background-color:var(--colour-primary);display:flex}h1.title,h2.title{text-align:right;margin-bottom:5vh}#logo,#navText{display:inline-block}#userSearchForm,.profileInput{max-width:100%}label,ul li a{display:block}.transparent,ul li,ul li a{border-radius:10px}.transparent,h1.title,h2.title{margin-bottom:5vh}.bg,.inputBox input{height:100%;width:100%}.registerLink p a,.wrapper .btn{font-weight:600}*,.inputBox input,.registerLink p a,.rememberForget a,.toast,.wrapper,.wrapper h1,ul li a{color:var(--font-colour-default)}.searchHint,.searchResult span{opacity:.85}.registerLink p a,.rememberForget a,a.profileChip,ul li a{text-decoration:none}:root{--colour-primary:#1b264f;--colour-primary-light:#274690;--colour-border:rgba(255,255,255,.2);--colour-shadow:rgba(0,0,0,.2);--colour-shadow-button:rgba(0, 0, 0, .1);--colour-inputBox:rgba(255, 255, 255, 0.5);--font-colour-default:white;--colour-rightmost-primary:#357bd6;--colour-rightmost-hover:#488fec;--font-primary:'Ubuntu';--font-secondary:'sans-serif'}*{box-sizing:border-box;padding:0;font-family:var(--font-primary),var(--font-secondary)}body{flex-direction:column;justify-content:center;align-items:center;min-height:100vh;padding-top:70px}.bg{position:fixed;inset:0;background:url(../images/loginIMG.jpg) center/cover no-repeat;z-index:-1}.toast,ul{position:fixed;z-index:1000}ul{top:0;left:0;width:100%;list-style-type:none;padding:.5rem;align-items:center}ul li a{padding:12px;font-size:18px}ul li a:hover{background-color:var(--colour-primary-light)}ul li.right{margin-left:auto}ul li.rightmost{background-color:var(--colour-rightmost-primary)}ul li.rightmost a:hover{background-color:var(--colour-rightmost-hover)}h1.title{font-size:clamp(3rem, 10vw, 200px);margin-top:30px}h2.title{font-size:clamp(1.5rem, 5vw, 50px);margin-top:15px}.index p,.transparent,.wrapper h1,form{text-align:center}#logo{max-height:1.2rem;border-radius:50%}#homeNav{display:inline-flex;align-items:center}#navText{opacity:0;margin-left:10px;vertical-align:middle;visibility:hidden;transition:opacity .3s,visibility .3s}#navText.show{opacity:1;visibility:visible}#app{width:70%;display:flex;flex-direction:column;justify-content:center;padding:20px}form{max-width:500px;margin:auto}#profileForm{max-width:90%;display:grid;grid-template-columns:repeat(2,1fr);gap:20px 30px;margin:0 auto 45px}#profileForm .btn{grid-column:1/-1;justify-self:center;max-width:200px}.profileInput{width:100%}label{width:100%;text-align:left;margin-top:32px;margin-bottom:10px}.buttonDiv{display:flex;justify-content:flex-end}.transparent{background:#339;width:200px;height:60px;font-size:25px;margin-top:1vh;border:none;outline:0}.transparent:hover{background:linear-gradient(120deg,#f0c,#339)}.wrapper{width:420px;background-color:transparent;border:2px solid var(--colour-border);backdrop-filter:blur(20px);box-shadow:0 0 10px var(--colour-shadow);border-radius:10px;padding:30px 40px;margin:5px auto 0}.index{width:70vw}.wrapper h1{font-size:40px}.wrapper .inputBox{position:relative;width:100%;height:50px;margin:25px 0}.inputBox input{background:0 0;border:none;outline:0;border:2px solid var(--colour-inputBox);border-radius:40px;font-size:16px;padding:20px 45px 20px 20px}.index p{margin-top:20px}#profileForm input:required{border-color:red}.inputBox input::placeholder{color:var(--font-colour-default)}.wrapper .rememberForget{display:flex;justify-content:space-between;font-size:14.5px;margin:-15px 0 15px}.rememberForget label input{accent-color:white;margin-right:3px}.registerLink p a:hover,.rememberForget a:hover{text-decoration:underline}.wrapper .btn{width:100%;height:45px;background:#fff;border:none;outline:0;border-radius:40px;box-shadow:0 0 10px var(--colour-shadow-button);cursor:pointer;font-size:16px;color:#333}#updateProfileSubmit{margin-top:50px;max-width:40%}.btn:hover{background:linear-gradient(120deg,#f0c,#339);color:#fff}.wrapper .registerLink{font-size:14.5px;text-align:center;margin:20px 0 15px}.toast{bottom:1.25em;right:1.25em;background-color:var(--colour-primary);padding:.625em;border-radius:.3125em}.profileChip,.searchResult{background:rgba(0,0,0,.18)}.hidden{display:none}.searchResults{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem;align-items:center}.searchResult{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:min(100%,32rem);margin:0 auto;padding:.9rem 1rem;border:1px solid var(--colour-inputBox);border-radius:16px;cursor:pointer;text-align:left;font-size:1rem}.searchResult:hover,a.profileChip:hover{background:rgba(255,255,255,.08)}.searchHint{font-size:.95rem}#publicProfileBody p{margin-top:.9rem;line-height:1.5;word-break:break-word}.profileChips{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1rem}.profileChip{display:inline-flex;align-items:center;gap:.55rem;padding:.75rem 1rem;border-radius:999px;border:1px solid var(--colour-inputBox);width:100%}a.profileChip{color:inherit}.profileChipLabel{font-weight:700;white-space:nowrap}.profileChipIcon{display:block;width:24px;height:24px;border-radius:6px;object-fit:cover}.profileChipValue{opacity:.95;word-break:break-word}@media screen and (max-width:768px){#app,.wrapper{width:100%}body{justify-content:flex-start;align-items:center;font-size:1.5rem;padding-top:70px}#profileForm{gap:10px;grid-template-columns:repeat(1,100%)}#profileForm .inputBox{margin:4px 0}#profileForm label{margin-top:12px}ul{flex-wrap:wrap;justify-content:center;padding:.75rem}ul li{margin:.25rem}ul li.right{margin-left:0}ul li a{padding:10px 12px;font-size:.95rem}h1{margin-top:20px;font-size:4rem}form{max-width:100%;padding:0 1rem}.wrapper{margin:10px auto 0;border-width:1px}.wrapper .inputBox{height:auto;margin:18px 0}.inputBox input{padding:16px 18px;font-size:15px;height:auto}.wrapper .rememberForget{flex-direction:column;align-items:flex-start;gap:.5rem;margin:0 0 15px}.wrapper .btn{height:44px;font-size:15px}}