/*COLORS*/

:root{
    --header-background: #ced4da;
    --art-1-background: #ffec99;
    --art-2-background: #d0bfff;

    --cl-text: #1b1f46;
    --cl-base:#fff4e6;

    --cl-blue: #a5d8ff;
    --cl-yellow: #ffec99;
    --cl-purple: #d0bfff;
    --cl-white: #f0f0f0;
}

@media(prefers-color-scheme: dark){
    :root{
    
    }
}

/*FONTS*/

@font-face {
    font-family: Fredoka;
    src: url(fonts/Fredoka-VariableFont_wdth\,wght.ttf);
}

/*ESTRUCTURA GENERAL*/

*{
    font-family: Fredoka;
    color: var(--cl-text)
}

html, body{
    max-width: 1000px;
}

html{
    margin: 5% auto;
background-image: url(https://cs.gettysburg.edu/~duncjo01/assets/images/patterns/135.png);

/*https://cs.gettysburg.edu/~duncjo01/assets/images/patterns/34.png*/
/*https://cs.gettysburg.edu/~duncjo01/assets/images/patterns/206.png*/
/*https://cs.gettysburg.edu/~duncjo01/assets/images/patterns/98.png*/
/*https://cs.gettysburg.edu/~duncjo01/assets/images/patterns/135.png*/
/*https://cs.gettysburg.edu/~duncjo01/assets/images/patterns/243.png*/
/*https://cs.gettysburg.edu/~duncjo01/assets/images/patterns/98.png*/
/*https://cs.gettysburg.edu/~duncjo01/assets/images/patterns/406.png*/
/**/
    background-color: var(--cl-white);
}

body{
    all: unset;
    svg{
        color: var(--cl-text);
        fill: var(--cl-text);
    }
}

header, main, footer{
    margin: 0 5%;
    position: relative;

    background-color: var(--cl-base);
}

/*HEADER*/

header{
    display: grid;
    grid-template-columns: 50% 50%;
    max-width: 1000px;

    border: 2px solid var(--cl-text);
    padding: 0.5em;

    background: var(--header-background);

    h1{line-height: 0;}

    svg{
        height: 2.5em;
        width: auto;
    }
    div{
        display: flex;
        align-items: center;
        gap: 1em;
        
    }
    .header-right{
            justify-content: flex-end;
        }
}

/*PARTE PRINCIPAL*/

main{
    display: grid;
    grid-template-columns: 30% 70%;
    border-left: 2px solid var(--cl-text);
    border-right: 2px solid var(--cl-text);

    aside{
        border-right: 2px solid var(--cl-text);

        nav{
            margin: 1em;
            div{
                margin: 0.5em 0;
                border: 2px solid var(--cl-text);
                text-align: center;
                background: var(--cl-purple);
            }
        }
        article{
            border: 2px solid var(--cl-text);
            background: var(--cl-white);
            margin: 1em;
            

            .art-as-1{
                height: 10em;
                border: 2px solid var(--cl-text);
                margin: 0.75em;
                background: var(--cl-blue);
            }
            .art-as-2{
                height: auto;
                border: 2px solid var(--cl-text);
                margin: 0.75em;
                background: var(--cl-yellow);
                text-align: center;
            }
        }
    }


    article{
        margin: 1em 2em;
    }

    .art-1{ /*sección 1 --> título*/
        border: 2px solid var(--cl-text);
        text-align: center;

        background: var(--art-1-background);

    }

    .art-2{ /*sección 2 --> Texto y foto de perfil*/
        display: grid;
        grid-template-columns: 40% 60%;
        padding: 0;
        gap: 0.5em;

        border: 2px solid var(--cl-text);
        background: var(--art-2-background);

        .photo{
            position: relative;
            top: 1em;
            right: 1.25em;
            border: 2px solid var(--cl-text);
            background: var(--cl-white);

            box-shadow: 0.5em 0.5em 0 0 var(--cl-text);
            
            width: 100%;
            height: 170px; /*en realidad es auto pero esto es en referencia de momento*/
        }
        .art-2-2{
            padding: 0.5em;
            display: grid;
            grid-template-rows: auto;

            .art-2-2-2{
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap:1em;
                margin: 0 1em 0 0;
                button{
                    all: unset;
                    border: 2px solid var(--cl-text);
                    height: 2em; /*altura relativa, puede cambiar*/
                }
                .button-1{background: var(--cl-blue);}
                .button-2{background: var(--cl-yellow);}
            }
        }

    }

    .art-3{ /*sección 3 --> trio de secciones*/
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5em;
        margin-top: 2em;

        div{
            border: 2px solid var(--cl-text);
            padding: 0.5em;
            height: 9em; /*medición relativa solo para ver*/
        }

        .art-3-1{background: var(--cl-yellow);}
        .art-3-2{background: var(--cl-purple);}
        .art-3-3{background: var(--cl-blue);}
    }

    
    .art-4{ /*sección 4 --> dos secciones*/
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        
        div{
            border: 2px solid var(--cl-text);
            padding: 0.5em;
            height: 9em;

            width: 100%;
        }

        .art-4-1{
            position: relative;
            top:1em;
            left: 0;
            background: var(--cl-blue);
        }
        .art-4-2{
            position: relative;
            top: 0;
            right: 1.25em;
            box-shadow: 0.5em 0.5em 0 0 var(--cl-text);
            background: var(--cl-white);
        }

    }

    .advert{
        border: 2px dashed #ff2525;
        background: #eccdcd;
        h2, p{color: #ff2525;}
        text-align: center;
        margin: 3em 2em;
    }
}

/*FOOTER*/

footer{
    display: grid;
    grid-template-columns: repeat(3, 33%);

    border: 2px solid var(--cl-text);

    svg{
        height: 2em;
        width: auto;
        fill: transparent;
    }

    div{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .footer-right{
        justify-content: flex-end;
    }
}