main.css

@font-face{font-family:'Circular Std Book';font-style:normal;font-weight:normal;src:local('Circular Std Book'),url('fonts/CircularStd-Book.woff') format('woff')}@font-face{font-family:'Circular Std Medium';font-style:normal;font-weight:normal;src:local('Circular Std Medium'),url('fonts/CircularStd-Medium.woff') format('woff')}@font-face{font-family:'Circular Std Bold';font-style:normal;font-weight:normal;src:local('Circular Std Bold'),url('fonts/CircularStd-Bold.woff') format('woff')}@font-face{font-family:'Circular Std Black';font-style:normal;font-weight:normal;src:local('Circular Std Black'),url('fonts/CircularStd-Black.woff') format('woff')}html{scroll-behavior:smooth}body{font-family:"Circular Std Book",sans-serif;background:#F4F4F7;color:#263238;height:100%;margin:0;font-size:16px}.main{min-height:100%;margin-bottom:-60px}.push{height:60px}.footer{height:20px;padding:20px;background-color:#263238}.copyright{color:#F4F4F7;-ms-flex-item-align:center;align-self:center}.footer-icon{padding-right:5px;width:20px;height:20px}a:link,a:visited{text-decoration:none;opacity:0.7;color:#80CCC4}a:hover,a:active{text-decoration:none;opacity:1;color:#B2FFF7}h1{font-family:"Circular Std Medium",sans-serif;font-size:30px;line-height:1.2em;padding:20px 0;margin-bottom:0;position:relative;text-align:center;overflow:hidden}h3{font-weight:300}.navigation{background-color:#263238;width:100vw;text-align:center;list-style-type:none;overflow:hidden;position:fixed;vertical-align:middle;z-index:999}.navigation ul{padding:0}.navigation li{text-align:center;display:inline-block;padding:0 10px}.header{background-color:#263238;padding:20px 50px 20px;text-align:center}.header h1 a{margin-bottom:0;border:none;color:#F4F4F7;text-decoration:none;opacity:1}#me,#education,#experience,#teaching,#projects,#project-page{padding:30px 10% 0}#projects{padding-bottom:30px}.title span{position:relative;display:inline-block}.title span:before,.title span:after{content:'';position:absolute;top:51%;border-bottom:1px solid #ccc;width:35vw;margin:0 20px}.title span:before{right:100%}.title span:after{left:100%}.about-me{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.about-me-header{text-align:center;grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:2}.about-me-image{grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3}.about-me-picture{width:200px;height:200px;padding:0 20px;border-radius:50%;display:block;margin-left:auto;margin-right:auto}.about-me-text{grid-column-start:2;grid-column-end:3;grid-row-start:2;grid-row-end:3}.button{padding-top:10px;text-align:center}.button a{border:1px solid #80CCC4;border-radius:5px;padding:8px;opacity:1}.button a:hover{background-color:#80CCC4;color:#F4F4F7}.education-box,.experience-box,.teaching-box{display:grid;grid-template-columns:70px auto;grid-template-rows:auto;margin-top:30px}.icon{grid-column:0.5;margin-right:20px;width:50px;height:50px;border-radius:50%}.header-line{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.right{text-align:right}.school,.company,.position{font-family:"Circular Std Bold",sans-serif;font-size:18px}.skills{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.skill{background:rgba(129,211,249,0.5);font-size:12px;margin-right:10px;margin-bottom:10px;padding:3px 10px;text-transform:lowercase}.all-projects{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-right:-10px}.all-projects::after{content:'';width:250px}.project{position:relative;min-width:250px;height:250px;margin:30px 10px 0 0}.project a{opacity:1}.project:hover .overlay{opacity:0.9}.project-icon{width:250px;height:250px;-o-object-fit:cover;object-fit:cover}.overlay{position:absolute;top:0;height:100%;width:100%;opacity:0;-webkit-transition:0.5s ease;transition:0.5s ease;background-color:#263238}.project-text{color:#F4F4F7;position:absolute;width:200px;font-size:26px;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center}.project-description{font-size:14px}@media screen and (max-width:900px){.about-me{display:grid;grid-template-columns:auto;grid-template-rows:auto auto auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.about-me-image{grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:3}.about-me-header{grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:2;text-align:center}.about-me-text{grid-column-start:1;grid-column-end:2;grid-row-start:3;grid-row-end:4}}.calendar{padding:0 10%;margin-bottom:30px}.project-page-image{margin:20px 0;text-align:center}.project-page-image img{width:80%}