:root {
--header-bg: url('https://i.imgur.com/MJlA1HX.jpg');
--accent-color: #ff7a2f;
--link-color: #e86a1a;
--bg-color: #fdf8f0;
--bg-color2: #1c1c1c;
--text-color: #2a1f1f;
--favorite-color: #fff5e9;
--lighter-color: rgba(255, 255, 255, 0.3);
--darker-color: rgba(0, 0, 0, 0.4);
}

/* =========================================================
ESTILOS GENERALES
========================================================= */

* {
  box-sizing: border-box;
  }

::selection {
background: var(--accent-color);
color: var(--bg-color);
}

body {
background-color: var(--bg-color2);
margin: 0;
color: var(--text-color);
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

p {
line-height: 1.5em;
}

a {
color: var(--link-color);
}

a:visited {
color: var(--text-color);
}

a:hover {
background-color: var(--accent-color);
color: var(--text-color);
}

ul {
list-style-type: square;
}

/* =========================================================
CABECERA
========================================================= */

header {
background: var(--header-bg);
background-size: cover;
background-position: center 30%;
background-repeat: no-repeat;
min-height: 250px;
}

header > h1 {
margin: auto;
max-width: 960px;
padding: 50px;
text-align: left;
color: var(--bg-color);
text-shadow: var(--text-color) 3px 3px;
}

/* =========================================================
NAVEGACIÓN
========================================================= */

nav {
background-color: var(--favorite-color);
padding: 1em;
font-weight: bold;
}

nav > ul {
max-width: 960px;
margin: auto;
line-height: 3rem;
display: flex;
flex-wrap: wrap;
flex-direction: row;
list-style-type: none;
padding-left: 0;
justify-content: space-evenly;
}

nav li > a {
background-color: var(--bg-color);
box-shadow: var(--accent-color) 4px 4px;
padding: 0.5em 3em;
text-decoration: none;
}

nav li > a:hover {
box-shadow: var(--text-color) 4px 4px;
}

/* =========================================================
CONTENIDO GENERAL
========================================================= */

#content {
display: flex;
max-width: 960px;
margin: auto;
}

/* =========================================================
SIDEBAR
========================================================= */

#sidebar {
background-color: var(--favorite-color);


border-left: 2em solid var(--text-color);
border-right: 12px solid var(--accent-color);

width: 280px;
min-width: 280px;


}

#avatar {
margin: 0.5em auto;


box-shadow: var(--accent-color) 4px 4px;

max-width: 164px;
max-height: 164px;


}

#avatar img {
display: block;


background: var(--lighter-color);

max-width: 160px;

border: 2px dashed var(--accent-color);


}

#bio {
font-size: smaller;


margin: 1em;

background: var(--lighter-color);

border: 2px dashed var(--accent-color);

box-shadow: var(--accent-color) 4px 4px;


}

#bio p {
margin: 1em;
}

/* =========================================================
LINKS DE REDES
========================================================= */

#sidebar > ul {
margin-top: 1.5em;
margin-bottom: 1.5em;
}

/* =========================================================
PANEL DE MENSAJES
========================================================= */

#guestbook {
display: block;


width: calc(100% - 2em);

margin: 1.5em 1em;
padding: 1.5em 1em;

background-color: var(--bg-color);

border: 2px dashed var(--accent-color);

box-shadow: var(--accent-color) 6px 6px;

text-align: center;


}

/* TÍTULO */

#guestbook h3 {
display: block;


width: 100%;

margin: 0 auto 1em auto;

padding-bottom: 0.5em;

font-size: 1.1em;

text-align: center;


}

/* LÍNEA DECORATIVA */

#guestbook h3::after {
content: "";


display: block;

width: 160px;
max-width: 80%;

margin: 0.5em auto 0 auto;

border-bottom: 2px dashed var(--accent-color);


}

/* TEXTO */

#guestbook .guestbook-text {
display: block;


width: 100%;
max-width: 250px;

margin: 0 auto 1.5em auto;

text-align: center;

font-size: 0.9em;

line-height: 1.6em;


}

/* =========================================================
ATABOOK
========================================================= */

#comments {
display: block;


width: 100%;

margin: 1em 0 0 0;

padding: 0;

overflow: visible;


}

#comments iframe {
display: block;


width: 100%;

height: 1200px;
min-height: 1200px;

margin: 0;
padding: 0;

