body{--c-blue: #1f449c;--c-grey: #a8b6cc;--c-red: #f05039;--c-lightRed: #f19c93;--c-black: #1c1c1c;--c-bg: #d9d9d9;font-family:IBM Plex Mono,monospace;color:var(--c-blue);background-color:var(--c-bg)}a{text-decoration:none;color:var(--c-blue);font-weight:500}p{margin:0;font-weight:450}h1{margin:0;font-weight:600}h2{margin:0;font-weight:500}h3{margin:0;font-weight:450}dialog{color:var(--c-blue);background-color:transparent}.project-card{transition:all .5s;display:flex;flex-direction:column;align-items:center;width:250px;height:150px;overflow:hidden;border-top:2px solid var(--c-black);border-left:2px solid var(--c-black);border-bottom:5px solid var(--c-black);border-right:5px solid var(--c-black)}.project-card:hover{transition:all .5s;box-shadow:6px 3px 3px #00000080;transform:translate(-3px,-3px)}.close-btn{margin-left:auto;height:20px;width:20px;border-radius:50%;background-color:color-mix(in srgb,var(--c-lightRed),var(--c-red) 20%);border:none;transform:translateY(-40%)}.btn-text{visibility:hidden}.close-btn:hover .btn-text{visibility:visible}.modal{position:absolute;top:10%;left:15%;width:70%;padding:0;margin:0;border:4px solid var(--c-black);background-color:var(--c-bg);overflow:hidden}.title{position:relative;left:50%}@media screen and (max-width: 400px){.title{left:5%}.modal{max-height:80%;width:90%;left:5%}}.project-content{height:100%;width:100%;display:grid;grid-template-columns:1fr 2fr;gap:10px}.project-img{width:300px}@media screen and (max-width: 400px){.project-content{display:flex;flex-direction:column}.project-img{width:64px}}