@font-face {
    font-family: "MS Gothic";
    src: url("/fonts/MS Gothic.ttf") format("truetype");
    font-display: swap;
}

body {
    background: #222;
    color: #e8ebf0;
    font-family: "MS Gothic", Verdana, sans-serif;
    font-size: 13.5px;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url("/images/wallpaper.gif") center / cover no-repeat;
    z-index: -1;
}

a {
    color: #33c1ff;
}

a:hover {
    color: #95dfff;
}


/* about me */
.layout {
    display: flex;
    gap: 25px;
    padding: 25px;
    align-items: flex-start;
}

.sidebar-group {
    width: 350px;
    flex-shrink: 0;
    position: sticky;
    top: 25px;
}


.about-me-summary,
.profile-pic-box,
.social-media-box,
.down-box,
.box {
    background: #2a3140;
    /* azul-gris oscuro pastel */
    border: 1px solid #56627a;
    border-radius: 5px;
    box-shadow: 2px 2px #161a23;
    /* sombra dura estilo "ventana" */
}

/* Evita que las imágenes se desborden de las cajas */
.about-me-summary img,
.profile-pic-box img:not(.icon),
.social-media-box img,
.down-box img,
.box img {
    max-width: 100%;
    height: auto;
}


/* ---- Barra de título ---- */
.title-bar {
    background: #5a6b8c;
    /* azul-gris pastel claro */
    color: #f2f5fa;
    font-weight: bold;
    padding: 4px 6px;
    border-radius: 5px 5px 0 0;
    /* redondea para casar con la caja */
}

.right {
    float: right;
    margin-right: 5px;
    font-family: "Arial", sans-serif;
    line-height: 12px;
}

/* ---- Contenido interno ---- */
.inner {
    padding: 10px;
    padding-top: 6px;
}


/* ---- Welcome a la izquierda, columna (Profile + Social) a la derecha ---- */
.about-me-summary {
    display: inline-block;
    vertical-align: top;
    width: 160px;
}

.about-me-boxes {
    display: inline-block;
    vertical-align: top;
    width: 165px;
    margin-left: 8px;
}

/* Profile y Social apiladas en columna dentro de su contenedor */
.profile-pic-box,
.social-media-box {
    display: block;
    width: 100%;
}

.profile-pic-box {
    margin-bottom: 15px;
}

/* La caja inferior (Katamari) baja como bloque, a todo el ancho */
.down-box {
    margin-top: 25px;
}


/* ---- Imagen de perfil circular ---- */
.icon {
    display: block;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: #56627a solid 2px;
    border-radius: 50%;
}


/* ---- Links de Social Media ---- */
.social-media-links li {
    padding-left: 0;
    margin: 5px 5px 5px 0;
}


/* ---- Stamps ---- */
.stamps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 4px;
    margin: 8px 0;
}


/* ---- Widget de LastFM ---- */
.lastfm-widget iframe {
    display: block;
    width: 100%;
    height: 55px;
    border: 0;
}


/* ---- Caja principal de contenido (Projects) ---- */
.box {
    width: 455px;
}

.project {
    margin-bottom: 14px;
}


.big-quote {
    font-size: 32px;
    color: white;
    letter-spacing: 6px;
    word-spacing: 2px;
    font-family: "Garamond", "Bookman", serif;
    position: fixed;
    margin-left: 1050px;
    margin-top: 300px;
    top: 0;
    width: 300px;
}

wide {
    letter-spacing: 16px;
}

midwide {
    letter-spacing: 3px;
}

.wiki-link {
    font-size:13px;
    text-decoration: none;
    border-bottom: 1px solid #a2a9b1;
}

.wiki-link:hover {
    text-decoration: underline;
    color: #447ff5;
}