/* Global styles */

* {
    box-sizing: border-box;
}

body {
    background-color: #0D0F14;
    color: #E6E6E6;
    font-family: "Inter", sans-serif;
}

img {
    width: 100%;
    max-width: 340px;
    height: auto;
    display: block;
    margin: 0 auto;
    border: 2px solid #AEB4BF;
}

p {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    color: #AEB4BF;
}

/* Paragraph spacing */

.intro-text span,
.support-text span {
    display: block;
    margin-bottom: 7px;
}

/* Main heading */

h1 {
    text-align: center;
    color: #FF4FD8;
    font-family: "Space Grotesk", sans-serif;
    margin: 24px 0 16px;
}

hr {
    border: none;
    border-top: 2px solid #FF4FD8;
    max-width: 215px;
    margin: 40px auto;
}

/* Section layout */

section {
    margin: 48px auto;
    padding: 0 20px;
    max-width: 700px;
}

/* Section headings and their colors */

section h2,
section h3 {
    text-align: center;
    font-family: "Space Grotesk", sans-serif;
    color: #E6E6E6;
}

section h2 {
    margin: 0 0 16px;
}

.contact h2 {
    color: #00E5FF;
}

.projects h2 {
    color: #7CFFB2;
}

.support h2 {
    color: #FFB86B;
}

/* Contact list */

section ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 24px 0 0;
}

section li {
    padding: 10px 16px;
    background-color: #151922;
    border: 1px solid #2B303B;
    border-radius: 8px;
}

/* Shared links and hover effects */

section a {
    color: #00E5FF;
    text-decoration: none;
    font-weight: 500;
}

section a:hover,
section a:focus-visible {
    color: #FF4FD8;
}

section a:focus-visible {
    outline: 2px solid #FF4FD8;
    outline-offset: 4px;
}

/* Project cards */

.project-card {
    background-color: #151922;
    border: 1px solid #2B303B;
    border-radius: 8px;
    padding: 20px;
    margin-top: 24px;
}

.project-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
    color: #7CFFB2;
}

.project-card p {
    margin-bottom: 20px;
    line-height: 1.6;
}

.project-card a {
    display: block;
    width: fit-content;
    margin: 0 auto;
    padding: 8px 12px;
    border: 1px solid #7CFFB2;
    border-radius: 6px;
    transition: background-color 0.2s, color 0.2s;
    color: #7CFFB2;
}

.project-card a:hover,
.project-card a:focus-visible {
    background-color: #7CFFB2;
    color: #0D0F14;
}

.project-card a:focus-visible {
    outline: 2px solid #7CFFB2;
    outline-offset: 4px;
}

/* Support cards */

.support-card {
    background-color: #151922;
    border: 1px solid #2B303B;
    border-radius: 8px;
    padding: 20px;
    margin-top: 24px;
}

.support-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
}

.support-card p {
    line-height: 1.6;
    overflow-wrap: anywhere;
    font-family: monospace;
    font-size: 14px;
}

.bitcoin-card,
.monero-card {
    border-top: 2px solid #FFB86B;
}