/* This is the stylesheet for Alyssa's website */

*{margin:0; padding:0}
*{box-sizing:border-box;}

body{font-family: 'Raleway', sans-serif; font-size:15px; color: #fff;line-height:2em }
h1,h2,h3,h4,h5,h6{color:#eee; font-family: 'Happy Monkey', cursive; }
h1{font-size:4.5em;line-height:1em; text-align:center;padding:50px 0; }
h2{font-size:4em;line-height:1em}
h3{font-size:3em;line-height:1em}
h4{font-size:2em;line-height:1em}
h5{font-size:1.5em;line-height:1em}
h6{font-size:1.2em;line-height:1em}

section{background-color:#888;border: solid 0px yellow; width:100%; padding: 25px 2%; }
.dark{background-color: #666}
.first{border:solid 1px blue; padding:0px; margin:0px; background-color:#e0e0e0; }
.full{width:100%}
.half{width:49%; display:inline-block; padding:25px 2%; vertical-align:top; }
.one-third{width:33%; display:inline-block; padding:25px 2%; vertical-align:top;}
.two-thirds{width:66%; display:inline-block; padding:25px 2%; vertical-align:top;}
.one-quarter{width:24.5%; display:inline-block; padding:25px 2%; vertical-align:top;}
.circle{background-color:#fff; padding:0px; border:solid 1px #000;border-radius: 50%; overflow:hidden; } 
.circle img{width:100%; height:100%; padding:0; margin:0; vertical-align:middle }
.circle p{text-align:center; font-size:4em;line-height:1em}

.hero{background-color:#000; width:100vw; height:80vh; padding:2vw}
.hero h1, .hero p{color:#fff; text-align:center; }
.hero p{font-size:2em;}
footer{height:200px; width:100vw; background-color: #222}
footer p{font-size: 2em; text-align:center; padding-top:80px }


@media only screen and (max-width: 800px) {
  .half, .one-third, .one-quarter, .two-thirds{width:100%; padding:20px 1vw; display:block; }
  div.hero{height:auto;}
}