@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
* {padding: 0;margin: 0;box-sizing: border-box;}
body {background-color: #0f131e;font-family: 'Roboto', sans-serif;}
.p-img {max-width: 100px;border-radius: 50%;width: 100px;height: 100px;object-fit: cover;}
.p-title {font-size: 18px;font-weight: bold;color: white;margin-bottom: 10px;margin-top: 10px;display: block;}
.p-description {font-size: 14px;color: #ffffff94;margin-bottom: 10px;margin-top: 10px;display: block;}
.p-button {font-size: 14px;background: #00bcd4;padding: 10px 20px;border: 0;border-radius: 25px;color: white;margin-top: 10px;cursor: pointer;display: inline-block;}
.p-button:hover {color: black !important;text-decoration: none;}
.item-area {text-align: center;padding: 40px 20px;display: flex;flex-direction: column;align-items: center;transition: all 0.5s;}
.title {color: white;text-align: center;font-weight: bold;}
.alt-title {margin-bottom: 15px;color: white;display: flex;align-items: center;font-weight: bold}
.item {border-radius: 5px;display:flex;justify-content: center;align-items: center;margin-bottom: 30px;position: relative;transition: background-color .5s ease;height: 100%;    background: #2d323e70;border: 1px solid #ffffff0a;}
.item:hover{background: white;}
.item:hover .p-title{color: black;}
.item:hover .p-description{color: black;}
.item:hover .github{background: #1f1d1c;}
.github {position: absolute;right: 10px;top: 10px;padding: 2px;border-radius: 50%;}
.github img {width: 30px;}
.name {color: white;}
.name h1{font-size: 30px;margin: 0;font-weight: bold;margin-left: 20px;}
.name:hover {color: white;text-decoration: none;}
.header {padding-top: 30px;padding-bottom: 30px;}
.social {width: 20px;margin-left: 15px;}
.footer{padding-top: 30px;padding-bottom: 30px;}
.p-icon { width: 80px;height: 80px;background: #0f131e;border-radius: 50%;text-align: center;font-size: 40px;font-weight: bold;display: flex;justify-content: center;align-items: center;color: white;border: 1px solid #252934}
@media screen and (max-width:500px){.p-img{max-width: 100px;border-radius: 50%;width: 60px;height: 60px;object-fit: cover;}.name h1{font-size: 22px;margin-left: 10px;text-align: center;}.social{width: 20px;margin-left: 5px;}  }