/*Page Recursive Header Style*/

header {
    background-color: #112240;
    font-family: "SF Mono","Fira Code","Fira Mono","Roboto Mono",monospace;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: static;
}

nav{
    grid-column: 3/6;
    font-weight: bold;
    display: flex;
    justify-content: space-around;
    padding-top: 5%;

}

nav a{
    color: #4D78B8;
    font-size: 1.5vw;
    text-decoration: none;
    margin: 0;
    margin: 0;
    margin-left: -10vw;
}

.logo {
    height: 6vw;
    width: 6vw;
}

.logo:hover {
    opacity: .6;
    transform: scale(1.1);
}

nav span {
    color: #29ABE2;
}

nav :hover{
    color: #29ABE2;
    transform: scale(1.1);
}

/*Body recursive values*/
h1,h4 {
    color: #29ABE2;
    font-size: 1.5vw;
}

h2 {
    color: #839ABD;
    font-size: 0.9vw;
}

h3, p {
    color:#6285BA;
    font-size: 1.35vw;
}

body {
    background-color: #112240;
    font-family: "Calibre","Inter","San Francisco","SF Pro Text",system-ui,sans-serif;
    display: grid;
    padding-top: 0.5%;
    padding-left: 4%;
    padding-right: 4%;
    height: 100%;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

body::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.contenido {
    display: grid;
    grid-template-columns: 15% auto auto 15%;
    grid-auto-flow: column;
}

#tittle {
    grid-column: 2/3;
    font-family: "SF Mono","Fira Code","Fira Mono","Roboto Mono",monospace;
    color: #839ABD;
    font-size: 2vw;
}

#tittle span{
    font-size: 1.5vw;
    color: #29ABE2;
    margin: 0%;
}

p{
    font-size: 0.8vw;
}

a {
    color:#29ABE2;
    text-decoration: none;
}

a:hover{
    text-decoration: underline;
}

/* Footer Recursive Style*/
footer {
    background-color: #112240;
    text-align: center;
    color:#6285BA;
    font-size: 0.8vw;
    bottom: 0;
    width: 100vw;
    height: 15%;    
    position:fixed;
}

footer a{
    text-decoration: none;
}

#footer1 {
    margin-top: 0%;
    padding-bottom: 0;
}

#footer2 {
    margin: 0%;    
    padding-bottom: 0.5vw;
}

#footer1  span{
    color: #29ABE2;
}

.social {
    padding: 2vw;
}

.sociallogo {
    height: 2vw;
    width: 2vw;
    text-decoration: none;
}
.sociallogo:hover {
    transform: scale(1.1);
    text-decoration: none;
}