/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


	
:root {

    /* QUICK CUSTOMIZATION ZONE */

    --pagewidth: 70vw;
    --pageheight: 80vh;
    --sidebarwidth: 150px;

    --outerborder: 2px dotted;
    --innerborder: 4px solid;
    --border-radius: 10px;
    --border-radius-2: calc(var(--sidebarwidth) / 2);

    /* PALETA ROSA + VERDE */

    --text-color: #2F4733;      /* Verde oscuro */
    --bg-1:#EBF7F0;            /* Verde Menta */
    --bg-2: #F6FFF7;            /* Verde muy claro */
    --accent-1:#F8C8DC;        /* Rosa pastel */
    --accent-2: #BADD7F;        /* Verde salvia claro */
    --accent-3: #D96C9A;        /* Rosa intenso */
    --border-color: #B7D3B1;    /* Verde salvia */

    --headingfont: "Georgia";
  --bodyfont: "Verdana";

}

html,
body {
    margin: 0;
    padding: 0;
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
    scrollbar-color: var(--accent-1) var(--accent-2);
    scrollbar-width: thin;
    max-width: 100%;
}

body {
    font-family: var(--bodyfont), serif;
    color: var(--text-color);
    background: linear-gradient(var(--bg-2) 50%, var(--bg-1) 50%), var(--bg-1);
    background-size: 6px 6px;
}

.container {
    display: grid;
    grid-template-areas:
        "head ."
        "main icon"
        "main nav"
        "foot .";
    width: var(--pagewidth);
    height: var(--pageheight);
    margin: calc((100vh - var(--pageheight)) / 2) auto;
    max-width: calc(70rem + var(--sidebarwidth));
    grid-template-columns: auto var(--sidebarwidth);
    grid-template-rows: min-content var(--sidebarwidth) auto min-content;
    gap: 2px;
}

header {
    grid-area: head;
    background: var(--accent-1);
    outline: var(--outerborder) var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    font-family: var(--headingfont), sans-serif;
    font-size: 125%;
    text-align: center;
    align-content: center;
    justify-content: center;
    overflow: hidden;
    font-weight: bold;
    letter-spacing: 1px;
}

header span {
    display: block;
    padding: 5px;
}

.container>figure {
    grid-area: icon;
    margin: 0;
    padding: 0;
}

.container>figure img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 0 var(--border-radius-2) 0 0;
    border: var(--innerborder) var(--accent-2);
    outline: var(--outerborder) var(--border-color);
}

nav {
    grid-area: nav;
    overflow: auto;
    border: var(--innerborder) var(--accent-2);
    outline: var(--outerborder) var(--border-color);
    border-radius: 0 0 var(--border-radius-2) 0;
    background: var(--bg-1);
    align-self: start;
    max-height: 100%;
    line-height: 1;
    scrollbar-width: none;
}

nav p {
    font-family: var(--headingfont), sans-serif;
    font-weight: bold;
    margin: 0;
    padding: 5px 8px;
    background: var(--accent-1);
    border-bottom: var(--innerborder) var(--accent-2);
}

nav p:not(:first-child) {
    border-top: var(--innerborder) var(--accent-2);
}

nav ul {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li:not(:first-child) {
    border-top: var(--innerborder) var(--accent-2);
}

nav a {
    display: block;
    padding: 5px 8px;
    text-decoration: none;
}

nav a:hover {
    background: var(--bg-2);
}

main {
    grid-area: main;
    background: var(--bg-1);
    border: var(--innerborder) var(--accent-2);
    outline: var(--outerborder) var(--border-color);
    overflow-y: auto;
}

footer {
    grid-area: foot;
    background: var(--accent-1);
    outline: var(--outerborder) var(--border-color);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

footer p {
    margin: 4px;
    font-size: 80%;
    text-align: center;
}

footer a {
    color: inherit;
}

h1,
h2,
h3,
h4 {
    font-family: var(--headingfont), sans-serif;
    outline: 2px solid var(--bg-2);
    padding: 0.5rem 1rem;
    margin: 0;
    line-height: 1;
}

h1,
h3 {
    background: var(--accent-2);
    color: var(--accent-3);
}

h2,
h4 {
    background: var(--accent-1);
}

h2,
h3,
h4 {
    margin: 1rem 0;
}

a {
    color: var(--accent-3);
    text-decoration-color: var(--border-color);
    text-decoration-style: dotted;
}

a:hover {
    color: var(--border-color);
}

main a:hover {
    box-shadow: inset 0 -5px var(--bg-2);
}

p,
ul,
ol,
dl,
details,
table,
pre code,
blockquote {
    margin: 1rem;
}

p,
li,
dd,
dt,
cite,
code {
    line-height: 1.4;
}

ul,
ol {
    padding-left: 1rem;
}

table {
    border: 2px solid var(--bg-2);
    max-width: 100%;
}

th {
    color: var(--text-color);
    background: var(--accent-1);
    border: 2px solid var(--border-color);
}

td {
    background: var(--accent-2);
}

code {
    display: inline-block;
    border-radius: var(--border-radius);
    padding: 2px 5px;
    background: var(--bg-2);
}

blockquote {
    border-left: var(--innerborder) var(--accent-1);
    border-radius: var(--border-radius);
    padding: 0.25rem 0.5rem;
}

details {
    border: var(--outerborder) var(--border-color);
    border-radius: var(--border-radius);
}

summary {
    padding: 0.5rem;
    cursor: pointer;
}

summary:hover {
    background: var(--bg-2);
}

@media (max-width: 700px) {

    .container {
        grid-template-areas:
            "head icon"
            "nav nav"
            "main main"
            "foot foot";

        width: calc(100% - 20px);
        height: auto;
        margin: 10px;
        grid-template-columns: auto var(--sidebarwidth);
        grid-template-rows: var(--sidebarwidth) var(--sidebarwidth) auto min-content;
    }

    nav {
        border-radius: 0;
    }

    header {
        border-radius: var(--border-radius) 0 0 0;
    }

    .container>figure img {
        border-radius: 0 var(--border-radius) 0 0;
    }

    :root {
        --sidebarwidth: 125px;
    }

}