:root {
    --bg-color: #c9c9c9;
    --bg-white-color: mintcream;
    --bg-light-color: rgb(161, 161, 161);
    --bg-dark-color: #5c5c5c;
    --shadow-color: #1a1a1a;
    --text-light-color: mintcream;
    --text-dark-color: rgb(46, 46, 46);
    --link-color: #00E000;
    --link-color-2: rgb(241, 65, 241);
    --link-bg-color: rgba(77, 255, 77, 0.479);
    --link-shadow-color: #505050;
    --link-gradient: linear-gradient(to bottom, transparent 50%, var(--link-bg-color) 50%);
}

body {
    /* background-image: url(../images/ProgrammingWorld.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed; */
    background-color: var(--bg-color);
}

header {
    background: var(--bg-dark-color);
    box-shadow: 0 0 1rem .2rem var(--shadow-color);
}

#title {
    background: url(../images/logo_tiempo_white.png);
    background-repeat: no-repeat;
    background-position: 1rem .75rem;
    background-size: 2rem;

    transition-property: background-size, background-position;
    transition-timing-function: ease-in-out;
    transition-duration: .2s;
}

#title:hover {
    background-position: .5rem .25rem;
    background-size: 3rem;
}

#toggle_menu_button {
    color: var(--text-light-color);
}

footer {
    background-color: var(--bg-dark-color);
    box-shadow: 0 0 1rem .2rem var(--shadow-color);
}

footer {
    color: var(--text-light-color);
}

.link, nav a {
    display: inline;
    padding: .1rem .5rem;
    border-radius: .3rem;
    outline: none;
    border: none;
    background: var(--link-gradient) top;
    background-size: 100% 200%;

    transition-property: background-position;
    transition-timing-function: ease-in-out;
    transition-duration: .3s;
}
.link:hover, nav a:hover {
    background-position: bottom;
}

address a {
    color: var(--text-light-color);
}

main {
    color: var(--text-dark-color);
}

aside {
    background-color: var(--bg-light-color);
    box-shadow: 0 0 1rem 0 var(--shadow-color);
    border-radius: 3px;
}

.content {
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 1rem 0 var(--shadow-color);
    border-radius: 3px;
}

#email_logo {
    background-color: var(--text-light-color);
}

button {
    color: #000000;
    padding: .5em 1em;
    margin: 1em .3em;
    cursor: pointer;
}