html { background: #fad0c4; /* Old browsers */
background: -moz-linear-gradient(45deg, #fad0c4 0%, #ffd1ff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #fad0c4 0%,#ffd1ff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #fad0c4 0%,#ffd1ff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fad0c4', endColorstr='#ffd1ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
font-family: 'Lato', sans-serif;
height: 100vh;
}

h1, h2 {font-weight:900}
h1 {color: #d6b1b4; font-size:10.5rem; letter-spacing: -0.5rem; margin:12rem 0 0.1rem -10px}
h2 {color: #6b595a; font-size:1.5rem; margin: 0 0 5rem}
h3 {margin-top: 2rem; font-weight: normal}
p {color: #6b595a; font-size:1.2rem; font-weight: 700; margin: 0 0 1rem}
a {color: #6b595a}
a:hover {text-decoration: underline}
.social a {margin-right: 0.6rem }

.outer {margin-left: 20%}
.social {margin:5rem 0 0 0}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
h1 {color: #d6b1b4; font-size:17rem; letter-spacing: -0.5rem; margin:12rem 0 0.1rem -10px}
h2 {color: #6b595a; font-size:4rem; margin: 0 0 8rem}
p {color: #6b595a; font-size:2.7rem; font-weight: 700; margin: 0 0 1rem}	.outer {margin:0 10% 0 10%}
.im, .social {font-size:4rem!important; margin-top: 5rem}
.social a {margin-right: 1.3rem }
}