*{box-sizing:border-box}html{font-size:10px}body{background:linear-gradient(0deg,#f0f0f0,#fff);color:#373737;font-family:Open Sans,sans-serif;font-size:1.5rem;height:100vh;margin:0;overflow:hidden;padding:0;position:relative;user-select:none;width:100%}#root{height:100%}#canvas{z-index:1}#canvas,#content{height:100%;left:0;position:absolute;top:0;width:100%}#content{overflow-x:hidden;overflow-y:scroll;z-index:2}.container{box-sizing:border-box;margin:0 auto;max-width:1000px;padding:0 2rem;width:100%}#navbar{background-color:hsla(0,0%,100%,0);font-size:1.6rem;left:0;position:fixed;text-transform:uppercase;top:0;width:calc(100% - 15px);z-index:999}#banner,#navbar .container{align-items:center;display:flex;justify-content:space-between;position:relative}#logo{margin:1.6rem 0}#logo,h2,h3{font-family:sans-serif;font-size:2rem;font-weight:700;text-transform:uppercase}h3{text-transform:none}.no-list{list-style:none;padding:0}.no-list li{display:inline-block}.no-list li:not(:last-child){margin-right:1rem}nav .no-list li:not(:last-child){margin-right:1.5rem}.nav-button{color:#373737;padding:3px 7px;text-decoration:none}.nav-button:hover{color:#0466c8}.button,.selected,input[type=submit]{background:linear-gradient(45deg,#0576eb,#0466c8 51%,#0576eb);background-position:0 0;background-size:200% auto;border:none;border-radius:5px;box-shadow:2px 2px 3px #d4e3f2;color:#fff;cursor:pointer;display:inline-block;font-family:Open Sans,sans-serif;font-size:1.6rem;margin:0 auto;padding:5px 8px;text-decoration:none;text-transform:uppercase;transition:transform .3s}.button:hover,.selected:hover,input[type=submit]:hover{background:linear-gradient(225deg,#0576eb,#0466c8 51%,#0576eb);color:#fff;transform:scale(1.015)}#header-menu{background-image:url(https://ktomilin.com/images/menu.png);cursor:pointer;display:block;height:28px;position:absolute;right:2rem;top:-.55rem;transition:transform .3s;width:28px}#header-menu:hover{transform:scale(1.035)}.menu-open{display:block!important}#about{padding-top:10rem}#banner{flex-direction:row-reverse;overflow:hidden;padding-left:0}#main-photo{flex-grow:0;flex-shrink:0;height:486px;width:432px}#banner-text{flex-grow:1;max-width:500px;min-width:260px}#banner-text h1{font-family:sans-serif;font-size:3.6rem;margin:0}#banner-text h1 span{display:block;font-size:4.8rem}#banner-text h2{font-family:sans-serif;margin:0}#banner-location{margin:1rem 0 0;padding-left:2rem;position:relative}#banner-location:before{background-image:url(https://ktomilin.com/images/location.png);background-repeat:no-repeat;background-size:cover;content:"";height:1.6rem;left:0;position:absolute;top:0;width:1.6rem}#banner-buttons{margin:2rem 0 3rem}.background{background-color:#fbfbfb;box-shadow:0 0 15px #dbdbdb}#skills-list{display:block!important;padding:5rem 2rem}#skills-list ul{align-items:center;display:flex;justify-content:space-around;margin:5rem 0 0}#skills-list ul li span{color:#acacac;display:block;font-family:sans-serif;font-size:2rem;margin-top:-2rem;width:64px}.icon{margin:0;position:relative;width:88px;z-index:1}.icon img{background-color:#fbfbfb;box-sizing:content-box;padding:0 12px 2.5rem;transition:transform .3s,background-color .3s;width:64px}.icon img:hover{background-color:hsla(0,0%,98%,0);transform:translateY(-5px)}.icon figcaption{bottom:1rem;font-family:sans-serif;font-weight:700;left:0;overflow-x:hidden;position:absolute;text-align:center;width:88px;z-index:-1}#github-link-container,#skills-certifications{margin:3rem 0 0;text-align:center}#github-link-container{margin-top:5rem}.profile-link{color:#373737;font-size:1.6rem;font-weight:700;text-decoration:none}.profile-link:hover{color:#0466c8;text-decoration:underline}#projects{padding:5rem 0 7rem}.project-tile{display:flex;flex-wrap:wrap;margin:0;width:100%}.project-tile li{margin:4rem 0 0!important;min-width:240px;width:33%}#contact-info ul li a,.project-tile li a{color:#373737;text-decoration:none}.project-preview{background-color:#fff;border-radius:5px;box-shadow:2px 2px 7px #b5b5b5;cursor:pointer;height:300px;margin:0 auto;overflow:hidden;position:relative;transition-duration:.3s;transition-property:transform;width:240px}.project-preview:after{background:linear-gradient(0deg,#fff,hsla(0,0%,100%,0));bottom:0;content:"";height:45px;position:absolute;width:240px;z-index:300}.project-preview:hover{transform:scale(1.025)}.project-preview img{border-top-left-radius:5px;border-top-right-radius:5px;height:135px;object-fit:cover;width:100%}.project-preview figcaption{padding:1rem}#no-projects{color:#acacac;font-family:sans-serif;font-size:2rem;margin-top:5rem;text-align:center}.projects-misc-container{font-size:1.6rem;margin-top:5rem;text-align:center}#contact{padding:5rem 0}#contact-info{margin:5rem 0 0;text-align:center}#contact-info form{margin-bottom:5rem}input[type=email]{border:1px solid #ccc;border-radius:4px;box-shadow:inset 0 1px 3px #ddd;display:block;font-family:Open Sans,sans-serif;margin:0 auto;padding:1.5rem;text-align:center;transition:transform .3s;width:300px}input[type=email]:hover{transform:scale(1.015)}#contact-info ul{margin-top:3rem}#contact-info label{pointer-events:none}#contact-info label,input[type=email]{display:block;margin-bottom:2rem}.contact-misc{padding-bottom:5rem}.contact-misc h3{color:#0466c8}.contact-misc p{font-size:1.6rem}#contact-error{color:red}footer{background:#dfdfdf;background:linear-gradient(0deg,#cdcdcd,#efeded);padding:2.5rem 0;text-align:center}.footer-link,.link{color:#373737;cursor:pointer;text-decoration:none}.footer-link:hover,.link:hover{color:#0466c8;text-decoration:underline}.link{color:#0466c8}footer ul{margin:3rem 0}footer ul li:not(:last-child){border-right:1px solid #373737;padding-right:1.5rem}#popup{background-color:rgba(0,0,0,.85);height:100vh;left:0;overflow-y:auto;position:absolute;top:0;width:100%;z-index:999}#popup-container{margin:5rem auto;max-width:700px;padding:0 .5rem;width:100%}#popup-close{color:#fbfbfb;font-family:sans-serif;font-size:2.5rem;padding:1rem .2rem;text-align:right}#popup-close-button{cursor:pointer}#popup-close-button:hover{font-weight:700}#popup-content{background-color:#fbfbfb;border-radius:.5rem;padding:3rem 4rem;width:100%}#popup-content h1{text-transform:uppercase}#popup-content h2,#popup-content h3{text-transform:none}#popup-content h2{font-size:1.6rem}#popup-content h3{font-size:1.4rem}#popup-content hr{border-bottom:none}#popup-content strong{font-family:sans-serif;font-weight:700}#popup-error{font-size:1.6rem;margin-bottom:1rem;text-align:center}#popup-error p{margin-bottom:2rem}.lds-ellipsis{display:block;height:80px!important;margin:0 auto;position:relative;width:80px!important}.lds-ellipsis div{animation-timing-function:cubic-bezier(0,1,1,0);background:#0466c8;border-radius:50%;height:13px!important;position:absolute;top:33px;width:13px!important}.lds-ellipsis div:first-child{animation:lds-ellipsis1 .6s infinite;left:8px}.lds-ellipsis div:nth-child(2){animation:lds-ellipsis2 .6s infinite;left:8px}.lds-ellipsis div:nth-child(3){animation:lds-ellipsis2 .6s infinite;left:32px}.lds-ellipsis div:nth-child(4){animation:lds-ellipsis3 .6s infinite;left:56px}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(24px)}}#popup .lds-ellipsis{margin-top:calc(50vh - 40px)}@media(max-width:814px){.project-tile li{width:49.95%}}@media(max-width:599px){#navbar .no-list li{display:block;margin:2rem 0 0!important;text-align:center}#navbar .container{display:block}#banner{padding-left:2rem}#banner-gradient{padding-top:7rem}#skills-list ul{flex-wrap:wrap}#main-photo{display:none}.project-tile li{width:99.95%}input[type=email]{width:250px}}