@import url(main.css);

/*HEADER*/
header{
    &{
        display: flex;
        flex: row wrap;
        justify-content: space-between;
    }
    & > menu{
        &{
            align-self: center;
            display: block;
        }
        & div{
            display: none;
        }
    }
    & > nav {
        &{
            padding: 0;
            display: flex;
            flex-flow: row wrap;
            margin-right: 25px;
            background: transparent;
            box-shadow: 0px 0px 0px transparent;
        }
        & > a{
            &{
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
                line-height: 23px;
                text-align: center;
                color: var(--color_ligth);
                text-transform: uppercase;
                padding: 6px 0px 0px 0px;
                transition: .5s;
                width: 100px;
                height: 35px;
                margin: 0 10px 0 0;
                border-bottom: 0;
                border-radius: 10px;
                background-color: var(--color_second);
            }
            &:hover{
                color: var(--color_main);
                transform: translate(5px);
            }
        }
    }
}

/*MAIN CONTENT*/
main{
    margin: auto;
    max-width: 900px;
}

/*INTRODUCION*/
main > section#introducion article#social > a > img{
    margin: 5px 0px;
    border-radius: 50%;
}
main > section#introducion  article#text > h3 {
    font-weight: bolder;
    font-size: 23px;
}
main > section#introducion > img{
    margin: 0;
}
main > section#introducion > section > a{
    padding: 12px;
    margin: 0;
    transition: .8s;
}
main > section#introducion > section > a:hover{
    transform: translate(5px);
}
main > section#introducion article#social > a > img{
    transition: .5s;
}
main > section#introducion article#social > a > img:hover{
    transform: translate(3px);
    border: 2px solid var(--color_ligth);
}

/*PROJECT PAGE*/
main > section.img{
    height: 283px;
}

/*ALL LETTER*/
p.letter{
    padding: 0 5px;
}

/*DOWNLOAD*/
a#download{
    top: 90%;
    left: 90%;
}