* { box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none 
;}

h4, h3 { color:deeppink; }
h1 { color:red;}


body {
    
    font-family: 'Arial', sans-serif;
    font-weight: 300;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    min-height: 100vh; }



header { 
    position: fixed;
    position: fixed;
    min-height: 3em;
    min-width: 100%;
    background-color: darkviolet;
    color: #fff;
    padding: .75em 2em; }


#logo-palabra { display: inline-block;
    color:white;
    font-family:'Arial', sans-serif;
    font-weight: 700;
    font-size: 1.5em;
    transition: transform .25s ease; }

#logo-palabra:hover { transform: translateY(-2px);
    cursor: progress;}

nav { display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: wrap; }

nav ul { display: flex; }

nav ul p,
nav ul ul {  display: inline-block;
    padding-left: 1em; }

nav ul li a,
nav ul ul a {  color: #fff;
    font-family:'Arial', sans-serif;
    font-size: 1em;
    transition: all .25s ease; }

nav ul ul a:hover { color: yellow; }

main { display: flex;
    align-items: center;
    flex-flow: column;
    justify-content: space-between;
    flex-grow: 1;
    margin-top: 3em; }

section { width: 100vw;
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    justify-content: center;
    padding: 3em; }





footer { display: flex;
    align-items: center;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 100vw;
    background-color: darkviolet;
    color: #fff;
    padding: 0 1em; }



footer p, div {
    padding: .75em 0;
}

.footer-links {
    display: flex;
    width: 320px;
    align-items: center;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.footer-links img {
    height: 48px;
    filter: invert(100%) hue-rotate(180deg);
}

footer p {
    font-size: .8em;
}



#menu-toggle {display: none;}
.hamburger-toggle {display: none;}

@media screen and (max-width: 768px) {
    nav ul { display: block;
        height: 0;
        opacity: 0;
        text-align: center;
        width: 100%;
        visibility: hidden;
        transition: all .25s ease; }
    nav ul li,
    nav ul ul { display: block;
        padding: 1em 0; }
    
    #menu-toggle:checked ~ ul { opacity: 1;
        height: 100vh;
        visibility: visible; }
    
    .hamburger-toggle { background: linear-gradient(to bottom, gray, gray, transparent 12%, transparent 44%, gray, gray, transparent 56%, transparent 88%,gray,gray);
      cursor: pointer;
      display: block;
      float: right;
      height: 1.5em;
      width: 1.5em;  }
    
    header { display: block; }
} 

*/