* {
    box-sizing              : border-box;
    text-rendering          : optimizeLegibility;
    -webkit-font-smoothin   : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-kerning            : auto;
}

html {
    font-family       : sans-serif;
    /* background-image: linear-gradient(18deg,
        hsl(0, 100%, 50%),
        hsl(30, 100%, 50%),
        hsl(60, 100%, 50%),
        hsl(90, 100%, 50%),
        hsl(120, 100%, 50%),
        hsl(150, 100%, 50%),
        hsl(180, 100%, 50%),
        hsl(210, 100%, 50%),
        hsl(240, 100%, 50%),
        hsl(270, 100%, 50%),
        hsl(300, 100%, 50%),
        hsl(330, 100%, 50%),
        hsl(360, 100%, 50%)
    ); */
    /* background-color : aquamarine; */
    color            : black;
    height           : 100%;
    width            : 100vw;
    overflow         : hidden;
    overflow-wrap    : normal;
}

body {
    margin           : 0;
    height           : 100%;
    width            : 100%;
    overflow         : hidden;
    overflow-wrap    : normal;
}

.center{
    display        : grid;
    width          : 100%;
    height         : calc(100% - 70px);
    align-items    : center;
    align-content  : center;
    justify-content: center;
    grid-gap       : 10px;
}

.navbar{
    display              : grid;
    grid-template-columns: auto max-content max-content;
    width                : 100%;
    grid-gap             : 15px;
    padding              : 10px;
}

.navlink{
    color           : black;
    text-decoration : none;
    background-color: whitesmoke;
    padding         : 5px 10px 5px 10px;
    border-radius   : 5px;
}

.navlink:hover{
    opacity: .7;
    cursor: pointer;
}

.active{
    color: purple;
}

.photo{
    border-radius  : 100%;
    height         : 100px;
    width          : 100px;
    background     : whitesmoke;
    justify-self   : center;
    /* object-fit     : cover; */
    /* object-position: 80% 100%; */
}

.socials-title{
    text-align: center;
}
.socials{
    display              : grid;
    width                : 100%;
    align-items          : end;
    justify-items        : end;
    grid-gap             : 15px;
    padding              : 10px;
}
.social{
    display         : grid;
    text-align      : center;
    border-radius   : 5px;
    background-color: whitesmoke;
    justify-content : center;
    align-content   : center;
    padding         : 8px;
    width           : 180px;
    color           : black;
    text-decoration : none;
}

.social:hover{
    box-shadow: 0px 2px 4px 0px rgba(0,0,0,.2);
    cursor    : pointer;
}

/* blog */
h1,h2,h3,h4,p{
    margin : 0px;
    padding: 10px;
}
.content{
    padding-left: 20px;
    width       : 430px;
}