/*FRANCISCO JAVIER MARTINEZ FERNADEZ*/
/*Titulos*/
@import url('https://fonts.googleapis.com/css2?family=Bitcount+Grid+Single:wght@100..900&family=Permanent+Marker&display=swap');

/*Parrafos y titulos secundarios*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Bitcount+Grid+Single:wght@100..900&family=Permanent+Marker&display=swap');

/*Botones y formularios*/
@import url('https://fonts.googleapis.com/css2?family=Archivo+Narrow:ital,wght@0,400..700;1,400..700&family=Bitcount+Grid+Single:wght@100..900&family=News+Cycle:wght@400;700&family=Permanent+Marker&display=swap');
/* Títulos principales */

:root{
    --color-fondo: linear-gradient(to bottom right, #000000, #2F0B4A);
    --color-secundario: #2F0B4A;
}

/* Estilos Generales */
body {
    width: 100%; /*820px*/
    height: auto;
    margin: 0;
    background: var(--color-fondo); 
    color: white;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    /* Fuente de párrafos y texto general */
    font-family: 'Archivo Narrow', sans-serif;
}

/* Imágenes */
img {
    width: auto;
    height:7.31vh;/*60*100/820=7,31*/
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.43%; /*20*100/8202.43%*/
}

/* Contenedor perfil */
header div {
    display: flex; /*le digo flex para que se ajuste como por defecto es row
    no tengo que poner nada si no usase el flex se podria usar display inline block en 
    los dos elementos*/
    align-items: center;
    gap: 1.21%;/*10*100/820=1.21%*/
}

header p {
    font-family: 'Archivo Narrow', sans-serif; /* Texto secundario */
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
}

/*Títulos principales*/
h1, h2 {
    font-family: 'Permanent Marker', cursive; /* Fuente de títulos */
}
/*Caja de falso o correcto*/
#correctoFalso{
    width: 60.98%; /*500*100/820=60.98%*/
    background-color: #2E8B57;
    padding:2.43%;/*20*100/820=2,43*/
    border-radius: 10px;
    box-shadow: 3px 5px #2F0B4A;
    margin: 2.43% auto;/*20*100/820=2,43*/
}
/*Caja de explicacion*/
#porquePregunta{
    width: 60.98%; /*500*100/820=60.98%*/
    margin: 0 auto;
    background-color: rgb(28, 80, 156);
    padding:2.43%;/*20*100/820=2,43*/
    border-radius: 10px;
    box-shadow: 3px 5px #2F0B4A;
}

/* Botones y enlaces */
main a{
    width: 63.41%; /*520*100/820=63.41%*/
    display: block;
    padding: 1.21%; /*10*100/820=1,21*/
    background-color: rgb(57, 122, 243);
    text-align: center;
    text-decoration: none;
    color: #000000;
    font-size: 2em;
    margin: 2.43% auto;/*20*100/820=2,43*/
    /* Fuente para botones y formularios */
    font-family: 'News Cycle', sans-serif;
}
.boton{
    width: 63.41%; /*520*100/820=63.41%*/
    display: block;
    padding: 1.21%; /*10*100/820=1,21*/
    background-color: rgb(57, 122, 243);
    text-align: center;
    text-decoration: none;
    color: #000000;
    font-size: 2em;
    margin: 2.43% auto;/*20*100/820=2,43*/
    /* Fuente para botones y formularios */
    font-family: 'News Cycle', sans-serif;
}

.boton:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #75aaff, #3a63f7);
}

/*query para moviles*/
@media (max-width: 430px) {
    body {
        font-size: 17px; 
    }
    header {
        padding: 4.65%; 
    }
    #correctoFalso,
    #porquePregunta {
        width: 90%; 
    }
    main a {
        border-radius: 10px;
    }
    img {
        /* 60px/430px=13.95% de la anchura */
        width: 13.95%; 
        height: auto;
    }

}