/* CSS RESET - Jack Turner style, few enough rules you can grasp it in your mindbrain */
* {
    margin:             0;
    padding:            0;
    }
  
img {
    border:             none;
    vertical-align:     middle;
    }

h1, h2, h3, h4, h5, h6 {
    font-weight:        normal;
    }

html {
    box-sizing:         border-box;
    }

*, *:before, *:after {
    box-sizing:         inherit;
    }

select, button, input {
    font-family:        inherit;
    font-size:          inherit;
    text-align:         inherit;
     }

/* CUSTOM FONTS */
@font-face {
    font-family:        'fontello';
    src:                url('webfonts/fontello.woff2') format('woff2'), url('webfonts/fontello.woff') format('woff');
    font-weight:        normal;
    font-style:         normal;
    }

@font-face {
    font-family: 'snigletregular';
    src: url('webfonts/sniglet.woff2') format('woff2'),
         url('webfonts/sniglet.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'WorkSans_SemiBold';
    src: url('webfonts/WorkSans-SemiBold.woff2') format('woff2'),
         url('webfonts/WorkSans-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
/* GENERAL STYLING */
body {
    margin-bottom:      60px;
    color:              #464646;
    font-size:          18px;
    line-height:        1.3;
    font-family:        'WorkSans_SemiBold', ArialRoundedMTBold, Arial, sans-serif;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    background-color:   #d9edf2;
    background-repeat:  no-repeat;
    }

a {
    text-decoration:    none;
    color:              #7952b3;
    }

/* Major layout stuff */
#hello {
    color:              #424242;
    }

button {
    font-size:          20px;
    background-color:   #464646;
    color:              #d9edf2;
    border-radius:      6px;
    border:             none;
    padding:            2px 8px;
    vertical-align:     20%;
    }

/* RESPONSIVE STUFF */
/* Big screens */
@media (min-width: 769px) {
body {
    background-image:   linear-gradient(-45deg, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%);
    overflow:           hidden;
    }

#hello {
    display:            flex;
    justify-content:    center;
    align-items:        center;
    height:             100vh;
    font-size:          32px;
    }

#robot {
    max-width:          30%;
    max-height:         400px;
    }

#words {
    max-width:          50%;
    margin:             20px;
    padding-bottom:      60px;
    }
footer {
    position:           fixed;
    right:              0;
    bottom:             0;
    }
}

/* Small screens */
@media (max-width: 768px) {
#robot {
    width:              20%;
    margin:             28px 40% 8px;
    }

#words {
    margin:             8px;
    }
}


/* Typography and whitespace stuff */
header {
    margin:             20px 0;
    font-family:        'snigletregular';
    }

header p {
    font-size:          24px;  
    }

#social {
    margin-top:         18px;
    list-style:         none;
    }

#social li {
    display:            inline;
    padding-left:       12px;
    }

#social a {
    font-family:        'fontello';
    font-size:          30px;
    text-decoration:    none;
    color:              #424242;
    transition:         all ease 250ms;
    }

#social a:hover {
    text-shadow:        0 0 4px #424242;
    }

footer {
    padding:            6px 10px;
    color:              #424242;
    }

footer a {
    color:              inherit;
    font-weight:        bold;
    }