@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Quicksand&display=swap');

/* 1. Base */
html {
    background-color       : #5f45bb;
    background-image       : linear-gradient(to bottom right, #180cac, #19041d);
    color                  : #fff;
    font-family            : 'Quicksand', sans-serif;
    font-size              : 1em;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing : antialiased;
    line-height            : 1.5;
    min-height             : 100vh;
    min-width              : 100vw;
    overflow-x             : hidden;
    text-shadow            : 0 3px 5px rgba(0, 0, 0, 0.1);
}

a {
    color          : currentColor;
    cursor         : pointer;
    text-decoration: none;
}

/* 2. Shared */
.wallpaper {
    display: block;
    height : 100%;
    left   : 0;
    top    : 0;
    width  : 100%;
}

.wallpaper,
.picture-shadow,
.picture-image {
    display: block;
    height : 100%;
    left   : 0;
    top    : 0;
    width  : 100%;
}

.job,
.button {
    font-family   : 'Montserrat', sans-serif;
    letter-spacing: 0.3rem;
    text-transform: uppercase;
}

.button,
.social a {
    transform-origin   : center;
    transition-duration: 100ms;
}

/* 3. Specific */
.wallpaper {
    background-image   : url("../images/background.jpg");
    background-position: center;
    background-size    : cover;
    opacity            : 0.2;
    position           : fixed;
}

.content {
    display   : flex;
    min-height: 100vh;
    position  : relative;
}

.side {
    max-height: 20rem;
    max-width : 20rem;
}

.about {
    max-width: 26rem;
}

.picture {
    padding-top: 100%;
    position   : relative;
    width      : 100%;
}

.picture-shadow {
    border-radius   : 290486px;
    background-image: radial-gradient(#000 0%, rgba(0, 0, 0, 0) 70%);
    position        : absolute;
    top             : 10%;
}

.picture-image {
    border-radius: 290486px;
    position     : absolute;
}

.name {
    font-size    : 2.25rem;
    line-height  : 1.125;
    margin-bottom: 0.5rem;
}

.job {
    color    : #ffe479;
    font-size: 0.75rem;
}

.hr {
    background-color: #ff470f;
    border          : none;
    content         : "";
    height          : 1px;
    margin-bottom   : 1.5rem;
    margin-top      : 1.5rem;
    transform-origin: center left;
    width           : 4rem;
}

.description {
    font-size: 1.5rem;
}

.contact {
    display       : inline-block;
    margin-top    : 1.5rem;
    vertical-align: top;
}

.button {
    background-color   : #fff;
    border-radius      : 290486px;
    box-shadow         : 0 1rem 2rem rgba(0, 0, 0, 0.2);
    color              : #9013fe;
    display            : inline-block;
    font-size          : 0.875rem;
    line-height        : 1;
    padding            : 1.25em 2em;
    text-shadow        : none;
    transition-property: box-shadow, transform;
    user-select        : none;
    /*Evitar que o texto seja selecionado*/
    vertical-align     : top;
    white-space        : nowrap;
    /*Evitar que o texto quebre em duas linhas*/
    will-change        : box-shadow, transform;
}

.social {
    display   : flex;
    margin-top: 1.5rem;
}

.social li {
    height    : 2rem;
    margin-top: 0.5rem;
    text-align: center;
    width     : 2rem;
}

.button:hover {
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
    transform : scale(1.02) translateY(-4px);
}

.social a {
    align-items        : center;
    display            : flex;
    font-size          : 1.5rem;
    height             : 2rem;
    justify-content    : center;
    opacity            : 0.5;
    transition-property: opacity, transform;
    width              : 2rem;
    will-change        : opacity, transform;
}

.social a:hover {
    opacity  : 1;
    transform: scale(1.25);
}

.social a:active {
    opacity  : 1;
    transform: scale(1.1);
}

/* 4. Responsiveness */
@media screen and (max-width: 799px) {
    .content {
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        padding        : 5rem 3rem;
    }

    .side {
        margin-bottom: 3rem;
        width        : 100%;
    }
}

@media screen and (min-width: 800px) {
    .content {
        align-items    : center;
        justify-content: space-around;
        justify-content: space-evenly;
        padding        : 4rem;
    }

    .side {
        flex-grow  : 0;
        flex-shrink: 0;
        height     : 20rem;
        margin-left: 4rem;
        order      : 2;
        width      : 20rem;
    }

    .about {
        flex-grow  : 1;
        flex-shrink: 1;
    }
}