*{box-sizing:border-box}body{margin:0;padding:0;font-family:Poppins,sans-serif;font-weight:400;font-style:normal}ul{list-style:none;margin-block-start:0%;margin-block-end:0%;padding-inline-start:0}a{text-decoration:none;color:#000}@media screen and (max-width: 480px){main{height:100vh;position:relative;display:flex}.main-image{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease;filter:grayscale(65%)}.main-image.loaded{opacity:1}main:before{content:"";top:0;left:0;width:100%;height:100vh;background-position:center;background-repeat:no-repeat;background-size:cover;position:absolute;z-index:0;overflow:hidden;filter:grayscale(25%)}.loaded{opacity:1}main #attribution{position:relative;padding:1em;opacity:.8;font-size:.9em;align-self:flex-start}}#loader-container{background:#5f6179;height:100vh}#loader{position:absolute;left:50%;top:50%;z-index:1;width:120px;height:120px;margin:-76px 0 0 -76px;border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #3498db;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (max-width: 480px){#register-component{display:flex;justify-content:center}#register-component form{padding:3%;width:80%;margin-top:8em;margin-bottom:8em;background-color:#3650f7;border-radius:1%;box-shadow:10px 10px 5px #000000bf;-webkit-box-shadow:10px 10px 5px 0px rgba(0,0,0,.75);-moz-box-shadow:10px 10px 5px 0px rgba(0,0,0,.75)}#register-component form #userLabel{display:block;margin-bottom:3%;font-size:1.1em}#register-component form #username{margin-bottom:5%;width:80%;font-size:20px}#register-component form #usernote{background-color:#000;color:#faebd7;font-size:.9em;padding:2%;border-radius:1%}#register-component form #pwd{margin-bottom:5%;width:80%;font-size:20px}#register-component form #pwdLabel{display:block;margin-bottom:3%;font-size:1.1em}#register-component form #pwdnote{background-color:#000;color:#faebd7;font-size:.9em;padding:2%;border-radius:1%}#register-component form #confirmPwdLabel{display:block;margin-bottom:3%;font-size:1.1em}#register-component form #confirm_pwd{margin-bottom:9%;width:80%;font-size:20px}#register-component form #confirmnote{background-color:#000;color:#faebd7;font-size:.9em;padding:2%;border-radius:1%}#register-component form #error-center{background-color:#000;color:red;text-align:center;padding:2%;border-radius:1%;margin-bottom:4%;font-size:1.3em}#register-component form button{display:block;margin:auto;font-size:1.2em;padding:2%}#register-component form .persistCheck{padding-top:5%}.hide{display:none}.valid{color:#32cd32;margin-left:.25rem}.invalid{color:red;margin-left:.25rem}.offscreen{position:absolute;left:-9999px}}@media screen and (max-width: 480px){.app-footer{background-color:#3650f7;text-align:center;padding:4%;border-top:2px solid #333}.app-footer.dark-mode{background-color:#000;color:#fff;border-top:2px solid #fff}.app-footer span{color:red;font-size:1em}.app-footer.dark-mode span{color:#fff;font-size:1em}.app-footer a{font-size:.8em}.app-footer.dark-mode a{font-size:.8em;color:#fff}}@media screen and (max-width: 480px){header .home-nav{z-index:2;position:relative;border-bottom:2px solid #333}header .home-nav ul{display:flex;flex-direction:row;justify-content:space-around;padding:2%}header .home-nav ul #logo{font-size:2.5em;align-self:flex-start}header .home-nav ul #logo a{color:#3650f7}header .home-nav ul #register{font-size:1.5em;align-self:center}header .home-nav ul #login{font-size:1.5em;align-self:center}header .home-nav.dark-mode{background-color:#000;border-bottom:2px solid #fff}header .home-nav.dark-mode ul #logo a{color:#fff}header .home-nav.dark-mode ul #register a{align-self:center;color:#fff}header .home-nav.dark-mode ul #login a{align-self:center;color:#fff}header .tab-bar{z-index:2;position:relative;border-bottom:2px solid #333}header .tab-bar ul{display:flex;flex-direction:row;justify-content:space-around;padding:2%}header .tab-bar.dark-mode{background-color:#000;border-bottom:2px solid #fff}header .tab-bar #settings{font-size:2em}header .tab-bar #messages{font-size:2em;color:#3650f7}header .tab-bar #logout{font-size:2em;color:#3650f7}header .tab-bar #avatar{position:relative}header .tab-bar #avatar img{width:70px;height:70px;border-radius:50%;border:2px solid #333}header .tab-bar #avatar .alerts{position:absolute;border:2px solid black;border-radius:50%;background-color:#3650f7;right:-4px;top:-2px;width:20px;height:20px;text-align:center;font-size:.8em}header .tab-bar #avatar .alerts.dark-mode{border:2px solid rgb(54,80,247);background-color:#000;color:#fff}header .cog-icon.dark-mode{color:#fff}header .message-icon.dark-mode{color:#fff}header .door-icon.dark-mode{color:#fff}}@media screen and (max-width: 480px){#login-component{display:flex;justify-content:center}#login-component form{padding:3%;width:80%;margin-top:8em;margin-bottom:12em;background-color:#3650f7;border-radius:1%;box-shadow:10px 10px 5px #000000bf;-webkit-box-shadow:10px 10px 5px 0px rgba(0,0,0,.75);-moz-box-shadow:10px 10px 5px 0px rgba(0,0,0,.75)}#login-component form #userLabel{display:block;margin-bottom:5%;font-size:1.1em}#login-component form #username,#login-component form #pwd{margin-bottom:5%;width:80%;font-size:20px}#login-component form #pwdLabel{display:block;margin-bottom:5%;font-size:1.1em}#login-component form #error-center{background-color:#000;color:red;text-align:center;padding:2%;border-radius:1%;margin-bottom:4%;font-size:1.3em}#login-component form button{display:block;margin:0 auto 3%;font-size:1.2em;padding:2%}.hide{display:none}.offscreen{position:absolute;left:-9999px}}@media screen and (max-width: 480px){.users-available{position:relative}.users-available.dark-mode{background-color:#000;color:#fff}.users-available h1{text-align:center;margin-block-start:0;margin-block-end:.67em;padding-top:3%;padding-bottom:3%}.users-available ul{display:flex;flex-wrap:wrap;gap:20px;padding:4%}.users-available .user-container .user-name{text-align:center;font-size:1.5em}.users-available .user-container .user-image img{width:120px;height:120px;border-radius:50%;border:3px solid rgb(54,80,247)}.users-available .user-container .user-image.dark-mode img{width:120px;height:120px;border-radius:50%;border:3px solid #fff}.users-available .user-container .user-details{position:absolute;background-color:#3650f7;width:89%;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;padding:5%;border-radius:2%}.users-available .user-container .user-details .close-details{text-align:right;font-size:1.8em}.users-available .user-container .user-details .details-image img{width:150px;height:150px;border-radius:50%;border:2px solid #fff}.users-available .user-container .user-details .details-username,.users-available .user-container .user-details .details-userage{font-size:2em}.users-available .user-container .user-details .details-usergender{font-size:1.7em}.users-available .user-container .user-details .details-userheight,.users-available .user-container .user-details .details-userweight,.users-available .user-container .user-details .details-interest{font-size:1.3em}.users-available .user-container .user-details .details-aboutme{font-size:1.3em;padding-top:1%}.users-available .coming-soon h2{margin-block-end:0em;text-align:center;padding:2%}}@media screen and (max-width: 480px){.settings-container h1{text-align:center;margin-block-start:0;margin-block-end:.67em;padding-top:3%}.settings-container.dark-mode{background-color:#000;color:#fff}.settings-container .dark-option{text-align:center;font-size:1.3em;padding:3%}.settings-container .subscription-option,.settings-container .shop-merch{text-align:center;padding-bottom:4%}.settings-container .shop-merch img{width:80%}}@media screen and (max-width: 480px){.onboard-component h2{text-align:center}.onboard-component form #photoLabel{display:block;text-align:center;padding-bottom:4%;padding-top:8%}.onboard-component form #photo-preview #main-image{width:80%;height:350px;display:block;margin:0 auto;object-fit:cover}.onboard-component form #main-photo{display:block;margin:8% auto;border:none}.onboard-component form #ageLabel{display:block;text-align:center;padding-bottom:4%}.onboard-component form #age-display{text-align:center;padding-bottom:3%}.onboard-component form #age{display:block;width:80%;margin:0 auto 6%}.onboard-component form #heightLabel{display:block;text-align:center;padding-top:4%;padding-bottom:4%}.onboard-component form #height{display:block;width:80%;margin:0 auto 6%;font-size:1.1em;padding:1%}.onboard-component form #weightLabel{display:block;text-align:center;padding-top:4%;padding-bottom:4%}.onboard-component form #weight{display:block;width:80%;margin:0 auto 6%;font-size:1.1em;padding:1%}.onboard-component form #genderLabel{display:block;text-align:center;padding-top:4%;padding-bottom:4%}.onboard-component form #gender{display:block;width:80%;margin:0 auto 6%;font-size:1.1em;padding:1%}.onboard-component form #interestLabel{display:block;text-align:center;padding-top:4%;padding-bottom:4%}.onboard-component form #interest{display:block;width:80%;margin:0 auto 6%;font-size:1.1em;padding:1%}.onboard-component form #relationshipLabel{display:block;text-align:center;padding-top:4%;padding-bottom:4%}.onboard-component form #relationship{display:block;width:80%;margin:0 auto 6%;font-size:1.1em;padding:1%}.onboard-component form #aboutLabel{display:block;text-align:center;padding-top:4%;padding-bottom:4%}.onboard-component form .text-char-remaining{text-align:center;padding-bottom:2%}.onboard-component form #about{display:block;width:70%;margin:0 auto 6%;font-size:1.5em;padding:1%;resize:none}.onboard-component form button{display:block;margin:0 auto 6%;font-size:1.2em;padding:2%}}