body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#333;overflow-x:hidden}a{color:#fff}a:hover{color:#bbb}header{background-color:#333;padding:10px 0;color:#fff;text-align:center;position:sticky;top:0;height:10vh;width:100%;z-index:1000;display:flex;justify-content:space-between;align-items:center}header img{max-width:200px;padding:10px 20px}nav{padding:20px}nav ul{list-style:none;padding:0;margin:0;display:flex}nav ul li{margin:0 15px}.profile-button,nav ul li a{color:#fff;text-decoration:none;font-weight:700;background:0 0;border:none;cursor:pointer}main{padding:20px;position:relative;z-index:1}.profile{display:none;background-color:#333;color:#fff;padding:20px;position:fixed;top:10vh;left:0;width:calc(100% - 40px);height:auto;max-height:calc(100vh - 10vh);overflow-y:auto;z-index:1000;transition:transform 1s ease-out;transform:translateY(-100%)}.profile-img{max-width:250px;border-radius:50%;margin-right:20px;float:left}.profile-text{overflow:hidden}.profile-text h2,.profile-text h3,.profile-text h4,.profile-text p{margin-top:0;margin-bottom:20px}.social-links{display:flex;justify-content:space-between;align-items:center}.social-links p{margin:0}.social-links p a{margin:0 5px}.social-links p a:first-child{margin-left:0}.social-links p a:last-child{margin-right:0}.profile-content{padding-left:15%;padding-right:15%;padding-bottom:10px}.profile.active{display:block;transform:translateY(0)}.close-button{position:absolute;top:10px;right:10px;width:30px;height:30px;padding:5px;cursor:pointer;z-index:1001}footer{background-color:#333;color:#fff;padding:10px 0;position:fixed;bottom:0;width:100%;z-index:1000;left:0;display:flex;justify-content:space-between;align-items:center}.footer-content{display:flex;justify-content:space-between;width:100%;padding:0 20px}.footer-left{margin:0}.footer-right{margin:0;display:flex;gap:15px}.footer-right i{margin-left:10px;cursor:pointer}.grid{display:flex;flex-wrap:wrap;gap:5px}.grid a{width:calc(25% - 5px);box-sizing:border-box}.grid img{width:100%;display:block;border:3px solid #333;margin:0}@media screen and (max-width:600px){nav ul{flex-direction:column}.profile-button,nav ul li a{width:50%;text-align:center;padding:10px 0}.profile-button,nav ul li a{width:100%}.grid a{width:100%}.profile{top:auto;bottom:0;height:65vh;transform:translateY(100%);width:calc(100% - 40px)}.profile-img{max-width:50%;float:none;margin:0 auto 20px;display:block}.profile-text h2,.profile-text h3,.profile-text h4,.profile-text p{text-align:center;margin-left:0;margin-right:0}.social-links{justify-content:center}.profile.active{transform:translateY(0)}.close-button{position:absolute;top:10px;right:10px;width:30px;height:30px;cursor:pointer;z-index:1001}}