/* Styles for my Final Project Template */
 * {
     padding:0;
     margin:0;
     box-sizing:border-box;
 }

 @font-face {
     font-family: 'montserratregular';
     src: url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
     url('../fonts/montserrat-regular-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }

 @font-face {
     font-family: 'montserratextrabold';
     src: url('../fonts/montserrat-extrabold-webfont.woff2') format('woff2'),
     url('../fonts/montserrat-extrabold-webfont.woff') format('woff');
     font-weight: normal;
     font-style: normal;

 }


 body {
     background: #cbc2ae;
     font-family:montserratregular, serif;
 }

 #wrapper {
     background:#333;
     margin:20px auto;
     width:940px;
     overflow:hidden;
 }

 header {
     background:#222;
     width:200px;
     float:left;
 }

 main {
     background:#ddd;
     float:right;
     width:740px;
 }

 footer {
     clear:both;
     background:#222;
     height:40px;
 }

 /* smaller element styles */
 ul {
     list-style-type:none;
 }

 .home main ul {
     display:flex;
     align-items:center;
 }

 .home main li {
     margin-left:20px;
 }

 .home main li img {
     width:124px;
 }

 #names {
     margin-bottom:40px;
 }

 #names li {
     width:124px;
     text-align:center;
     margin:10px 0 10px 20px;
 }

 nav li {
     font-size:1.2em;
     background:#333;
     text-align:center;
     border-top:1px #aaa solid;
 }

 nav li:last-of-type {
     border-bottom:1px #aaa solid;
 }

 .about nav li:nth-child(1) a,
 .projects nav li:nth-child(2) a,
 .leetcode nav li:nth-child(3) a,
 .candles nav li:nth-child(4) a,
 .contact nav li:nth-child(5) a {
     background:#bbb;
     color:#225;
 }

 nav li a:hover {
     background: #969696;
     color:#225;
     font-size:1.05em;
     transition:0.3s;
 }

 nav li a {
     color:#ddd;
     display:block;
     text-decoration:none;
     padding:20px 0;
     transition:0.3s;
 }

