*{margin:0;padding:0;box-sizing:border-box}:root{--main-bg-color: #e9e9db;--navbar-color: #333333}body{background-color:var(--main-bg-color);height:100%}html{height:100%}.navbar{background-color:var(--navbar-color);display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid #000000;flex-wrap:nowrap}.footer{background-color:var(--navbar-color);display:flex;justify-content:center;align-items:center;border-top:3px solid #000000;margin-top:15%;height:45px;position:relative}.footer-text{color:#fff;font-family:Itim,serif}.doodle-logo{padding:1rem;width:300px;height:100%}.navbar-items{display:flex;flex-wrap:nowrap;gap:30px;padding:10px 35px 10px 10px;font-size:24px;align-items:center}h2,a{font-family:Marker Felt}.navbar-link{text-decoration:none;color:#fff;padding-top:15px;transition:transform .3s ease-in-out}.navbar-link:hover{transform:scale(1.1)}.navbar-link:hover{color:#06c;cursor:pointer;max-width:fit-content}.featured-comic-header{display:flex;flex-direction:column;align-items:center;margin-top:25px}.featured-comic-title{border:3px solid;display:flex;background-color:#333;text-align:center;justify-content:center;padding:1%;width:auto;box-shadow:0 6px 10px #000}.featured-h2{color:#fff;font-family:Marker Felt}.featured-comic-container{display:flex;justify-content:center;align-items:center;border:5px solid;width:auto;margin-top:20px;flex-direction:column}.featured-comic-img{max-width:100%;height:auto}.featured-comic-img:hover{cursor:pointer}.featured-comic-timer{display:flex;white-space:nowrap;background-color:#333;border:5px solid #000000;color:#fff;margin-top:5px;margin-left:45%;padding:10px;max-width:fit-content;justify-content:flex-end;box-shadow:0 6px 10px #000}.timer-and-img{display:flex;flex-direction:column;align-items:flex-end;font-family:Itim,serif;font-weight:400;font-style:normal}.timer{max-width:100%}.comics-3x3-div{border:30px solid #000000;background-color:#c2c2d6;margin-top:1.5%;display:grid;gap:1.5px;justify-content:center;object-fit:cover;padding:1rem}.loader{will-change:transform;width:100px;height:100px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}to{transform:rotate(360deg)}}.loading-elements{display:flex;align-items:center}.loading-text{font-size:25px;font-family:Itim,serif;font-weight:400;font-style:normal}.comic-panel{width:300px;height:300px;background-size:cover;background-position:center;max-width:265px;max-height:auto;border:3px solid #000000;cursor:pointer;transition:transform .2s ease-in-out,box-shadowing .5 ease}.comic-panel:hover{transform:scale(1.1);box-shadow:10px 15px 20px #000}.comic-3x3-button{margin-bottom:10px;background-color:#333;border:3px solid #000000;padding:10px;color:#fff;box-shadow:0 6px 10px #000;cursor:pointer;font-family:Itim,serif;font-weight:400;font-style:normal;transition:transform .7s ease}.comic-3x3-button:hover{transform:scale(1.2)}.refresh-h3-container{display:flex;flex-direction:column;background-color:#333;color:#fff}.refresh-h3{background-color:#333;text-align:center;justify-content:center;color:#fff;margin:1%;padding:2px;font-family:Marker Felt}.comic-slam-guide{display:grid;border:3.5px solid black;background-color:#333;justify-items:center;align-items:center;gap:1rem;margin-top:4%;margin-bottom:0;height:auto;width:90%;padding-left:10px;padding-right:10px;box-shadow:0 6px 10px #000}.comic-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5px;width:100%}.refresh-h3-para{position:relative;text-align:center;width:100%;font-size:1.15rem;margin:0 auto;font-family:Itim,serif;font-weight:400;font-style:normal}.comics-3x3-section{justify-items:center}.modal-container{display:flex;justify-content:center;position:fixed}dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:none;border-radius:8px;padding:10px;box-shadow:0 4px 6px #0003;background:#000;width:90%;max-width:1250px;max-height:90%;overflow:auto}dialog::backdrop{background:#000c;align-items:center;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-content{display:flex;flex-direction:column;background-color:#c2c2d6;align-items:center;padding:20px;color:#000}.close-modal{align-self:flex-end;font-size:30px;background:none;border:none;cursor:pointer}.close-modal:hover{color:#06c}.favorite-button{background:none;border:none}.heart-icon{background-color:none;transition:transform .2s ease-in-out,color .3s ease,filter .3s ease;fill:none;stroke:gray;cursor:pointer}.heart-icon.favorited{fill:#e0245e;stroke:#e0245e;transform:scale(1.2);filter:drop-shadow(0 0 10px rgba(224,36,94,.7));animation:bounce .5s ease-out}@keyframes bounce{0%{transform:scale(1.2)}30%{transform:scale(1.1)}50%{transform:scale(1.2)}70%{transform:scale(1.1)}to{transform:scale(1.2)}}.modal-image{max-width:100%;max-height:70vh;margin:20px 0}.modal-title{display:flex;justify-content:center;font-family:Marker Felt}.modal-minor-info{display:flex;align-items:center;gap:.5rem;font-family:Itim,serif;font-weight:400;font-style:normal}.modal-transcript{font-size:18px;color:#000;text-align:center;font-family:Itim,serif;font-weight:400;font-style:normal}#comic-gen-container{border-color:#10b25e;border:10px;display:flex;flex-direction:column;align-items:center;gap:1rem}#comic-gen-name{border:3px solid;border-color:#000;display:flex;flex-wrap:nowrap;background-color:#333;text-align:center;justify-content:center;box-shadow:0 6px 6px #000;color:#fff;padding:1%}.da-buttons{display:flex;gap:50px;width:100%;justify-content:center}.comic-gen-img-container{text-align:center;margin-top:20px;border:4px solid;border-color:#000;padding:3px}#comic-gen-img{max-width:100%;height:auto;margin-top:10px;border:5px solid;border-color:#000}#comic-gen-title{display:flex;justify-content:center;padding:2% 2% 0;width:100%}.favorites-title{display:flex;flex-direction:column;justify-content:center;align-items:center;border-color:#06c;margin-bottom:2%;margin-top:2%}#fav-name{border:3px solid;display:flex;background-color:#333;text-align:center;justify-content:center;border-color:#000;color:#fff;padding:1%;width:auto}.favorited-comic{display:flex;flex-direction:column;align-items:center;border-color:#000;border:3px solid;max-width:250px;height:320px;background-color:#c2c2d6;padding:9px;border-radius:1rem;box-shadow:0 6px 8px #000}li{display:flex;justify-content:center;max-width:3990px;padding-top:2rem}.fav-text{color:#0f0303;font-family:Marker Felt}ul{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem;list-style:none;padding:1rem}.fav-panel{max-width:100%;margin-bottom:9px;height:250px;overflow-y:scroll}.fav-panel:hover{cursor:pointer}#user-input{border:3px solid;gap:5px;display:flex;background-color:#333;text-align:center;justify-content:center;border-color:#000;color:#fff;padding:1%;width:auto;box-shadow:0 3px 10px #000}.gen-buttons{display:flex;gap:1rem}.comic-gen-button{border:3px solid;gap:5px;display:flex;background-color:#333;text-align:center;justify-content:center;border-color:#000;color:#fff;padding:7%;width:auto;box-shadow:0 3px 10px #000}#random-btn{margin-bottom:10px;background-color:#333;border:3px solid #000000;padding:10px;color:#fff;box-shadow:0 6px 10px #000;cursor:pointer;font-family:Itim,serif;font-weight:400;font-style:normal;transition:transform .7s ease}#random-btn:hover{transform:scale(1.1)}#next-btn{margin-bottom:10px;background-color:#333;border:3px solid #000000;padding:10px;color:#fff;box-shadow:0 6px 10px #000;cursor:pointer;font-family:Itim,serif;font-weight:400;font-style:normal;transition:transform .7s ease}#next-btn:hover{transform:scale(1.1)}#prev-btn{margin-bottom:10px;background-color:#333;border:3px solid #000000;padding:10px;color:#fff;box-shadow:0 6px 10px #000;cursor:pointer;font-family:Itim,serif;font-weight:400;font-style:normal;transition:transform .7s ease}#prev-btn:hover{transform:scale(1.1)}#submit-btn{margin-bottom:10px;background-color:#333;border:3px solid #000000;padding:5px;color:#fff;box-shadow:0 6px 10px #000;cursor:pointer;font-family:Itim,serif;font-weight:400;font-style:normal;max-width:fit-content;max-height:fit-content}label{font-family:Itim,serif;font-weight:400;font-style:normal}form{max-height:fit-content;max-width:fit-content}
