/*
Galaxia Neón
Elena Brotons López
*/

body, h1, h2, h3, p, ul, li, dl, dt, dd, span {
    margin: 0;
    padding: 0;
}

body {
    background: #05020A;
    color: #E5F8FF;
    font-family: Arial, sans-serif;
    line-height: 1.7;
}

a {
    color: #83E8FF;
    text-decoration: underline;
}
a:hover {
    color: white;
    text-shadow: 0 0 6px #4DDCFF;
}

#contenedor {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

#intro {
    background: #0C1120;
    border: 3px solid #3EC7EA;
    padding: 35px;
    margin-bottom: 40px;
    border-radius: 6px;
    box-shadow: 0 0 15px #3EC7EA;
}

#titulo h1 span {
    font-size: 38px;
    color: #4DDCFF;
    text-shadow: 0 0 14px #3EC7EA;
}

#titulo h2 span {
    font-size: 22px;
    color: #A4F3FF;
}

#cuerpo {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 35px;
}

#apartados > div {
    background: #0C1120;
    border: 2px solid #3EC7EA;
    border-radius: 6px;
    padding: 35px;
    margin-bottom: 40px;
    box-shadow: 0 0 12px #03050A;
}

#apartados h3 span {
    font-size: 26px;
    display: inline-block;
    border-bottom: 2px solid;
    padding-bottom: 5px;
    margin-bottom: 18px;
}

#enlacesintra,
#enlaces > div,
#enlacesversiones {
    background: #0C1120;
    border: 2px solid #3EC7EA;
    border-radius: 6px;
    padding: 25px;
    margin-bottom: 30px;
    box-shadow: 0 0 12px #03050A;
}

#enlacesintra h3 span,
#enlaces h3 span,
#enlacesversiones h3 span {
    font-size: 22px;
    display: inline-block;
    border-bottom: 2px solid;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

#apartados > div:nth-child(1) {
    border-color: #FF4BF0;
    box-shadow: 0 0 14px #FF9AF7;
}

#apartados > div:nth-child(1) h3 span {
    color: #FF4BF0;
    border-bottom-color: #FF4BF0;
    text-shadow: 0 0 10px #FF9AF7;
}

#apartados > div:nth-child(2),
#lselecciona {
    border-color: #3EC7EA;
    box-shadow: 0 0 14px #4DDCFF;
}

#apartados > div:nth-child(2) h3 span,
#lselecciona h3 span {
    color: #3EC7EA;
    border-bottom-color: #3EC7EA;
    text-shadow: 0 0 10px #4DDCFF;
}

#apartados > div:nth-child(3),
#lrecursos {
    border-color: #F8FF66;
    box-shadow: 0 0 14px #FFEA66;
}

#apartados > div:nth-child(3) h3 span,
#lrecursos h3 span {
    color: #F8FF66;
    border-bottom-color: #F8FF66;
    text-shadow: 0 0 12px #FFEA66;
}

#apartados > div:nth-child(4),
#lhistorico,
#enlacesversiones {
    border-color: #FF4BF0;
    box-shadow: 0 0 14px #FF9AF7;
}

#apartados > div:nth-child(4) h3 span,
#lhistorico h3 span,
#enlacesversiones h3 span {
    color: #FF4BF0;
    border-bottom-color: #FF4BF0;
    text-shadow: 0 0 10px #FF9AF7;
}

#enlacesintra {
    border-color: #F8FF66 !important;
    box-shadow: 0 0 14px #FFEA66 !important;
}

#enlacesintra h3 span {
    color: #F8FF66 !important;
    border-bottom-color: #F8FF66 !important;
    text-shadow: 0 0 12px #FFEA66 !important;
}

#extraDiv1 {
    position: absolute;
    top: 15px;
    right: 25px;
    width: 70px;
    height: 70px;
    background: radial-gradient(circle, #4DDCFF 0%, #0C1120 70%);
    border: 2px solid #3EC7EA;
    border-radius: 50%;
    box-shadow: 0 0 20px #4DDCFF;
}

#extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {
    display: none;
}

#enlaces {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 35px;
    border: 3px solid #3EC7EA;
    border-radius: 10px;
    box-shadow: 0 0 22px #4DDCFF;
    background: #060912;
}

#enlaces > div {
    margin-bottom: 35px;
    padding: 25px;
    border-radius: 8px;
}

#lhistorico {
    border-color: #FF4BF0 !important;
    box-shadow: 0 0 14px #FF9AF7 !important;
}

#lhistorico h3 span {
    color: #FF4BF0 !important;
    border-bottom-color: #FF4BF0 !important;
}

#lrecursos {
    border-color: #F8FF66 !important;
    box-shadow: 0 0 14px #FFEA66 !important;
}

#lrecursos h3 span {
    color: #F8FF66 !important;
    border-bottom-color: #F8FF66 !important;
}

@media screen and (max-width: 959px) {
    #cuerpo {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 640px) {
    body {
        font-size: 18px;
    }
    #intro {
        padding: 25px;
    }
    #titulo h1 span {
        font-size: 28px;
    }
    #titulo h2 span {
        font-size: 18px;
    }
    #apartados > div {
        padding: 25px;
    }
    #enlaces {
        padding: 20px;
    }
    #enlaces > div {
        padding: 20px;
    }
}