@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
:root {
    --color1: #3334467c;
    --color2: #7f8caa96;
    --color3: #979e9e00;
    --color4: #21b4ee;
    --color5: rgb(210, 211, 218);
    --blanco: #ffffff23;
}
* {
    box-sizing: border-box;
}
body {
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: "PT Serif", serif;
    background-image: url(imagenes/LogoHac.jpg.jpg);
    margin: 0px;
}
header {
    background-color: #33344670;
    box-sizing: border-box;
    color: var(--color4);
    text-align: center;
    position: fixed;
    font-size: 1.4em;
    padding: 0px;
    top: 0px;
    height: 80px;
    width: 100%;
    border-radius: 0px 0px 0px 0px;
}
header h1 {
    margin: 0px;
    padding: 0px;
    color: var(--letraClara);
}
p{
    background-color: var(--color1);
    color: var(--color4);
    text-align: center;
    padding: 0px;
    border-radius: 0px 0px 0px 0px;
    padding-top: 0px;
    margin: 0px;
}
main {
    margin-top: 80px;
}
h2 {
    background: linear-gradient(0deg,rgba(252, 252, 252, 0.582) 0%, rgba(196, 196, 196, 0.692) 41%, rgba(189, 189, 189, 0.507) 100%);
    color: white;
    text-align: center;
    width: 73vw;
    padding: 5px;
    border: 10px;
    border-radius: 0px 0px 0px 0px;
    padding-right: 0%;
    margin-top: 70px;
    margin: auto;
    animation: wave 2.5s linear infinite;
    width: 50%;
}

#tabs{
    color: #d9dbdb;
    text-align: center;
    padding-left: 10px;
    list-style: none;
}

#solapa ul li {
    color: aliceblue;
    display: grid;
    grid-template-columns: 90% 10%;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid #fffcfc;
    padding: 0px;
    font-size: 1.0em;
    margin: 0px;
    text-align: center;
}
.solapa main li a {
    display: grid;
    grid-template-columns: 15% 25% 25% 15% 20;
    color: rgb(25, 0, 255);
    border-color: 1px solid #21b4ee;
    text-decoration: double;
    display: inline-block;
    width: 50%;
    transform: scale(0.9);
    text-align: center;
}
fieldset{
    margin: 0px;
    color:#9cabb600;
    border: 0px;
}
main ol {
    display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
      max-width: 1000px;
      margin: 0 auto;
    list-style-position: initial;
    background-color: #ffffff00;
    text-align: center;
    margin: 0px;
    padding: 0px;
    width: 75vw;
    margin: auto;
    box-shadow: 0px 0px 18px 0px rgba(255, 255, 255, 0.705);
    -webkit-box-shadow: 0px 0px 18px 0px rgba(247, 243, 243, 0.267);
    -moz-box-shadow: 0px 0px 18px 0px rgba(255, 242, 242, 0.747);
}
main li {
    font-size: 1.2em; 
    border-bottom: 1px solid #0ccbf13b;
    padding: 10px;
    padding-left: 20px;
    background-color: #ffffff00;
    list-style: none;
}
main li a {
    background-color: #ffffff0f;
    color: rgb(68, 170, 253);
    text-decoration: double;
    display: inline-block;
    width: 50%;
    transform: scale(0.9);
    text-align: center;
}

main li a:nth-child(2) {
    text-align: right;
    padding-right: 50px;
}
footer{
    box-sizing: border-box;
    background-color: #17477e91;
    color: var(--color4);
    text-align: center;
    padding: 15px;
    border-radius: 0px 0px 0px 0px;
}
@keyframes aparecer {
    to {
      opacity: 1;
      transform: translateX(0);
    }
    }
ol.botones li:hover {
    background: linear-gradient(180deg,rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100%);
    padding: 9px;
}
ol.botones li i {
    font-size: 18px;
    list-style: none;
}
ol.botones li a {
    color: #21b4ee;
    text-decoration: none;
    flex-grow: 1;
}
ol.botones li:active {
    transform: scale(0.97);
}
footer a{
    color: var(--color5);
    font-size: 1.2em;
    text-decoration: none;
    margin-right: 15px;
    list-style: none;    
}
footer i {
    box-sizing: border-box;
    color: var(--color5);
}