*{margin:0;padding:0;font-family:Quicksand,sans-serif;box-sizing:border-box}body{height:100vh;width:100vw;display:flex;align-items:center;justify-content:center}.app-container{background-color:#f1f1f1;width:800px;max-height:700px;min-height:620px;border-radius:20px;filter:drop-shadow(0px 3px 2px rgba(0,0,0,.25))}.header-nonauth>h1{text-align:center;color:#4e4e4e;font-size:6rem;font-family:Pattaya,Trebuchet MS,sans-serif;padding-top:2rem;line-height:6rem}.header-nonauth>h2{text-align:center;color:#8d8d8d;font-weight:600;line-height:2rem}.auth-form-div{display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:400px;margin:50px auto 0}.auth-form-header{font-size:2rem;font-weight:550;margin-bottom:25px;color:#4e4e4e}.auth-form-div>input{width:250px;height:40px;border-radius:8px;border:none;margin:5px 0;filter:drop-shadow(0px 3px 2px rgba(0,0,0,.25));padding:6px}.auth-form-div>button{width:250px;height:40px;border-radius:8px;border:none;margin:5px 0;cursor:pointer;font-weight:500;text-align:center;font-size:1rem;filter:drop-shadow(0px 3px 2px rgba(0,0,0,.25));display:inline-flex;justify-content:center;align-items:center;background-color:#5a5a5a;color:#fff;transition:.2s}.auth-form-div>button:hover{background-color:#444}.auth-form-div>button:active{background-color:#626262}.auth-form-div>button>img{width:20px;margin-right:5px}.auth-toggle{cursor:pointer}span:has(.auth-toggle){color:#4e4e4e}dialog{border:none;color:red;position:relative;max-width:350px;text-align:center;background-color:#0000}h1{color:#4e4e4e;font-family:Pattaya,Trebuchet MS,sans-serif;font-size:3rem;padding:2rem}.settings-btn{position:absolute;top:2.5rem;right:2rem;border:none;cursor:pointer;background-color:#0000}.dashboard-container{display:flex;justify-content:space-evenly;gap:16px;margin-top:60px}.dashboard-pair{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}.dashboard-btn{width:200px;height:200px;border-radius:20px;border:none;background-color:#fff;cursor:pointer;justify-self:center;filter:drop-shadow(0px 4px 4px rgba(0,0,0,.25));transition:.2s}.dashboard-btn:hover{scale:1.05}.dashboard-btn-label{text-align:center;color:#8d8d8d;font-weight:700}.add-clothing-form{max-width:250px;display:flex;flex-direction:column;margin:20px auto 0}.add-clothing-form>label{margin-left:8px;margin-bottom:6px;color:#8d8d8d;font-weight:600}.add-clothing-form-input{margin-bottom:1rem;width:250px!important;height:40px;resize:none;border:none;border-radius:8px;color:#8d8d8d;font-weight:600;font-size:1rem;padding:0 8px;filter:drop-shadow(0px 4px 2px rgba(0,0,0,.25))}textarea{height:80px!important;padding:8px!important}.add-clothing-form fieldset{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:none;justify-content:space-between;color:#8d8d8d;font-weight:600;padding:6px 0;margin-bottom:1.5rem}legend{margin-left:8px}.radio-container{display:block;position:relative;width:75px;height:75px;cursor:pointer}.radio-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.radio-box{position:absolute;top:0;left:0;width:75px;height:75px;border-radius:20px;display:flex;justify-content:center;align-items:center;background-color:#fff;filter:drop-shadow(0px 4px 2px rgba(0,0,0,.25));transition:.2s}.radio-box:hover{scale:1.05}.neg:hover{background-color:#ffd6d6}.radio-box img{width:60%;height:60%}.radio-container input:not(:checked)~.radio-box{scale:.95;filter:brightness(.7)}.radio-container input:not(:checked)~.radio-box:hover{scale:1;filter:brightness(.5)}.form-submit-btn{background-color:#fff;border:none;height:40px;color:#8d8d8d;font-size:1rem;font-weight:600;border-radius:8px;filter:drop-shadow(0px 4px 2px rgba(0,0,0,.25));cursor:pointer;transition:.2s}.form-submit-btn:hover{scale:1.05}.form-submit-btn:disabled{background-color:#868686;color:#c7c7c7}.shoe{width:35px!important}.back-btn{position:absolute;bottom:25px;left:25px;border:none;border-radius:8px;height:40px;width:125px;cursor:pointer;font-weight:600;font-size:1rem;transition:.2s;color:#8d8d8d;background-color:#fff;filter:drop-shadow(0px 4px 2px rgba(0,0,0,.25))}.delete-btn{position:absolute;bottom:25px;right:25px;border:none;border-radius:8px;height:40px;width:125px;cursor:pointer;font-weight:600;font-size:1rem;transition:.2s;color:#e53838;background-color:#fdd;filter:drop-shadow(0px 4px 2px rgba(117,0,0,.25))}.back-btn:hover,.delete-btn:hover{scale:1.05}.background-text{display:block;position:absolute;text-align:center;margin:0 auto;top:45%;width:100%;font-weight:700;font-size:2rem;color:#8d8d8d}.grid-wrapper{height:400px;overflow:hidden;position:relative}.wardrobe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;place-items:center;overflow-y:auto;height:100%;padding-bottom:2rem}.outfits{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;place-items:center;overflow-y:auto;height:100%;padding-top:.25rem;padding-bottom:2rem}.fade{position:absolute;bottom:0;left:0;right:0;height:20px;background:linear-gradient(to bottom,transparent,#f1f1f1)}.clothing-icon-container{display:flex;flex-direction:column;align-items:center}.clothing-icon{width:150px;height:150px;border-radius:20px;border:none;background-color:#fff;cursor:pointer;justify-self:center;filter:drop-shadow(0px 4px 4px rgba(0,0,0,.25));transition:.2s;margin-bottom:8px}.clothing-icon:hover{scale:1.05}.clothing-icon-label{display:block;text-align:center;color:#8d8d8d;font-weight:700}.clothing-icon-img{scale:.9}.edit-dialog{margin:10px auto;color:#8d8d8d;font-weight:600;max-width:100%}.add-btn{position:absolute;cursor:pointer;border:none;top:60%;border-radius:8px;height:40px;width:125px;font-weight:600;font-size:1rem;transition:.2s;color:#8d8d8d;background-color:#fff;filter:drop-shadow(0px 4px 2px rgba(0,0,0,.25))}.add-btn:hover{scale:1.05}.outfit-icon-container{display:flex;flex-direction:column;align-items:center}.outfit-icon{width:190px;height:190px;border-radius:20px;border:none;background-color:#b0b0b0;cursor:pointer;justify-self:center;filter:drop-shadow(0px 4px 4px rgba(0,0,0,.25));transition:.2s;margin-bottom:8px;display:grid;grid-template-columns:repeat(2,1fr);place-items:center}.outfit-icon:hover{scale:1.05}.outfit-icon .radio-box:hover{scale:1}.outfit-icon-label{display:block;text-align:center;color:#8d8d8d;font-weight:700;height:2em}.create-btn{position:absolute;bottom:25px;right:25px;border:none;border-radius:8px;height:40px;width:125px;cursor:pointer;font-weight:600;font-size:1rem;transition:.2s;color:#8d8d8d;background-color:#fff;filter:drop-shadow(0px 4px 2px rgba(0,0,0,.25))}.create-btn:hover{scale:1.05}@media (max-height: 620px){body{height:auto}}@media (max-width: 900px){.app-container{scale:.85}}@media (max-width: 700px){.app-container{scale:.75}}@media (max-width: 600px){body{height:auto}.app-container{scale:1;width:95vw;margin-top:16px;height:80vh}.header-nonauth>h1{font-size:4rem;line-height:4rem}.header-nonauth>h2{font-size:1.25rem;line-height:1.25rem}.auth-form-header{font-size:1.5rem}h1{font-size:2rem;padding:1.5rem}.settings-btn{top:1.5rem;right:1.5rem;scale:.8}.dashboard-container{height:68vh;flex-direction:column;margin-top:0;gap:6px;justify-content:space-evenly;align-items:center}.dashboard-pair{gap:6px}.dashboard-btn{width:130px;height:130px;border-radius:16px}.dashboard-btn-img{width:100px;height:100px}.wardrobe{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.outfits{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.clothing-icon{width:130px;height:130px;border-radius:16px}.clothing-icon-img{scale:.8}}