@font-face {
    font-family: "Pixelify Sans";
    src: url("recursos/PixelifySans-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 700;
    font-style: normal;
}

body {
    background: #080808;
    color: #ffffff;
    font-family: "Pixelify Sans", sans-serif;
    cursor: url("recursos/cursor.png") 0 0, auto;
}

a {
    cursor: url(recursos/cursor-selección.png) 0 0, pointer;
}

header {
    padding: 0px;
}

header img {
    display: block;
    width: min(588px, 100%);
    height: auto;
    margin: auto;
    image-rendering: pixelated;
    margin-left: auto;
    margin-right: auto;
}

footer {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
    margin-top: 75px;
}

.proyecto {
    display: flex;
    margin: 32px;
    padding: 16px;
    border: 2px solid #500000;
    background: #0d0d0d;
    font-family: "Pixelify Sans", sans-serif;
    font-weight: 400;
}

.proyecto h1 {
    margin-top: 0;
    font-size: 18px;
    font-family: "Pixelify Sans", sans-serif;
    font-weight: 600;
}

.proyecto h1 a {
    color: #ff0000;
    text-decoration: none;
}

.proyecto h1 a:hover {
    color: #ff0000;
    text-decoration: underline;
}

.proyecto-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-right: 20px;
    image-rendering: pixelated;
}

.proyecto-info {
    flex: 1;
}

#death-penalty-sección {
    margin-left: 8%;
    width: 55%;
    box-sizing: border-box;
    min-height: 120px;
    border: 2px solid #571c27;
}

.death-penalty {
    cursor: url("recursos/cursor-pdm.png") 0 0, auto;
}

.death-penalty h1 a {
    color: #c42430;
    text-decoration: none;
}

.death-penalty h1 a:hover {
    color: #ea323c;
    text-decoration: underline;
}

#creador-outfits-sección {
    margin-left: 40%;
    width: 45%;
    box-sizing: border-box;
    min-height: 120px;
    border: 2px solid #701259;
}

.creador-outfits {
    cursor: url("recursos/cursor-cdo.png") 0 0, auto;
}

.creador-outfits h1 a {
    color: #9d3383;
    text-decoration: none;
}

.creador-outfits h1 a:hover {
    color: #f486d8;
    text-decoration: underline;
}

#utils-sección {
    margin-left: 30%;
    width: 30%;
    box-sizing: border-box;
    min-height: 120px;
    border: 2px solid #263238;
}

.utils {
    cursor: url("recursos/cursor-uts.png") 0 0, auto;
}

.utils h1 a {
    color: #546e7a;
    text-decoration: none;
}

.utils h1 a:hover {
    color: #78909c;
    text-decoration: underline;
}

#enlaces {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}