/*! Personal Website - CSS Version 0.0.2 Copyright 2021, Stanley Owen stanleyowen.github.io */@font-face{font-family:Chilanka;font-style:normal;font-weight:400;font-display:swap;src:url(WWXRlj2DZQiMJYaYRoJPKdAiZQTP8MU.woff2) format('woff2');unicode-range:U+0307,U+0323,U+0964-0965,U+0D02-0D7F,U+200C-200D,U+20B9,U+25CC}@font-face{font-family:Chilanka;font-style:normal;font-weight:400;font-display:swap;src:url(WWXRlj2DZQiMJYaYRoJXKdAiZQTP.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}body{margin:0;padding:0;min-height:100vh;min-width:300px;color:#212121;background-color:#fff;scroll-behavior:smooth;transition:all .4s;background:url(../img/background-wrapper.webp);-webkit-tap-highlight-color:transparent;font-family:Chilanka,sans-serif}body.dark{color:#fff;background-color:#212121}body.dark .about,body.dark .btn__changeMode,body.dark .contact,body.dark .form__contact,body.dark .navbar,body.dark .projects__card{background-color:#333}body.dark .btn__scrollTop,body.dark .contact__sendBtn,body.dark .footer,body.dark .form input,body.dark .form label,body.dark .form textarea,body.dark .get_in_touch,body.dark .main__button,body.dark .modal__body a,body.dark .navbar a,body.dark .navbar__logo,body.dark .projects__detail{color:#fff}body.dark .contact__body .animation__underline:after,body.dark .modal__body .animation__underline:after,body.dark .navbar .animation__underline:after{background:#fff}body.dark .modal__closeBtn,body.dark .modal__container{background-color:#333;color:#fff}body.dark .main__title,body.dark .projects__viewMore{color:#79c3ff}body.dark .navbar{box-shadow:none}body.dark .footer{background-color:#191919}body.dark .projects__viewMore{border-color:#79c3ff}body.dark .main__button{box-shadow:2px 1000px 1px #212121 inset}body.dark .projects__viewMore:hover{background-color:#79c3ff;color:#212121}body.dark .footer__socialBtn a:hover{background-color:#fff;color:#212121}body.dark .main__divider{background-image:linear-gradient(315deg,#0cbaba 0,#f400eb 74%)}a,button{user-select:none;cursor:pointer}#javascript__required{text-align:center;color:#a6d400;margin:0 auto 50px auto;width:80%;max-width:978px;position:relative;z-index:10001}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#3498db;-webkit-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite;z-index:1001}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#e74c3c;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#f9c922;-webkit-animation:spin 1s linear infinite;animation:spin 1s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}#loader-wrapper .loader-section{position:fixed;top:0;width:51%;height:100%;background:#222;z-index:1000;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#loader-wrapper .loader-section.section-left{left:0}#loader-wrapper .loader-section.section-right{right:0}.loaded #loader-wrapper .loader-section.section-left{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:all .7s .3s cubic-bezier(.645,.045,.355,1);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.loaded #loader-wrapper .loader-section.section-right{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-transition:all .7s .3s cubic-bezier(.645,.045,.355,1);transition:all .7s .3s cubic-bezier(.645,.045,.355,1)}.loaded #javascript-required{opacity:0;display:none}.loaded #loader{opacity:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.loaded #loader-wrapper{visibility:hidden;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);-webkit-transition:all .3s 1s ease-out;transition:all .3s 1s ease-out}.navbar{position:fixed;overflow:hidden;top:0;width:100%;min-width:300px;z-index:1;transition:all .4s;background-color:#fff;box-shadow:0 0 11px 0 #9c9b98}.navbar a{color:#212121;text-decoration:none;font-weight:700;padding:18px 20px}.navbar__menu{display:block;float:right}.navbar__logo{float:left;font-size:17px}.toggleNavbar{display:none;position:absolute;top:0;right:0}.animation__underline{text-decoration:none;display:inline-block;padding:5px;position:relative}.animation__underline:hover:after{width:100%;left:0}.animation__underline:after{bottom:0;content:"";display:block;height:3px;left:50%;position:absolute;background:#212121;transition:width .3s ease 0s,left .3s ease 0s;width:0}.btn__scrollTop{position:fixed;bottom:15vh;right:2.25vw;padding:15px;display:none;color:#212121;z-index:1}.btn__changeMode{position:fixed;border-radius:100%;transition:box-shadow .5s;background:#1a73e8;bottom:4vh;right:2vw;padding:15px;outline:0;border:none;color:#fff;z-index:1}.btn__changeMode:hover{box-shadow:0 0 11px #9c9b98}.main{margin:auto 30px;padding-top:180px;transition:all .4s}.main__title{text-align:center;font-size:50px;color:#1976d2}.main__divider{width:30%;border:none;height:10px;border-radius:25px;transition:all .4s;background:linear-gradient(to right,#89253e,#3a6186);background:-webkit-linear-gradient(to right,#89253e,#3a6186)}.main__button{display:block;width:15%;color:#212121;text-align:center;margin:20px auto;padding:15px 20px;transition:all .4s;border-radius:10px;text-decoration:none;background-color:#6eb1ff;border:solid 3px transparent;box-shadow:2px 1000px 1px #fff inset}.main__button:hover{background-color:#1976d2}.animation__picture{display:block;margin-top:150px;width:100%}.animation__message{display:block;margin-left:auto;margin-right:auto;width:auto}.about{display:block;background-color:#1a73e8;transition:all .4s}.body__container{display:flex}.body__about,.body__aboutLeft,.body__aboutRight{display:flex;flex:.1;flex-direction:column;color:#fff;padding:20px;text-align:center}.body__aboutLeft,.body__aboutRight{font-size:250px}.body__about{margin:auto;flex:.8;width:50%;color:#fff}.projects{margin:100px 10px}.projects h1{text-align:center}.projects__container{display:grid;grid-template-columns:auto auto auto;margin-bottom:50px;padding:10px}.projects__card{position:relative;height:50px;margin:10px;padding:15px 10px;display:inline-block;background-color:#fff;border-radius:10px;border:1px solid #212121;transition:all .3s;box-sizing:border-box}.projects__card:hover{background-color:#f0f0f0;height:170px}.projects__title{font-weight:700;font-size:20px}.projects__description{opacity:0}.projects__card:hover .projects__description{opacity:1}.projects__detail{opacity:0;float:right;border:none;outline:0;background:0 0;cursor:pointer}.projects__card:hover .projects__detail{opacity:1}.projects__detail:hover{color:#1a73e8!important}.isCentered{text-align:center}.projects__viewMore{width:50%;margin:auto;height:auto;color:#1a73e8;font-size:20px;font-weight:700;text-align:center;padding:15px 25px;transition:all .4s;border-radius:100px;text-decoration:none;background-color:none;border:2px solid #1a73e8}.projects__viewMore:hover{background-color:#1976d2;color:#fff}.modal{left:0;top:0;z-index:2;width:100%;height:100%;overflow:auto;visibility:hidden;opacity:0;position:fixed;transition:all .5s;background-color:rgba(255,255,255,.5)}.modal__bodyBtn{display:inline-block;width:100%;margin:auto;color:#1a73e8;font-size:20px;font-weight:700;text-align:center;padding-top:15px;padding-bottom:15px;transition:all .4s;border-radius:100px;text-decoration:none;background-color:none;border:2px solid #1a73e8}.modal__bodyBtn:hover{background-color:#1976d2;color:#fff}.modal__container{width:80%;padding:15px;margin:5% auto;border-radius:15px;border:1px solid #888;background-color:#f0f0f0}.modal__title{display:block;padding:10px;font-weight:700;text-align:center;border-bottom:1px solid}.modal__closeBtn{float:right;opacity:1;font-size:20px;cursor:pointer}.modal__closeBtn:hover{opacity:.7;text-decoration:none}.modal__body{padding:10px;text-decoration:none}.modal__bodyImg{display:block;width:100%}.contact{position:relative;margin:auto 50px;margin-bottom:-50px;border-radius:10px;color:#fff;background-color:#838dd3;transition:all .4s}.contact__container{display:grid;grid-template-columns:auto auto;padding:10px}.contact__body,.contact__me{padding:15px}.contact__body .animation__underline:after{background-color:#fff}.contact__body a{color:#fff}.contact__btn{display:inline-block;width:50%;margin:auto;height:auto;color:#fff;font-size:20px;text-align:center;padding:15px 25px;transition:all .4s;border-radius:100px;text-decoration:none;background-color:none;border:2px solid #fff}.contact__btn:hover{background-color:#fff;color:#212121}.get_in_touch{text-align:center}.form{display:block;min-width:300px}.contact__form{padding:15px}.contact__infoField{position:relative;font-weight:700;display:inline-block;overflow:hidden;width:100%}.contact__infoField .contact__inputField{width:100%;border:none;display:block;outline:0;padding:10px;font-size:20px;background-color:transparent;border-bottom:1px solid #7c7c7c}.contact__onFocus{transition:all .5s;display:inline-block;bottom:0;left:-100%;position:absolute;width:100%;height:2px;background:#1a73e8}body.dark .contact__onFocus{background:#fff}.contact__infoField .contact__inputField:focus+.contact__onFocus{left:0}#form{padding-top:120px}.form__contact{margin:20px;margin-bottom:40px;padding:10px;border-radius:10px;transition:all .4s;background-color:#f0f0f0}.form__container{display:grid;grid-template-columns:auto auto}.contact__formControl{margin:10px;color:#212121;border-radius:10px}.contact__sendBtn{width:auto;display:block;outline:0;margin:auto;height:auto;color:#1a73e8;font-size:20px;text-align:center;padding:15px 25px;transition:all .4s;border-radius:100px;text-decoration:none;background-color:transparent;border:2px solid #1a73e8}.contact__sendBtn:hover{background-color:#1976d2;color:#fff}.footer{z-index:-1;padding:70px 20px 20px 20px;color:#fff;font-weight:700;background-color:#1a73e8;transition:all .4s}.footer__socialBtn{display:grid;grid-template-columns:auto auto auto auto;width:50%;margin:auto}.footer__socialBtn a{width:100%;margin:auto;display:inline-block;width:40px;height:40px;color:#fff;text-align:center;transition:all .4s;padding-top:10px;padding-left:5px;padding-right:5px;border-radius:100%;text-decoration:none;background-color:none;border:2px solid #fff}.footer__socialBtn a:hover{background-color:#fff;color:#1a73e8}.footer__copyright{margin-top:40px;width:100%;text-align:center}.content__transition{display:none}.content__fadeIn{opacity:0;visibility:hidden;transform:translateY(20vh);transition:opacity .6s ease-out,transform 1.2s ease-out;will-change:opacity,visibility}.visible{opacity:1;transform:none;visibility:visible}.message{margin:40px auto}@media only screen and (max-width:1024px){.body__aboutLeft,.body__aboutRight{display:none}.body__about{flex:1}}@media only screen and (max-width:900px){.body__aboutLeft,.body__aboutRight{font-size:320px}.projects__container{grid-template-columns:auto auto}}@media only screen and (max-width:768px){.navbar a{display:block;float:none;text-align:center}.navbar__menu{display:none;float:none}.toggleNavbar{display:block}.main__divider{width:60%}.main__button{width:40%}.body__aboutLeft,.body__aboutRight{flex:.5!important}.projects__container{grid-template-columns:auto}.contact{margin:auto 25px -70px 25px}.contact__me{padding:10px;text-align:center}.contact__container{grid-template-columns:auto}.form__container{grid-template-columns:auto}.footer__socialBtn{width:75%}}@media only screen and (max-width:600px){.animation__message{width:100%;height:auto}}@media only screen and (max-width:480px){.main__divider{width:80%}.main__button{width:50%}.footer__socialBtn{width:100%}}