*{box-sizing:border-box}
.container{max-width:1800px;margin:0 auto}
body{font-family:Arial,sans-serif;padding:20px;background:#dbffcc;margin:0}
.header{padding:30px;font-size:min(2vw,80px);text-align:center;background:#fff;margin-bottom:20px;border-radius:12px}
.header h4 a{text-decoration:none;color:#333;margin:0 10px}
.main{display:flex;flex-wrap:wrap;flex-direction:row;gap:20px;max-width:1800px;margin:0 auto}
.main h3{font-size:min(2vw,80px)}
.left-column{flex:3;min-width:300px}
.right-column{flex:1;min-width:250px}
.card{background:#fff;padding:20px;margin-top:20px;border-radius:12px;box-shadow:0 2px 6px #0000001a}
.footer{padding:20px;text-align:center;background:#ddd;margin-top:20px}
.mySlides{display:none}
.mySlides img{border-radius:8px}
.slideshow-container{max-width:1000px;position:relative;margin:auto}
.dot{height:15px;width:15px;margin:0 2px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color .6s ease}
.active{background-color:#717171}
.fade{animation-name:fade;animation-duration:1.5s}
@keyframes fade {
from{opacity:.4}
to{opacity:1}
}
@media screen and (max-width: 800px) {
.left-column,.right-column{width:100%;padding:0}
}
@media only screen and (max-width: 300px) {
.text{font-size:11px}
}
.comic-image{width:100%;height:auto;display:block;margin:0 auto;box-shadow:0 0 10px #0003}
.comic-nav{text-align:center;margin-top:20px}
.comic-nav button{background-color:#4CAF50;border:none;color:#fff;padding:12px 24px;margin:0 10px;text-align:center;text-decoration:none;display:inline-block;font-size:16px;cursor:pointer;border-radius:4px}
.comic-nav button:hover{background-color:#45a049}
*{box-sizing:border-box}
body{font-family:Arial,sans-serif;padding:20px;background:#dbffcc}
.column{-ms-flex:25%;flex:25%;max-width:25%;padding:0 4px;box-sizing:border-box}
.column img{margin-top:8px;vertical-align:middle;width:100%}
@media screen and (max-width: 800px) {
.column{-ms-flex:50%;flex:50%;max-width:50%}
}
@media screen and (max-width: 600px) {
.column{-ms-flex:100%;flex:100%;max-width:100%}
}
#myImg{border-radius:5px;cursor:pointer;transition:.3s}
#myImg:hover{opacity:.7}
.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:#000000e6}
.modal-content{margin:auto;display:block;width:80%;max-width:700px}
#caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}
.modal-content,#caption{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}
@-webkit-keyframes zoom {
from{-webkit-transform:scale(0)}
to{-webkit-transform:scale(1)}
}
@keyframes zoom {
from{transform:scale(0)}
to{transform:scale(1)}
}
.close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}
.close:hover,.close:focus{color:#bbb;text-decoration:none;cursor:pointer}
@media only screen and (max-width: 700px) {
.modal-content{width:100%}
}
.centered{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
@font-face{font-family:'Myfont-Regular';src:url(/fonts/Myfont-Regular.eot?#iefix) format("embedded-opentype"),url(/fonts/Myfont-Regular.woff2) format("woff2"),url(/fonts/Myfont-Regular.woff) format("woff");font-weight:400;font-style:normal}
h4{font-family:'Myfont-Regular',serif}
h3{font-family:'Myfont-Regular',serif;text-align:center}
a{text-decoration:none;color:#333;margin:0 10px}
h1{font-family:'Myfont-Regular',serif;text-align:center}
h2{font-family:'Myfont-Regular',serif;text-align:center}