.top {
     position: fixed;
     bottom: 20px;
     right: 20px;
     background-color: #333;
     color: #fff;
     padding: 10px 20px;
     border-radius: 5px;
     text-decoration: none;
 }

 .top:hover {
     background-color: #969696;
 }

 footer ul {
     display:flex;
     justify-content:center;
 }

 footer li {
     margin:10px 25px;
     color:#ddd;
     line-height:20px;
     height:20px;
 }

 footer li a {
     color:#ddd;
 }

 /* main width:740px, typical main and aside on a 940px page is 63% and 37% accounting for 20px spacing. on the 740px page, widths would be 454px and 266px. */

 #seam-carver ul {
     width:454px;
     float:left;
     padding-left:20px;
 }

 #seam-carver aside {
     width:266px;
     float:right;
     padding-right:20px;
 }

 .blueberry .pager {
     margin-bottom:10px;
 }

 /* to add top border, subtract 20px from each width for div shrinkage (margin) */
 .about img {
     float:right;
     margin-right:30px;
 }


 .projects #fractal {
     width:700px;
     border-top:1px #222 solid;
     padding-top:30px;
     clear:both;
 }

 .projects #fractal ul {
     float:right;
     width:434px;
 }

 .projects #fractal aside {
     width:246px;
     float:left;
 }

 .projects #fractal aside h3 {
     margin-left:0;
 }

 .leetcode main {
     padding-bottom:20px;
 }

 .leetcode main ul {
     clear:both;
     margin-left:30px;
     margin-bottom:85px;
 }

 .leetcode main li {
     margin-bottom:30px;
 }

 .leetcode .full {
     margin-top:10px;
     width:680px;
     height:20px;
     border-radius:10px;
     overflow:hidden;
 }

 .leetcode .bar {
     height:100%;
     transition:0.3s;
 }

 .leetcode #easy-full {
     background:#c8f1c8;
 }

 .leetcode #easy-bar {
     width:1.28%;
     background:lightgreen;
 }

 .leetcode #medium-full {
     background:#ffe8a1;
 }

 .leetcode #medium-bar {
     width:0.25%;
     background: #e8a143;
 }

 .leetcode #hard-full {
     background:#f3aeae;
 }

 .leetcode #hard-bar {
     width:0;
     background:#ea4f4f;
 }

 .thx img {
     display:block;
     margin:0 auto 30px auto;
 }

 .contact form {
     width:680px;
     margin: 0 auto 20px auto;
 }

 .contact fieldset {
     padding:10px;
     border-radius:5px;
     border:1px dotted #225;
 }

 .contact label {
     display:block;
     margin-bottom:5px;
     font-weight:bold;
     font-size:1.1em;
 }

 .contact input {
     margin-bottom:10px;
     height:30px;
     width:100%;
 }

 .contact input[type="submit"] {
     font-family: 'montserratregular', serif;
     width:50%;
     display:block;
     margin:auto;
     font-size:0.9em;
     transition:0.3s;
 }

 .contact input[type="submit"]:hover {
     font-size:1em;
     transition:0.3s;
 }

 .contact textarea {
     width:100%;
     height:110px;
     margin-bottom:10px;
 }

 .thx main {
     height:500px;
 }

 .candles img,
 .mission img {
     margin-left:30px;
     margin-bottom:20px;
 }

 /* typography */
 p {
     font-size:1.2em;
 }

 h1 {
     font-size:3em;
     color:#225;
 }

 h2 {
     font-size:1.4em;
     color:#225;
 }

 h3 {
     font-size:1.5em;
     color:#225;
 }

 header h1 {
     background:#ddd;
     color:#000;
     font-family: 'montserratextrabold', serif;
     margin:10px;
     padding-left:10px;
 }

 header h1 a {
     text-decoration:none;
     color:#000;
     display:block;
     font-size:1em;
     transition: 0.3s;
     padding:10px 0;
 }

 header h1 a:hover {
     font-size:1.15em;
     transform: translate(10px, 0);
 }

 header h2 {
     color:#eee;
     margin:50px 0 5px 9px;
 }

 header h3 {
     font-size:1em;
     color:#eee;
     margin-left:10px;
     margin-bottom:10px;
 }

 main h1 {
     margin:60px 50px 20px 28px;
 }

 .home main h1 {
     float:left;
     width:190px;
     margin:60px 50px 60px 30px;
     line-height:60px;
 }

 .home main #topic {
     width:680px;
     font-size:1.2em;
     text-align:center;
     margin:0 0 0 30px;
     border-top:1px #225 solid;
 }

 .home main h2 {
     width:680px;
     clear:both;
     margin:0 0 30px 30px;
     font-size:2.1em;
     padding:20px 0;
     border-top:1px #225 solid;
 }

 .home main h3 {
     float:left;
     margin:60px 50px 60px 20px;
     width:400px;
     line-height:30px;
 }

 .about main h1 {
     margin-left:30px;
     margin-bottom:30px;
 }

 .about main p {
     margin-left:30px;
     line-height:1.5em;
     text-indent:1.5em;
     width:385px;
     float:left;
 }

 .about main p:last-of-type {
     margin-bottom:30px;
 }

 main h2 {
     margin-left:30px;
     margin-bottom:30px;
 }

 .projects main h3 {
     margin-bottom:30px;
 }

 .leetcode main h4 {
     display:inline;
     width:auto;
 }

 .leetcode main p {
     padding-right:50px;
     padding-top:10px;
     display:block;
     margin-left:28px;
     font-size:0.8em;
     border-top:#000 solid 1px;
 }

 .leetcode main h1 a {
     color:#225;
 }

 .thx main h3 {
     text-align:center;
 }

 .mission main p,
 .candles main p {
     margin:0 30px 10px 30px;
     line-height:1.2em;
 }

 .candles main p {
     margin-bottom:20px;
 }

 .candles main a {
     width:55%;
     display:block;
     margin:0 auto;
     text-align:center;
     padding:10px;
     border:1px solid #225;
     border-radius:5px;
     color:#225;
     font-size:1em;
     transition:0.3s;
 }

 .candles main a:hover {
     font-size:1.1em;
     transition:0.3s;
 }

 .mission main p:last-of-type {
     margin-bottom:35px;
 }