body{color:#f1f1f1;background-color:#222;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:90vh}body dialog{opacity:0;pointer-events:none;transition:opacity 0.6s ease, transform 9.6s ease;animation:dialogClose 0.6s forwards}body dialog[open]{pointer-events:auto;animation:dialogOpen 0.9s forwards}body #modalAbout,body #modalContact,body #modalInfo{position:absolute;left:0;top:10px;z-index:1;background-color:#222;color:#bebdbd;border-radius:8px;border:2px solid #5e5e5e;width:300px}body #modalAbout form,body #modalContact form,body #modalInfo form{padding-top:10px;border-top:1px solid #363636}body #modalAbout button,body #modalContact button,body #modalInfo button{background-color:#363636;padding:3px 20px;border-radius:4px;border:1px solid #363636;color:#bebdbd;outline:none;cursor:pointer;float:right;transition:all 0.4s ease-in-out}body #modalAbout button:hover,body #modalContact button:hover,body #modalInfo button:hover{background-color:#5e5e5e}body #modalContact i{margin-right:10px}body #modalContact h3{border-bottom:1px solid #363636;padding-bottom:5px}body #modalContact a{color:#bebdbd;text-decoration:none;outline:none;transition:all 0.4s ease-in-out}body #modalContact a:hover{color:#5e5e5e}body #modalInfo a{color:#bebdbd;outline:none;text-decoration:underline}body #modalInfo a:hover{color:#5e5e5e}body #modalInfo .copyright{padding-top:20px}body a{color:#676767;text-decoration:none}body a:hover{color:#f1f1f1}body .btn{text-transform:capitalize;margin-top:20px}body h1,body h2{font-size:38px;letter-spacing:2px;font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;text-shadow:0px 0px 20px #bebdbd}body h4{letter-spacing:3px;font-size:18px;text-align:center;text-transform:capitalize}body .contact{letter-spacing:2px;font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;color:#676767;border-bottom:1px solid #363636;padding-bottom:10px;cursor:pointer}body .social{margin-top:20px}body .social a i{margin-right:10px}body .social a{color:#676767;transition:all 0.5s ease-in-out}body .social a:hover{color:#f1f1f1}body img{width:200px;height:200px;border-radius:100%;border:6px solid #363636;box-shadow:1px 1px 30px #5e5e5e}body img:hover{filter:grayscale(100%);cursor:pointer}body .footer{margin-top:20px;font-size:14px;color:#676767;padding-top:15px;border-top:1px solid #363636;text-align:center}body .footer .copy_footer{display:inline-block;margin-top:10px}body .footer span{cursor:pointer;transition:color 0.4s ease-in-out}body .footer span:hover{color:#bebdbd}body .footer a{color:#676767;text-decoration:none;transition:all 0.6s ease-in-out}body .footer a:hover{color:#f1f1f1;text-decoration:underline}body .abc{font-size:12px;color:#363636;position:absolute;bottom:10px;right:10px}@media (max-width: 500px){body{padding:20px;margin-top:40px;justify-content:flex-start}h1,h4{text-align:center}}@keyframes dialogOpen{from{transform:translateY(-200px);opacity:0}to{transform:translateY(10px);opacity:1}}@keyframes dialogClose{from{transform:translateY(10px);opacity:1}to{transform:translateY(-200px);opacity:0}}.img_blog{width:600px;height:342px;border-radius:8px}