*{box-sizing:border-box;margin:0;padding:0;list-style:none}:root{--white-color: #ffffff88;--wheat-color: wheat;--black-color: black;--gray-color: gray;--green-color: #0891b2;--purple-color: #8b5cf6;--dark-gray: #222;--darker-gray: #333;--light-green: #06b6d4;--shadow-color: rgba(0, 0, 0, .5);--facebook-color: #1877f2;--instagram-color: #e4405f;--telegram-color: #2ca5e0;--github-color: #333;--icon-color: #6366f1;--left-bg-color: #000000;--right-bg-color: #333}html.light{--white-color: white;--wheat-color: wheat;--black-color: #999;--gray-color: #8a8787;--green-color: #0891b2;--purple-color: #7c3aed;--dark-gray: #e0e0e0;--darker-gray: #666;--light-green: #06b6d4;--shadow-color: rgba(0, 0, 0, .15);--facebook-color: #1877f2;--instagram-color: #e4405f;--telegram-color: #2ca5e0;--github-color: #333;--icon-color: #fffb0c;--left-bg-color: #444;--right-bg-color: #666}body{font-family:cursive,sans-serif;background-color:var(--darker-gray);margin:0;padding:0}section.container{display:flex;margin:7.5vh auto;border:1px solid var(--darker-gray);border-radius:10px;overflow:hidden;box-shadow:0 0 30px var(--shadow-color)}span{display:flex;justify-content:center;align-items:center;text-align:center;top:0;right:0;font-size:1.8em;color:var(--white-color);margin:10px;width:40px;height:40px;border-radius:50%;cursor:pointer;background-color:var(--darker-gray);transition:all .5s;-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;border:1px solid var(--white-color)}span:active{rotate:180deg}span:hover{border:1px solid var(--icon-color);color:var(--icon-color)}@media (min-width: 921px){section.container{width:90%;max-width:1200px;height:85vh}span{position:absolute}}@media (max-width: 920px){section.container{width:100%;height:100vh;flex-direction:column;justify-content:center;align-items:center;background-color:var(--left-bg-color);margin:0;border-radius:0;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;box-shadow:none;overflow-y:auto}span{display:flex;position:absolute;top:0;right:0;margin:10px;width:30px;height:30px;font-size:1.5rem;border-radius:50%}#loading-image{max-width:500px;max-height:500px}}@media (max-width: 500px){#loading-image{max-width:300px;max-height:300px}}div.left{display:flex;justify-content:center;align-items:center;text-align:center;flex-direction:column;height:100%;width:40%;color:var(--wheat-color);background-color:var(--left-bg-color);padding:30px 20px;box-shadow:0 0 30px var(--shadow-color);border-radius:10px 0 0 10px;border-right:1px solid rgba(128,128,128,.589);-webkit-border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;-ms-border-radius:10px 0 0 10px;-o-border-radius:10px 0 0 10px}div.left .profile-image{margin-bottom:20px}div.left .profile-image img{width:160px;height:160px;border:1px solid var(--wheat-color);border-radius:50%;object-fit:cover;box-shadow:0 0 15px var(--light-green)}div.left .about{display:flex;flex-direction:column;justify-content:center;gap:15px;width:100%}div.left .about h1{font-size:2rem;margin:0;letter-spacing:1px;font-style:italic}div.left .about .title{font-size:1.2rem;color:var(--light-green);margin:0}div.left .about a.email{color:var(--white-color);text-decoration:none;font-size:1rem;transition:color .5s ease}div.left .about a.email:hover{color:var(--light-green);text-decoration:underline}div.left .social-links{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:20px;margin-top:10px}div.left .social-links a{display:inline-block;transition:transform .5s ease;text-decoration:none;-webkit-transition:transform .5s ease;-moz-transition:transform .5s ease;-ms-transition:transform .5s ease;-o-transition:transform .5s ease}div.left .social-links a:hover{transform:translateY(-3px)}div.left .social-links i{font-size:1.7rem;color:var(--gray-color);cursor:pointer;transition:color .5s ease;-webkit-transition:color .5s ease;-moz-transition:color .5s ease;-ms-transition:color .5s ease;-o-transition:color .5s ease}div.left .social-links a:hover i.icon-facebook{color:var(--facebook-color)}div.left .social-links a:hover i.icon-instagram{color:var(--instagram-color)}div.left .social-links a:hover i.icon-telegram{color:var(--telegram-color)}div.left .social-links a:hover i.icon-github{color:var(--github-color)}@media (max-width: 920px){div.left{height:100%;width:100%;flex-direction:column;justify-content:center;align-items:center;margin-top:160px;box-shadow:none}div.left .profile-image img{width:200px;height:200px}div.left .social-links i{font-size:2rem}div.left .about .title{font-size:1.8rem}div.left .about a.email{font-size:1.6rem}}div.right{display:flex;justify-content:center;align-items:center;height:100%;width:60%;color:var(--white-color);background-color:var(--right-bg-color);padding:30px;border-radius:0 10px 10px 0}div.right::-webkit-scrollbar{width:8px}div.right::-webkit-scrollbar-track{background:var(--black-color)}div.right::-webkit-scrollbar-thumb{background:var(--purple-color);border-radius:4px}div.right::-webkit-scrollbar-thumb:hover{background:#f0f}div.right ul{display:flex;flex-direction:column;list-style-type:none;padding:0;gap:40px;text-align:center;justify-content:center;align-items:center}div.right ul li{display:flex;border:1px solid var(--green-color);border-radius:5px;width:250%;height:60px;text-align:center;justify-content:center;align-items:center;padding:auto;cursor:pointer;transition:all 1s ease;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-ms-transition:all 1s ease;-o-transition:all 1s ease}div.right ul li:hover{background-color:var(--green-color)}div.right ul li:hover{color:var(--black-color)}div.right ul li{text-decoration:none;color:var(--green-color);font-size:1.9rem;text-transform:uppercase}@media (max-width: 1280px){div.right ul li{width:220%}}@media (max-width: 1050px){div.right ul li{width:200%}}@media (max-width: 920px){div.right{width:100%;height:100%;background-color:var(--left-bg-color);box-shadow:none}}@media (max-width: 853px){div.right ul li{width:240%}}@media (max-width: 600px){div.right ul li{width:200%}}@media (max-width: 500px){div.right ul li{width:150%}}@media (max-width: 350px){div.right ul li{width:130%}}