@font-face {
     font-family: 'Space Mono';
     font-style: normal;
     font-weight: 400;
     src: url('https://fonts.gstatic.com/s/spacemono/v15/i7dPIFZifjKcF5UAWdDRYEF8RQ.woff2') format('woff2');
     unicode-range: U+0000-00FF;
}
 * {
     box-sizing: border-box;
}
 html {
     scroll-behavior: smooth;
}
 body {
     margin: 0;
     background: #fefefe;
     font-family: 'Space Mono', monospace;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     padding: 40px 10px;
}
 .card {
     width: 340px;
     border: 4px solid #000;
     box-shadow: 10px 10px 0 #000;
     background: #fff;
}
 .upper-container {
     height: 140px;
     background: #615807;
     border-bottom: 4px solid #000;
     display: flex;
     justify-content: center;
     align-items: flex-end;
}
 .image-container {
     width: 100px;
     height: 100px;
     background: #fff;
     border: 4px solid #000;
     transform: translateY(50%);
     display: flex;
     justify-content: center;
     align-items: center;
}
 .image-container img {
     width: 90px;
     height: 90px;
     object-fit: cover;
     border: 2px solid #000;
}
 .lower-container {
     padding: 60px 20px 20px;
     text-align: center;
}
 .lower-container h3 {
     margin: 0;
     font-size: 20px;
     font-weight: bold;
}
 .lower-container h4 {
     margin: 5px 0 15px;
     font-size: 14px;
     font-weight: normal;
     color: #333;
}
 .lower-container p {
     font-size: 14px;
     color: #000;
     border: 2px dashed #000;
     padding: 10px;
     background: #f0f0f0;
     margin-bottom: 20px;
}
 .btn {
     display: inline-block;
     padding: 10px 20px;
     background: #ff006e;
     color: #fff;
     text-decoration: none;
     font-weight: bold;
     border: 3px solid #000;
     box-shadow: 4px 4px 0 #000;
     transition: all 0.2s ease;
     cursor: pointer;
}
 .btn:hover {
     background: #fff;
     color: #ff006e;
     border-color: #ff006e;
     box-shadow: none;
}
 .socials {
     margin-top: 15px;
     display: flex;
     justify-content: center;
     gap: 15px;
}
 .socials a {
     text-decoration: none;
     color: #000;
     font-size: 18px;
     border: 2px solid #000;
     padding: 8px;
     border-radius: 50%;
     background: #fff;
     transition: 0.2s ease;
     box-shadow: 3px 3px 0 #000;
}
 .socials a:hover {
     background: #000;
     color: #fff;
}
 .api-section {
     margin: 20px;
     max-height: 200px;
     overflow-y: auto;
     border: 3px dashed #000;
     padding: 15px;
     background: #fff8dc;
     box-shadow: 6px 6px 0 #000;
}
 .api-endpoint {
     display: block;
     font-size: 13px;
     font-weight: bold;
     background: #ffe;
     padding: 6px 10px;
     margin-bottom: 8px;
     border-left: 4px solid #000;
     box-shadow: 2px 2px 0 #000;
     text-decoration: none;
     color: #000;
}