@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

:root{
    --bkg-primary: #D7E9B9;
    --bkg-second:#0A3871;
    --bkg-third:#F8FFDB;
    --text-one:  #0A3871;
    --text-two: #D8DFE8;
    --text-three: #000000;
    font-family: 'Inter', sans-serif;
    font-size:16px;
    --filter-one: none;
}
    :root.dark-theme{
        --bkg-primary:#28475C;
        --bkg-second:#e5e5e5;
        --bkg-third:#D7E9B9;
        --text-one:  #d8dfe8;
        --text-two: #0a3871 ;
        --text-three:#000000;
        --filtro-one: hue-rotate(-2.5turn) saturate(3) brightness(6) grayscale(1);
    }
body {
    background: var(--bkg-primary,#E5E5E5);
    height: 100vh;
    display:flex;
    flex-wrap: wrap;
    align-content:stretch;
  }
    header{
        width: 10%;
        height: 90%;
        flex-grow: 1;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
        .logo{
            width:1.5rem;
            filter:var(--filtro-one);
        }
        
    /* A partado diseño checkbox button */

    .conten_tema{
        display: inline-block;
        vertical-align: middle;
        border-radius: 10px;
        font-size: .7rem;
        font-weight: bold;
        color:var(--text-one);
    }
        #btn_tema{
            appearance: none;
            display: block;
        }
        .check_tema{
            display: inline-block;
            position: relative;
            left: 0;
            width:45px;
            height: 25px;
            padding: 1px;
            border-radius: 20px;
            background: var(--bkg-third,#fff);
            border:2px solid #bdb3b3;
            vertical-align: middle;
        }
            .control{
                display: inline-block;
                position: relative;
                width: 18px;
                height: 18px;
                border-radius: 9px;
                border:none;
                background: var(--bkg-primary);
                box-shadow: 0 2px 4px #555;
                outline: none;
            }

            #btn_tema:checked + .conten_tema > .check_tema {
                background: var(--bkg-second);
             }
             
                #btn_tema:checked + .conten_tema > .check_tema  .control {
                    left:22px;
                } 

    main{
        flex-grow: 9;
        width: 90%; 
        height: 90%; 
        padding: 10px;
        display: flex;
        flex-direction: row;
        column-gap: 5%;
    }
        .conten{
            position: relative;
            padding: 0 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .cifrar{
            flex-grow: 4;
        }
        .descifrar{
            flex-grow: 1;
        }
            .texto{
                width: 100%;
                color: var(--text-one);
                box-shadow: 4px 4px 6px #FFF2;
                resize: none;
                padding: 10px;
                position: relative;
                z-index: 1;
            }
                .base{
                    margin-top:5%;
                    align-self: center;
                    height: 20%;
                    outline: none;
                    background:none;
                }
                    .base::placeholder{
                        color:var(--text-one);
                        font-weight: bold;
                    }
                .mensaje{
                    height: 100%;
                    border-radius: 20px;
                    color:var(--text-three);
                    background-color: var(--bkg-third);
                    }
                
                .valor{
                    background-image: url('imagenes/Muneco.svg'); 
                    background-size:60%;
                    background-repeat: no-repeat;
                    background-position: center;
                }
                        .mensaje::placeholder{
                            position:relative;
                            top:70%;
                            font-size: 12px;
                            text-align: center;
                            color:var(--text-three);
                        }
                            .mensaje[placeholder]::first-line{
                                font-weight: bold;
                            }

            .menu_btn{
                align-self: center;
                width: 70%;
                padding:10px autos;
                text-align: center; 
                z-index: 3;
                margin-bottom: 10px;

                display: flex;
                flex-wrap: wrap;
                column-gap: 10px;
            }
                .boton{
                    width: 40%;
                    padding: 10px 20px;
                    border-radius: 20px;
                    margin: 3px auto;
                    color:var(--text-one);
                    background:var(--bkg-primary);
                    outline: 1px solid var(--bkg-second);
                }
                    .codificar:active,
                    .decodificar:active,
                    .copiar:active{
                        color: var(--text-two);
                        background: var(--bkg-second);
                    }
                    .info{
                        color:var(--text-one);
                        width: 100%;
                        flex-grow: 10;
                        font-size: .7rem;
                        padding-bottom: 10px;
                        text-align: left;
                    }
                    
                        .advertencia{
                            background-color:var(--bkg-second);
                            color: var(--text-two);
                            border-radius: 20px;
                            padding: 2px 8px;
                            font-size: 0.7rem;
                        }

                .copiar{
                    display: none;
                    position:absolute;
                    bottom: 10px;
                    z-index: 3;
                    align-self: center;
                    color:var(--text-three);
                    background: var(--bkg-third);
                }
                .activo{
                    display:block;
                }
                #txt_mensaje:focus{
                    background-image: none;
                }
                    #txt_mensaje:focus ~ #btnCopiar{
                        display: block;
                    }

    footer{
        align-self: flex-end;
        color:var(--text-one);
        height:10%;
        width: 100%;
        padding: 10px;
        vertical-align: middle;
        text-align: center;
    }

@media screen and (max-width:768px) {
    body{
        display:block;
    }
        header{
            width:100%;
            height: 10%;
            flex-direction: row;
        }
        main{
            width: 100%;
            height: 80%;
            padding: 0;
            flex-direction: column;
        }
            .conten{
                row-gap: 10px;
                justify-content: flex-start;
                padding: 10px;
            }
                .cifrar{
                    height:50%;
                }
                .descifrar{
                    height: 30%;
                }
                    .texto{
                        width: 100%;
                        margin:0;
                    }
                        .base{
                            height:70%;
                        }
                            .mensaje::placeholder{
                                top:10%;
                                font-size: 16px;
                            }
                        .mensaje{
                            background-image: none;
                        }
                    .menu_btn{
                        display: block;
                        width: 100%;
                    }
                    .copiar{
                        width: 90%;
                        bottom: 20px;
                    }
}

@media screen and (max-width:480px) {
    .menu_btn{
        flex-direction: column;
        flex-wrap: nowrap;
    }
        .boton{
            width: 90%;
        }
}