border: none;

background-color: var(--bg-color);

overflow: visible;


}

/* =========================================================
CONTENIDO PRINCIPAL
========================================================= */

main {
background-color: var(--bg-color);


padding: 2em;

border-right: 1em solid var(--text-color);

flex: 1;

min-width: 0;


}

main > h1,
main > h2,
main > h3 {
border-bottom: 2px dashed var(--accent-color);


text-shadow: var(--favorite-color) 2px 2px;


}

.img-right {
float: right;
}

/* =========================================================
FOOTER
========================================================= */

footer {
background-color: var(--favorite-color);


text-align: center;

font-size: small;

padding: 1em;


}

/* =========================================================
GALERÍA DE FOTOS
========================================================= */

.galeria {
display: grid;


grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 20px;

margin: 20px 0;

justify-items: center;

width: 100%;


}

.foto {
background-color: var(--favorite-color);


border: 2px solid var(--accent-color);

border-radius: 8px;

overflow: hidden;

box-shadow:
    var(--accent-color) 4px 4px 8px
    rgba(0, 0, 0, 0.2);

transition: transform 0.2s ease;

display: flex;

flex-direction: column;

width: 100%;

max-width: 100%;

}

.foto:hover {
transform: scale(1.02);
}

.foto img {
width: 100%;

height: auto;

aspect-ratio: 4 / 3;

object-fit: cover;

display: block;

background-color: var(--bg-color);

}

.foto .pie {
padding: 10px;

margin: 0;

font-size: 0.9em;

text-align: center;

color: var(--text-color);

background-color: var(--bg-color);

flex-grow: 1;

}

/* =========================================================
LIGHTBOX
========================================================= */

.lightbox {
display: none;

position: fixed;

z-index: 9999;

left: 0;
top: 0;

width: 100%;
height: 100%;

background-color: rgba(0, 0, 0, 0.85);

justify-content: center;

align-items: center;

overflow: hidden;

}

.lightbox.visible {
display: flex;
}

.lightbox-imagen {
max-width: 90%;
max-height: 90%;

object-fit: contain;

border-radius: 8px;

box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);

}

.cerrar {
position: absolute;

top: 20px;
right: 35px;

color: #fff;

font-size: 50px;

font-weight: bold;

cursor: pointer;

transition: 0.3s;

user-select: none;

}

.cerrar:hover {
color: var(--accent-color);

transform: scale(1.2);

}

/* =========================================================
MÓVILES
========================================================= */

@media only screen and (max-width: 600px) {
.galeria {
    grid-template-columns: 1fr;

    gap: 15px;
}

.foto img {
    aspect-ratio: 3 / 2;
}

.foto .pie {
    font-size: 0.8em;

    padding: 8px;
}

main {
    border-right: none;

    padding: 1.5em;
}

.cerrar {
    font-size: 35px;

    top: 10px;
    right: 15px;
}

.lightbox-imagen {
    max-width: 95%;

    max-height: 80%;
}

#comments iframe {
    height: 1200px;

    min-height: 1200px;
}


/* =========================================================
TABLETS
========================================================= */

@media only screen and (min-width: 601px) and (max-width: 900px) {

.galeria {
    grid-template-columns: repeat(2, 1fr);
}

/* =========================================================
LAYOUT RESPONSIVE
========================================================= */

@media only screen and (max-width: 800px) {
#content {
    flex-wrap: wrap;
}

#sidebar {
    width: 100%;

    min-width: 0;

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    align-items: center;

    border: none;
}

#avatar {
    margin: 0 1em;
}

#bio {
    width: 50%;
}

#sidebar > ul {
    margin: 0 1em;

    display: flex;

    flex-wrap: wrap;

    line-height: 2em;
}

#sidebar li {
    padding-left: 0;

    margin: 0.3em 1em;
}


/* Guestbook ocupa toda la fila */

#guestbook {
    width: calc(100% - 2em);

    margin: 1em;

    padding: 1.5em 1em;

    order: 10;
}

#comments {
    width: 100%;
}

#comments iframe {
    width: 100%;

    height: 1200px;

    min-height: 1200px;
}

.img-right {
    float: none;

    text-align: center;
}


/* =========================================================
PANTALLAS GRANDES
========================================================= */

@media only screen and (min-width: 1200px) {

.galeria {
    grid-template-columns: repeat(4, 1fr);
}

}