@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

* {
    box-sizing:border-box;
    font-family: "Google Sans", sans-serif;
}

header {
    > img {
       width: 120px;
       height: auto;
    }
}

img {
    max-width: 100%;
    max-height: 100%;
}

body {
    min-width: 400px;
    background-color: rgb(233, 193, 213);
    margin:0;

    > header{
        background-color: #ccd;
        padding:.5em;
        text-align: center;
    }
    >main{
        >section{
            padding:.5em;
            background-color:#eee;

            >h3{
            color:black;
            font-size: 2em;
            text-align: center;
            }

            > div{
                display: grid;
                grid-template-columns: repeat(auto-fit,minmax(15em, 1fr));
                > article{
                padding:.5em;
                margin:.5em;
                background-color:#aaa;

                display:flex;
                flex-direction:column;

                > h5{
                    font-size:1.2em;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: block;
                    margin:0;

                }

                >p{
                    flex-grow: 1;
                }

                > footer{
                    padding:.5em;
                    background-color: #00aa00;
                }
                }

            }
        }
    }
    > footer {
        background-color: #ff8;
        padding:.5em;
        > p {
            margin:0;
        }
    }
}

nav{
    position:sticky;
    top:0;
    background-color:#cab;
    > label{
        font-size: 2em;
        font-weight: bold;
        cursor: pointer;
    }
    >ul{
        list-style: none;
        margin:0;
        padding:0;

        max-height:0;
        overflow:hidden;

        transition:max-height .5s ease-in-out;

        >li{
            >a{
                display:block;
                text-align:center;
                text-decoration:none;
                padding: .4em .2em;

                font-family: "Outfit", sans-serif;
                font-optical-sizing: auto;
                font-weight: 400;
                font-style: normal;

                &:hover{
                    background-color: #00aaff;
                    transition: all 0.3s ease;
                    color:#fff;
                }
            }
        }
    }
}

#chkMenu {
    display:none;
    &:checked + ul {
        max-height:14em;
        max-height:calc-size(max-content, size);
    }
}
.boton_mostrar_mas {
    text-align: center;
    padding: 0.5em;
   
}
@media all and (width > 500px){
    body{
        > header{
            display: grid;
            grid-template-areas:"logo h1"
                                "logo h2";
            justify-content:center;
            grid-gap:1em;

            > img{
                grid-area:logo;
            }
            > h1{
                grid-area:h1;
                margin:0;
            }
            > h2{
                grid-area:h2;
            }
        }

        > nav{
            display: flex;
            justify-content: center;
            align-items: center;

            > label{
                display:none;
            }
            > ul{
                display:flex;
                max-height:none;
                > li{
                    > a{
                        color: purple;
                        padding: .5em 1em;
                    }
                }
        }
    }
    }
}

.actividad {
    display: inline-block;
    transition: all 0.3s ease;
    padding: 0px;
    margin: 0px;
}

.actividad:hover {
    transform: translateY(-5px);
}

.iniciar_sesion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    border-radius: 10px;
    max-width: 400px;
    max-height: 800px;
    margin: 15vh auto;
    > h3{
            color: #d172b5;
            margin-bottom: 20px;
            font-size: 30px;
            border-radius: 20px;
            padding: 20px;
            
    }

    > form{
        > p{
            font-size: 20px;
            text-align: center;
            font-family: "Outfit", sans-serif;
            margin-top: 5px;  /* Reduce el espacio encima del texto */
            margin-bottom: 15px;
            color:#b64895;
        }
        
        > footer{
            text-align: center;
            > input[type="submit"], input[type="reset"]{
                background-color:#d172b5;
                font-size: 20px;
                color: white;
                border: none;
                border-radius: 10px;
                padding: 5px;
                margin: 35px 10px 25px 10px;
                font-family: "Outfit", sans-serif;
                

                &:hover {
                    cursor: pointer;
                    transition: all 0.3s ease;
                    background-color:#b64895;
                    color:white;
                }
            }

            >a{
                >input[type="button"]{
                    background-color:#d172b5;
                    color: white;
                    border: none;
                    border-radius: 10px;
                    font-size: 20px;
                    padding: 5px;
                    margin: 35px 10px 25px 10px;
                    font-family: "Outfit", sans-serif;
                
                &:hover {
                    cursor: pointer;
                    transition: all 0.3s ease;
                    background-color:#b64895;
                    color:white;
                }

                }
            }
            
            > p{
                margin-top: 10px;
                color: #b64895;
                font-family: "Outfit", sans-serif;

                >input[type="checkbox"]{
                    accent-color: #b64895;

                }
            }
        }
    }
}

.registro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #eee;
    border-radius: 10px;
    max-width: 400px;
    max-height: 800px;
    margin: 15vh auto;
    > h3{
            font-size: 30px;
            margin-bottom: 20px;
            color: #d172b5;
            border-radius: 20px;
            padding: 20px;
            
    }

    > form{
        > p{
            font-size: 20px;
            text-align: center;
            font-family: "Outfit", sans-serif;
            margin-top: 5px;
            margin-bottom: 15px;
            color:#b64895;

            >input[type="button"]{
                background-color:#d172b5;
                font-size: 15px;
                color: white;
                border: none;
                border-radius: 10px;
                padding: 5px;
                margin-left: 5px;
                font-family: "Outfit", sans-serif;
                position: absolute;

                &:hover {
                    cursor: pointer;
                    transition: all 0.3s ease;
                    background-color:#b64895;
                    color:white;
                }
            }
        }
        
        > footer{
            text-align: center;
            > input[type="submit"], input[type="reset"]{
                background-color:#d172b5;
                font-size: 20px;
                color: white;
                border: none;
                border-radius: 10px;
                padding: 5px;
                margin: 35px 10px 25px 10px;
                font-family: "Outfit", sans-serif;
                

                &:hover {
                    cursor: pointer;
                    transition: all 0.3s ease;
                    background-color:#b64895;
                    color:white;
                }
            }

            >a{
                >input[type="button"]{
                    background-color:#d172b5;
                    color: white;
                    border: none;
                    border-radius: 10px;
                    padding: 5px;
                    font-size: 20px;
                    margin: 35px 10px 25px 10px;
                    font-family: "Outfit", sans-serif;
                
                &:hover {
                    cursor: pointer;
                    transition: all 0.3s ease;
                    background-color:#b64895;
                    color:white;
                }

                }
            }
            
            > p{
                margin-top: 10px;
                color: #b64895;
                font-family: "Outfit", sans-serif;

                >input[type="checkbox"]{
                    accent-color: #b64895;

                }
            }
        }

        .foto{
            text-align: center;

            >label{
                >p{
                    > img {
                    text-align: center;
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    border: 3px solid #d172b5;
                    }
                }
            }
        }
        
        > input[type="file"] {
                font-family: "Outfit", sans-serif;
                color: #b64895;
        }
        input[type="file"]::file-selector-button {
                background-color: #d172b5;
                color: white;
                border: none;
                border-radius: 10px;
                padding: 8px 15px;
                margin-right: 10px;
                font-family: "Outfit", sans-serif;
                cursor: pointer;
                transition: all 0.3s ease;
        }
        input[type="file"]::file-selector-button:hover {
                background-color: #b64895;
                color: white;
                border: none;
                border-radius: 10px;
                padding: 8px 15px;
                margin-right: 10px;
                font-family: "Outfit", sans-serif;
                cursor: pointer;
                transition: all 0.3s ease;
        }
    }
}