*{padding:0;margin:0;box-sizing:border-box;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;transition:all .3s}:root{--BASE:#abd4f8;--SECUNDARY: hwb(205 42% 27%);--SECUNDARYDARK: #557d9a;--HILIGHT: #EDE2CE}body{background:url(https://images.pixieset.com/51101317/0e13a930358eb873dc047e6b6c19205c-large.jpg);background-repeat:no-repeat;background-size:cover;background-position-y:40%;min-height:100vh}body .glpg{background-color:var(--BASE);height:100vh;width:100vw}body h1{margin-left:2vw;position:relative;top:5vh;margin-bottom:2vh;font-size:3rem;color:var(--BASE);text-align:center}body .h1{margin-left:2vw;top:5vh;margin-bottom:2vh;font-size:3rem;color:var(--SECUNDARYDARK);text-align:start}body .giftlist-container{display:grid;height:75vh;grid-template-columns:30% 70%;grid-template-rows:10% 90%;margin:2vw;width:50%;background-color:var(--SECUNDARY);border-radius:10px;padding-right:25px;float:left}body .giftlist-container h3{margin-bottom:20px;cursor:pointer;transition:all .2s;width:fit-content;color:var(--HILIGHT)}body .giftlist-container h3:hover{border-bottom:3px solid var(--HILIGHT)}body .giftlist-container .categories-container{grid-row:2/2;grid-column:2/2;display:flex;justify-content:center;font-size:22px}body .giftlist-container .categories-container ul{list-style:none}body .giftlist-container .gift-car{grid-row:1/2;grid-column:1/3;display:flex;justify-content:end}body .giftlist-container .gift-car .btn-giftcar{transition:all .3s ease;width:fit-content;color:var(--HILIGHT);border:1px solid var(--HILIGHT)}body .giftlist-container .btn-giftcar:hover{border-color:#7fffd4;color:#7fffd4}body .giftlist-container .giftlist{grid-row:2/3;grid-column:1/3;position:relative;margin-left:5vw}body .giftlist-container .giftlist .gl{max-height:85%;overflow-y:auto;padding-bottom:40px}body .giftlist-container .giftlist .gift-container{background-color:#fff;border-radius:20px;padding:10px;display:flex;margin-bottom:5px;align-items:center;margin-right:5px}body .giftlist-container .giftlist .gift-container .gift-info{flex-grow:1;margin-left:10px}body .giftlist-container .giftlist .gift-container .btn{justify-self:end}body .giftlist-container .giftlist .gift-container [class$=Add]{background-color:var(--SECUNDARY);color:#fff;border-color:var(--SECUNDARY)}body .giftlist-container .giftlist .gift-container [class$=Add]:hover{color:#fff;background-color:var(--SECUNDARYDARK)}body .giftlist-container .giftlist .gift-container [class$=delete]{border-color:#e85555;background-color:#e85555;color:#fff}body .giftlist-container .giftlist .gift-container [class$=delete]:hover{border-color:#e85555;background-color:#9a3a3a}body .gift-Detailes{height:75vh;margin:2vw;width:40%;background-color:#fff;border-radius:10px;padding:25px;float:left;display:flex;flex-direction:column;overflow:hidden;gap:1rem}body .gift-Detailes .btn-close{font-weight:600;color:#444;align-self:end;font-size:1.5rem;position:absolute;z-index:1}body .gift-Detailes .over>div{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;height:40vh;padding-bottom:1.5rem;overflow-x:hidden}body .gift-Detailes .over{display:flex;flex-direction:column;position:relative;height:25vh}body .gift-Detailes ol{list-style-position:inside}body .gift-Detailes .img-container{height:35vh;min-height:35vh;min-width:100%;background-color:#fff;position:relative;border-radius:15px;overflow:hidden;flex-basis:35vh}body .gift-Detailes .img-container img{object-fit:contain;width:100%;height:100%}body .gift-Detailes .img-container button{position:absolute;width:2rem;height:2rem;top:50%;border:1px solid var(--SECUNDARYDARK);background-color:var(--SECUNDARY);padding:5px;color:#fff;border-radius:50%;cursor:pointer}body .gift-Detailes .img-container .foward{right:1rem}body .gift-Detailes .img-container .back{left:1rem}body .gift-Detailes .info-container{display:flex;flex-direction:column}body .gift-Detailes .info-container h3{color:var(--SECUNDARY)}[class*=btn]{cursor:pointer;padding:5px;margin:10px;height:fit-content;border-radius:8px}.circle{border-radius:50%;overflow:hidden}.input-amount{background-color:inherit;color:inherit;border:2px solid rgba(40,40,40,.4);margin-left:1ch;font-family:Arial;width:2rem}a,a:active{color:#414e78}.modal{transition:all .3s;z-index:1;position:fixed;background:rgba(30,40,40,.8);height:100vh;width:100vw;top:0;display:flex;align-items:center;justify-content:center}.modal .close-modal{align-self:start;position:absolute;right:3rem;color:#fff;cursor:pointer}.modal .close-modal:hover{color:#f4b5a0}.modal .modal-img{height:95%;width:95%;position:relative}.modal .modal-img img{object-fit:contain;width:100%;height:100%}*::-webkit-scrollbar{width:5px}*::-webkit-scrollbar-track{background-color:#0000}*::-webkit-scrollbar-thumb{background-color:var(--SECUNDARYDARK);border-radius:30px;outline:1px solid slategrey}.over>div::-webkit-scrollbar-thumb{background-color:var(--BASE);border-radius:30px;outline:1px solid var(--BASE)}.card{padding:10px;border:1px solid #ccc;border-radius:15px;margin-right:5px}.container{display:grid;align-content:start;justify-content:center;grid-template-rows:20vh 80vh;top:100px;height:100vh;width:100vw;-webkit-backdrop-filter:brightness(60%);backdrop-filter:brightness(60%)}.container h1{top:60%;margin-bottom:0;font-size:20px;text-align:left;margin-left:0;font-weight:900;text-shadow:2px 2px 15px black}.container h3{position:relative;top:60%;font-size:45px;color:var(--HILIGHT)}.container span{position:relative;top:60%;color:#fff}.container .greet{position:relative;left:-20%}.register-container form{position:relative;top:15%;display:flex;flex-direction:column;z-index:1;justify-self:center;align-items:center;gap:.7rem;width:40vw;background-color:#fff;border-radius:14px;box-shadow:8px 10px 20px #6666665a;padding:1rem;max-width:500px;min-width:200px}.register-container form div{width:90%}.register-container form span{color:#ef815c;text-align:right}.register-container form label{padding-left:7px;color:#555}.register-container form button{background-color:var(--SECUNDARY);color:#fff;border:0;border-radius:30px;width:7rem;height:2.3rem;align-self:center}.register-container form input{border-radius:14px;font-size:1.3rem;border:1px solid var(--SECUNDARY);padding:5px 5px 5px 15px;width:100%}.register-container form input::placeholder{font-size:14px}@media screen and (max-width: 426px){.container h1{font-size:2rem}.giftlist-container{background-color:var(--BASE)}.greet span{display:block;text-align:center;font-size:.86rem}.h1{background-color:var(--SECUNDARY);padding:10px;position:sticky;top:0}.container{display:grid;align-content:start;justify-content:center;grid-template-rows:20vh 80vh;top:100px;height:100vh;width:100vw;background:linear-gradient(180deg,rgba(100,100,100,.1) 44%,rgba(0,0,0,.8) 86%,black 100%)}.container h1{top:60%;margin-bottom:0;text-align:center;text-shadow:none}.container h3{position:relative;top:60%;font-size:1rem;text-align:center;color:var(--HILIGHT)}.container .greet{position:static}.register-container form{position:relative;top:15%;display:flex;flex-direction:column;z-index:1;justify-self:center;gap:.7rem;width:90vw;background-color:#ffffffc2}.register-container form p{color:#ef815c;text-align:right}.register-container form label{padding-left:7px;color:var(--SECUNDARYDARK)}.register-container form button{background-color:var(--SECUNDARY);color:#fff;border:1px solid var(--SECUNDARYDARK);border-radius:30px;width:7rem;height:2.3rem;align-self:center}.register-container form input{border-radius:14px;font-size:1.3rem;border:0;padding:5px 5px 5px 15px;border:1px solid #ccc}.register-container form input::placeholder{font-size:14px}}@media screen and (min-width: 426px) and (max-width: 768px){.container{display:grid;align-content:start;justify-content:center;grid-template-rows:20vh 80vh;top:100px;height:100vh;width:100vw}.container h1{top:60%;margin-bottom:0;font-size:20px;text-align:left;margin-left:0;font-weight:100}.container .greet{position:static}.container h3{position:relative;top:60%;font-size:25px;color:var(--HILIGHT)}.container span{color:#fff;position:relative;top:60%}.register-container form{position:relative;top:15%;display:flex;flex-direction:column;z-index:1;justify-self:center;align-items:center;gap:.7rem;background-color:#fff;border-radius:14px;box-shadow:8px 10px 20px #6666665a;padding:1rem}.register-container form p{color:#ef815c;text-align:right}.register-container form label{padding-left:7px;color:#555}.register-container form button{background-color:var(--SECUNDARY);color:#fff;border:0;border-radius:30px;width:7rem;height:2.3rem;align-self:center}.register-container form input{border-radius:14px;font-size:1.3rem;border:1px solid var(--SECUNDARY);padding:5px 5px 5px 15px}.register-container form input::placeholder{font-size:14px}}.loader{width:0px;aspect-ratio:1;display:grid}.loader:before,.loader:after{content:"";grid-area:1/1;--c:no-repeat radial-gradient(farthest-side,var(--BASE) 92%,#0000);background:var(--c) 50% 0,var(--c) 50% 100%,var(--c) 100% 50%,var(--c) 0 50%;background-size:12px 12px;animation:l12 1s infinite}.loader:before{margin:4px;filter:hue-rotate(45deg);background-size:8px 8px;animation-timing-function:linear}@keyframes l12{to{transform:rotate(.5turn)}}@media screen and (max-width: 426px){body .h1{margin-left:0;top:0;margin-bottom:2vh;font-size:2rem;padding-top:20px;color:#fff;text-shadow:5px 3px 5px #999;text-align:start;text-align:center}body .difuser{display:none}body .giftlist-container{display:grid;height:90vh;grid-template-columns:100%;grid-template-rows:10% 90%;margin-left:0;width:100vw;background-color:var(--BASE);border-radius:10px;padding-right:25px}body .giftlist-container h3{margin-bottom:20px;cursor:pointer;transition:all .3s;color:var(--SECUNDARYDARK);font-size:1rem}body .giftlist-container h3:active{color:var(--SECUNDARYDARK)}body .giftlist-container .gift-car{grid-row:1/2;grid-column:1/1;display:flex;justify-content:end;font-size:.8rem}body .giftlist-container .gift-car .btn-giftcar{transition:all .3s ease;width:fit-content;color:#fff;background-color:var(--SECUNDARY);border:none}body .giftlist-container .btn-giftcar:active{background-color:var(--SECUNDARYDARK)}body .giftlist-container .giftlist{grid-row:2/3;grid-column:1/1;position:relative;margin-left:4vw;padding-bottom:40px}body .giftlist-container .giftlist .gl{max-height:100%;overflow-y:auto}body .giftlist-container .giftlist .gl+div{background-color:var(--BASE)}body .giftlist-container .giftlist .gift-container{background-color:#fff;border-radius:20px;padding:10px;display:flex;margin-bottom:5px;align-items:center;margin-right:5px}body .giftlist-container .giftlist .gift-container h2{font-size:1rem}body .giftlist-container .giftlist .gift-container p{font-size:.6rem}body .giftlist-container .giftlist .gift-container .gift-info{flex-grow:1;margin-left:10px}body .giftlist-container .giftlist .gift-container [class^=btn]{justify-self:end;font-size:.8rem}body .gift-Detailes{height:90vh;width:100%;background-color:#fff;border-radius:10px;padding:25px;display:flex;flex-direction:column;overflow:hidden;gap:1rem;z-index:1;position:absolute;left:0;top:5vh}body .gift-Detailes .over>div{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;height:40vh;padding-bottom:1.5rem}body .gift-Detailes .over{display:flex;flex-direction:column;position:relative;height:35vh}body .gift-Detailes ol{list-style-position:inside}body .gift-Detailes .btn-close{position:absolute;z-index:1}body .gift-Detailes .img-container{height:35vh;min-height:35vh;min-width:100%;background-color:#fff;position:relative;border-radius:15px;overflow:hidden;flex-basis:35vh}body .gift-Detailes .img-container img{object-fit:contain;width:100%;height:100%}body .gift-Detailes .img-container button{position:absolute;width:2rem;height:2rem;top:50%;border:1px solid var(--SECUNDARYDARK);background-color:var(--SECUNDARY);padding:5px;color:#fff;border-radius:50%;cursor:pointer}body .gift-Detailes .img-container .foward{right:1rem}body .gift-Detailes .img-container .back{left:1rem}body .gift-Detailes .info-container{display:flex;flex-direction:column}body .gift-Detailes .info-container h3{color:var(--SECUNDARY);font-size:1rem}body .gift-Detailes .info-container p{font-size:.7rem}}@media screen and (max-width: 426px) and (min-width: 426px) and (max-width: 768px){.h1{margin-left:2vw;position:relative;top:5vh;margin-bottom:2vh;font-size:3rem;color:var(--SECUNDARYDARK);text-align:start}.giftlist-container{display:grid;height:80vh;grid-template-columns:30% 70%;grid-template-rows:10% 90%;margin:2vw;width:50%;border-radius:10px;padding-right:25px;float:left}.giftlist-container h3{margin-bottom:20px;cursor:pointer;transition:all .3s;color:var(--HILIGHT)}.giftlist-container h3:hover{color:#5dc}.giftlist-container .categories-container{grid-row:2/2;grid-column:2/2;display:flex;justify-content:center;font-size:22px}.giftlist-container .categories-container ul{list-style:none}.giftlist-container .gift-car{grid-row:1/2;grid-column:1/3;display:flex;justify-content:end}.giftlist-container .gift-car .btn-giftcar{transition:all .3s ease;width:fit-content;color:var(--HILIGHT);border:1px solid var(--HILIGHT)}.giftlist-container .btn-giftcar:hover{border-color:#7fffd4;color:#7fffd4}.giftlist-container .giftlist{grid-row:2/3;grid-column:1/3;position:relative;margin-left:5vw}.giftlist-container .giftlist .gl{max-height:85%;overflow-y:auto;padding-bottom:40px}.giftlist-container .giftlist .gift-container{background-color:#fff;border-radius:20px;padding:10px;display:flex;margin-bottom:5px;align-items:center;margin-right:5px}.giftlist-container .giftlist .gift-container .gift-info{flex-grow:1;margin-left:10px}.giftlist-container .giftlist .gift-container .btn{justify-self:end}.giftlist-container .giftlist .gift-container [class$=Add]{background-color:var(--SECUNDARY);color:#fff;border-color:var(--SECUNDARY)}.giftlist-container .giftlist .gift-container [class$=Add]:hover{color:#fff;background-color:var(--SECUNDARYDARK)}.giftlist-container .giftlist .gift-container [class$=delete]{border-color:#e85555;background-color:#e85555;color:#fff}.giftlist-container .giftlist .gift-container [class$=delete]:hover{border-color:#e85555;background-color:#9a3a3a}.gift-Detailes{height:80vh;margin:2vw;width:40%;background-color:#fff;border-radius:10px;padding:25px;float:left;display:flex;flex-direction:column;overflow:hidden;gap:1rem}.gift-Detailes .btn-close{font-weight:600;color:#444;align-self:end;font-size:1.5rem;position:absolute;z-index:1}.gift-Detailes .over>div{display:flex;flex-direction:column;gap:1rem;overflow-y:auto;height:40vh;padding-bottom:1.5rem;overflow-x:hidden}.gift-Detailes .over{display:flex;flex-direction:column;position:relative;height:25vh}.gift-Detailes ol{list-style-position:inside}.gift-Detailes .img-container{height:35vh;min-height:35vh;min-width:100%;background-color:#fff;position:relative;border-radius:15px;overflow:hidden;flex-basis:35vh}.gift-Detailes .img-container img{object-fit:contain;width:100%;height:100%}.gift-Detailes .img-container button{position:absolute;width:2rem;height:2rem;top:50%;border:1px solid var(--SECUNDARYDARK);background-color:var(--SECUNDARY);padding:5px;color:#fff;border-radius:50%;cursor:pointer}.gift-Detailes .img-container .foward{right:1rem}.gift-Detailes .img-container .back{left:1rem}.gift-Detailes .info-container{display:flex;flex-direction:column}.gift-Detailes .info-container h3{color:var(--SECUNDARY)}}