@charset "UTF-8";

header#inicio {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-content: space-around;
    align-items: center;
}

#mainapresentation {
    background-color:var(--colorgray-three);
    text-align: center;
    padding: 1em;
    width: 80%;
    margin-top: 1em;
    margin: 0 auto 2.5em auto;
    box-shadow: 6px 6px 2px rgba(0, 0, 0, 0.603);
    transition: padding 0.4s ease-in-out;
}

#mainapresentation:hover {
    animation: float 1.1s ease-in-out infinite alternate;
    padding: 2em;
}

#mainapresentation h1, #mainapresentation p {
    font-family: var(--fontpixel-art);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.247);
}

#mainapresentation h1 {
    font-size: 1.5em;
    margin-bottom: 1.5em;
}

#mainapresentation p {
    font-size: 1.1em;
}

#areabuttons {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    width: 100%;
}
#areabuttons a {
    background-color: var(--colorgray-three);
    font-size: 1em;
    padding: 0.6em;
    border: 0;
    box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.575);
    display: flex;
    align-items: center;
    text-decoration: none;
}

#areabuttons a:active {
    background-color: var(--colorviolet-three);
    color: var(--colorwhite);
}

#areabuttons p { 
    font-family: var(--fonthover);
    font-weight: 600;
    color: var(--colorviolet-two);
}

#iconlogout {
    margin-left: 5px;
    color: var(--colorviolet-two);
}

#cvbutton, #inbutton {
    transition: padding 0.4s ease-in-out, color 0.4s ease-in-out;
    
}

#cvbutton:hover, #inbutton:hover {
    animation: float 1.1s ease-in-out infinite alternate;
    padding: 1em;
}

@media  screen and (min-width: 768px) {
    #mainapresentation {
        animation: float 1.1s ease-in-out infinite alternate;
        padding: 2em;
    }

    #mainapresentation:hover {
        padding: 2.7em;
    }

    #cvbutton, #inbutton {
        animation: float 1.1s ease-in-out infinite alternate;
    }

    #cvbutton:hover, #inbutton:hover {
        padding: 1.5em;
    }
}

@media  screen and (min-width: 992px) {
    #mainapresentation {
        width: 70%;
    }

    #areabuttons {
        width: 90%;
    }
}