html{
    height:100%;
}
body{
    height:100%;
    margin:0px;
    font-family: 'Quicksand', sans-serif;
}
header{
    background: rgba(100, 100, 100, 1);
    height:40px
}

main{
    display: flex;
    flex-direction: column;
    position: absolute;
    height:100%;
    width:100%;
}

.inicio{
    height:100%;
    flex: 1 0 100%;
    height:100%;
    width:100%;
    display: flex; 
    align-items: center;
    flex-direction: row;    
    justify-content: flex-end;
    background: url(bg.jpg) no-repeat;
    animation: apresentacao 2s ease-out;
}

@media screen and (max-width: 540px) {
    .inicio {
        background: url(bgm.jpg) no-repeat;
        flex-direction: column;
    }
}

@media screen and (max-width: 1000px) {
    .inicio {
        /* flex-direction: column;
        justify-content: flex-end; */
        display: block;
        position: relative;
    }

    .inicio section{
        position: absolute;
        bottom: 0px;
        right: 0px
    }
}

.inicio section{
    color: #FFFFFF;
    padding: 20px;
    background: rgba(100, 100, 100, 0.5);
}

.inicio section div{
    margin-top: 20px;
}

.inicio section div i{
    margin-right: 20px;
    transform: scale(1, 1);
    transition: all .5s
}

.inicio section div i:hover{
    transform: scale(1.5, 1.5);
    transition: all .5s;
    color: #9AF3F3
}

.inicio section div a{
    color: #FFFFFF;
    text-decoration: none;
}

.inicio section h1{
    font-size: 40px;
    font-weight: bold;
    font-family: 'Arial Black';
    text-transform: uppercase
}

.habilidades{
    color: #333333;
    flex: 1 0 auto;
    height: auto
}

.habilidades section{
    display: flex
}

.habilidades p{
    color: #333333;
}

.habilidades section div{
    width: 100px;
    border:1px dashed #288c8c;
    color: #288c8c;
    margin-right: 10px
}

.habilidades section div .titulo{
    padding: 4px;
    display:block
}
.habilidades section div .nivel{
    padding: 4px;
    font-size:10px;
    display:block;
    color: #FFFFFF;
    background: #288c8c
}

article{
    flex: 1 0 100%;
    height:100%;
    padding: 20px
}

.experiencia{
    background: #104d91;
    color: #FFFFFF;
    flex: 1 0 auto;
    height: auto;
}



h1{
    margin:0px
}

footer{
    background:#002342;
    color: #FFFFFF;
    flex: 0 0 60px;
    text-align: center
}

footer i{
    color: #FF3333
}

/* Animates */
 @keyframes apresentacao{
    from {flex-grow:0; opacity: 0}
    to {flex-grow:1; opacity: 1}
}

#scrollme{
    cursor: pointer;
    transform: translateY(-10px);
    animation: aniscroll 2s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#scrollme:hover{
    transform: scale(1.5, 1.5);
    transition: all .5s;
    color: #9AF3F3
}

/* Animates */
@keyframes aniscroll{ 
    from { transform: translateY(-10px); }
    to {transform: translateY(10px);}
}