main.css

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}:root{scroll-behavior:smooth}@media only screen and (min-width: 1488px){:root{font-size:90%}}@media only screen and (max-width: 1488px){:root{font-size:62.5%}}@media only screen and (max-width: 1024px){:root{font-size:50%}}a{color:black;text-decoration:none}*,*::before,*::after{position:relative;box-sizing:border-box;backface-visibility:hidden}input,button,textarea{border:none;outline:none}input,label,button,a,textarea{display:block;display:block;margin:0px;padding:0px}.u-container{width:100%;max-width:95rem;margin:auto}.u-margin-auto{margin:auto}.u-margin-sm-top{margin-top:2rem}.u-margin-sm-bottom{margin-bottom:2rem}.u-margin-md-top{margin-top:4rem}.u-margin-md-bottom{margin-bottom:4rem}.u-margin-lg-top{margin-top:6rem}.u-margin-lg-bottom{margin-bottom:6rem}.u-text-align-center{text-align:center}.u-text-align-left{text-align:left}.main-title{font-size:4rem;font-family:"Oswald",sans-serif;letter-spacing:3px;text-transform:capitalize;text-align:center;font-weight:bolder;color:#f2f2f2}.sub-title{font-size:3.2rem;font-family:"Oswald",sans-serif;letter-spacing:3px;text-transform:uppercase;text-align:center;font-weight:lighter;color:#3a3a3a}.sub-title::before{content:"";position:absolute;top:-2rem;right:0px;left:0px;transform:translateX(0%);width:15rem;height:0.2rem;margin:auto;background-color:#3a3a3a}.tertiary-title{font-size:2.8rem;font-family:"Oswald",sans-serif;letter-spacing:3px;text-transform:capitalize;text-align:center;font-weight:lighter;color:#627178}.text{font-size:1.7rem;line-height:2.5rem;letter-spacing:2px;word-spacing:3px;color:#797979;font-family:"Arvo",serif;font-weight:lighter}.link{font-family:"Arvo",serif;font-size:1.7rem;color:#6498b2;cursor:pointer;display:inline;text-transform:capitalize;transition:all 300ms ease 0s}.link::before{content:"";position:absolute;right:0px;bottom:-4px;left:0px;height:0.1rem;background-color:#002f43;transform:scaleX(0);transition:all 300ms ease 0s;transform-origin:left}.link:hover,.link:active{transition:all 300ms ease 0s;color:#002f43}.link:hover::before,.link:active::before{transition:all 300ms ease 0s;transform:scaleX(1)}@keyframes splash{0%{opacity:1;transform:scale(0)}100%{opacity:0;transform:scale(2)}}.brand{display:flex;justify-content:center;align-items:center}.brand__img-box{width:100%;max-width:8rem}.brand__img{display:block;width:100%;margin:auto}.brand__name{padding:1.5rem;font-size:3rem;letter-spacing:20px;text-transform:uppercase;font-family:"Unica One",cursive;font-weight:bolder;color:#e8e8e8}@media only screen and (max-width: 591px){.brand__name{font-size:2rem}}@media screen and (max-height: 591px){.brand__name{font-size:2rem}}.section{padding-bottom:5rem;padding-top:12rem;padding-left:15rem;padding-right:15rem;z-index:0}@media only screen and (max-width: 1024px){.section{padding-left:3rem;padding-right:3rem;padding-top:18rem}}@media only screen and (max-width: 591px){.section{padding-left:1.7rem;padding-right:1.7rem;padding-top:7rem}}.section--color-primary{background-color:#112832;background-image:radial-gradient(circle, #293e47,#112832 70%)}.section--color-secondary{background-color:#e8e8e8}.section--color-tertiary{background-color:#f2f2f2}.img-box{width:100%;height:100%;max-width:32rem;max-height:32rem;overflow:hidden;margin:auto}.img-box--round{border-radius:100%}.img-box__img{display:block;height:100%;width:100%;object-fit:cover}.skill-container{display:grid;grid-template-areas:"one two three";justify-items:center}@media only screen and (max-width: 1150px){.skill-container{grid-template-areas:"one two"
 "three three";justify-items:center;justify-content:stretch}}@media only screen and (max-width: 1024px){.skill-container{grid-template-areas:"one"
 "two"
 "three";text-align:center}}.skill-card{width:100%;max-width:27rem;padding:1rem}@media only screen and (max-width: 1150px){.skill-card{max-width:100%;padding:0px 4rem}}@media only screen and (max-width: 1024px){.skill-card{padding:0px 2rem;margin-bottom:12rem}}.skill-card__img-box{width:100%;max-width:16rem;margin:auto;margin-bottom:6rem}.skill-card__img{width:100%;margin:auto}.skill-card__title{font-family:"Oswald",sans-serif;text-transform:uppercase;font-size:2.5rem;word-spacing:3px;letter-spacing:1px;text-align:center;color:#112832}.skill-card__title::before{content:"";position:absolute;right:0px;bottom:-2rem;left:0px;height:0.3rem;background-color:#aeaeae}.skill-card__header{margin-bottom:3.5rem}.skill-card__footer{margin-bottom:3rem}.skill-card__sub-title{font-size:2rem;font-family:"Oswald",sans-serif;word-spacing:2px;letter-spacing:1px;color:#3d3d3d;text-transform:capitalize}.skill-card__sub-title:not(:last-child){margin-bottom:2rem}.skill-card__section:not(:last-child){margin-bottom:4rem}.skill-card__link{line-height:3rem}.skill-card__link::after{content:",";display:block;position:absolute;right:-.2rem;bottom:-.7rem}.skill-card__link:last-child::after{content:".";right:-0.35rem}.skill-card__link:not(:last-child){margin-right:1rem}.skill-card__1{grid-area:one}.skill-card__2{grid-area:two}.skill-card__3{grid-area:three}.project-card{max-width:35rem;width:100%;height:23rem}@media only screen and (max-width: 1024px){.project-card{margin:auto;margin-bottom:4rem;max-width:100%;height:36rem}}@media only screen and (max-width: 591px){.project-card{margin:auto;margin-bottom:4rem;height:60rem;max-width:40rem}}.project-card:hover .project-card__container{transition:all 300ms ease 0s;transform:rotateY(180deg)}@media only screen and (max-width: 1024px){.project-card:hover .project-card__container{transform:none}}.project-card__container{width:100%;height:100%;transform-style:preserve-3d;backface-visibility:visible;transition:all 300ms ease 0s}@media only screen and (max-width: 1024px){.project-card__container{border:solid 1rem #307698}}.project-card__front,.project-card__back{position:absolute;top:0px;right:0px;bottom:0px;left:0px}.project-card__back{background-color:#307698;background-image:radial-gradient(circle, #5991ad,#307698 70%);background-size:contain;padding:2.5rem;text-align:center;transform:rotateY(180deg)}@media only screen and (max-width: 1024px){.project-card__back{top:0px;right:0px;left:auto;bottom:auto;width:50%;height:100%;transform:rotateX(0deg);text-align:left}}@media only screen and (max-width: 591px){.project-card__back{width:100%;height:50%;top:50%;left:0px;text-align:center}}.project-card__front{overflow:hidden}@media only screen and (max-width: 1024px){.project-card__front{top:0px;right:auto;left:0px;bottom:auto;width:50%;height:100%}}@media only screen and (max-width: 591px){.project-card__front{width:100%;height:50%;top:0px;left:0px}}.project-card__img{width:100%}.project-card__main-title{font-family:"Oswald",sans-serif;color:#e8e8e8;font-size:2.5rem;font-weight:bolder;text-transform:capitalize;margin-bottom:2rem}.project-card__sub-title{font-family:"Oswald",sans-serif;color:#cbdde5;font-size:2.15rem;font-weight:lighter;text-transform:capitalize}.btn{display:inline-block;font-family:"Arvo",serif;text-transform:uppercase;font-weight:lighter;transition:all 300ms ease 0s;margin:auto 1rem;cursor:pointer;user-select:none;letter-spacing:1.5px;word-spacing:3px}.btn::before{content:"";position:absolute;top:-2.5px;right:-2.5px;bottom:-2.5px;left:-2.5px;z-index:-1;transform:scale(0)}.btn:first-child{margin-left:0px}.btn:last-child{margin-right:0px}.btn:hover{transition:all 300ms ease 0s;transform:scale(1.05)}.btn:active{transition:all 300ms ease 0s;transform:scale(1.1)}.btn:active::before{animation:splash .3s ease 0s 1 normal forwards}.btn--c-sec{background-color:transparent;border:2.5px solid #e8e8e8;color:#e8e8e8;background-image:linear-gradient(112deg, transparent 0%, transparent 50%, #e8e8e8 50%);background-size:210%;transition:all 300ms ease 0s;transition-duration:600ms}.btn--c-sec::before{background-color:#e8e8e8}.btn--c-sec:hover{transition:all 300ms ease 0s;transition-duration:600ms;color:#112832}.btn--c-prim{background-color:transparent;border:2.5px solid #112832;color:#112832;background-image:linear-gradient(112deg, transparent 0%, transparent 50%, #112832 50%);background-size:210%;transition:all 300ms ease 0s;transition-duration:600ms}.btn--c-prim::before{background-color:#112832}.btn--c-prim:hover{transition:all 300ms ease 0s;transition-duration:600ms;color:#e8e8e8}.btn--s-lg{padding:1.5rem 3rem;font-size:2.2rem}.btn--s-lg:hover{background-position:100%}.btn--s-md{padding:1.25rem 2.5rem;font-size:2rem}.btn--s-md:hover{background-position:99%}.btn--s-sm{padding:1rem 2rem;font-size:1.8rem}.btn--s-sm:hover{background-position:99%}.btn--fill.btn--c-sec{background-color:#e8e8e8;color:#112832}.btn--fill.btn--c-sec:hover{filter:brightness(75%)}.btn--fill.btn--c-prim{background-color:#112832;color:#e8e8e8}.btn--fill.btn--c-prim:hover{filter:brightness(125%)}.btn--round{border-radius:25%/100%}.btn--round::before{border-radius:25%/100%}.btn--outline{background-image:none;background-image:transparent}.btn--outline.btn--c-sec{color:#e8e8e8}.btn--outline.btn--c-prim{color:#112832}.text-input{width:30rem}.text-input__input{width:100%;padding:1.15rem 1.25rem;font-family:"Arvo",serif;letter-spacing:2px;font-size:2rem;background-color:transparent;background-color:#307698;transition:all 300ms ease 0s;color:#747474}.text-input__input::placeholder{user-select:none;transition:all 300ms ease 0s;color:#c4c9cc;font-size:1.5rem;font-family:"Arvo",serif;text-transform:capitalize;font-weight:lighter;letter-spacing:3px;word-spacing:6px}@media only screen and (max-width: 591px){.text-input__input::placeholder{text-align:center}}.text-input__label{position:absolute;top:50%;left:0px;transform:translateY(-50%) scale(1);color:#e8e8e8;font-size:1.5rem;font-family:"Arvo",serif;text-transform:capitalize;font-weight:lighter;letter-spacing:3px;word-spacing:6px;margin-left:1.25rem;transition:all 300ms ease 0s;transform-origin:left;opacity:0;cursor:text}.text-input__input:focus,.text-input__input:valid{transition:all 300ms ease 0s;background-color:#98bbcc}.text-input__input:focus::placeholder,.text-input__input:valid::placeholder{transition:all 300ms ease 0s;color:transparent;font-size:1.5rem;font-family:"Arvo",serif;text-transform:capitalize;font-weight:lighter;letter-spacing:3px;word-spacing:6px}.text-input__input:focus ~ .text-input__label,.text-input__input:valid ~ .text-input__label{transition:all 300ms ease 0s;transform:translateY(-300%) scale(0.75);color:#747474;opacity:1}.text-area{width:100%;min-height:25rem;padding:2rem 3rem;resize:vertical;background-color:#c6d1d7;font-family:"Arvo",serif;font-weight:lighter;word-spacing:6px;letter-spacing:1.5px;color:#747474}.social{display:flex;flex-direction:column;align-items:center;user-select:none;position:fixed;right:0px;bottom:8rem;z-index:1}@media only screen and (max-width: 1024px){.social{display:none}}.social__input{display:none}.social__tg-btn{width:6.2rem;height:6.2rem;border-radius:100%;margin:1rem 6rem;cursor:pointer;order:2;transition:all 300ms ease 0s;z-index:1}.social__tg-btn::after{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px;background-color:#307698;border-radius:100%;transform:scale(0);z-index:-1}.social__tg-btn:active::after{animation:splash .35s ease 0s 1 normal forwards;animation-play-state:running}.social__icons{display:flex;flex-direction:column;align-items:center;order:1;visibility:hidden;z-index:0}.social__icon{width:4.3rem;height:4.3rem;border-radius:100%;margin:1.35rem 6rem;opacity:0;transition:all 300ms ease 0s;transform:translateY(200%)}.social__icon:nth-child(1){transition-delay:.1s;z-index:1}.social__icon:nth-child(2){transition-delay:.2s;z-index:2}.social__icon:nth-child(3){transition-delay:.3s;z-index:3}.social__icon:nth-child(4){transition-delay:.4s;z-index:4}.social__icon::after{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px;background-color:#307698;border-radius:100%;transform:scale(0);z-index:-1}.social__icon:active::after{animation:splash .35s ease 0s 1 normal forwards;animation-play-state:running}.social__tg-btn,.social__icon{background-color:#307698;background-image:radial-gradient(circle, #5991ad 0%,#307698);background-size:contain;background-position:center}.social__img{display:block;width:50%;position:absolute;top:0px;right:0px;bottom:0px;left:0px;margin:auto;filter:invert(90%)}.social__input:checked ~ .social__icons{visibility:visible}.social__input:checked ~ .social__icons .social__icon{transition:all 300ms ease 0s;opacity:1;transform:translateY(0%)}.social__input:checked ~ .social__icons .social__icon:nth-child(1){transition-delay:.4s}.social__input:checked ~ .social__icons .social__icon:nth-child(2){transition-delay:.3s}.social__input:checked ~ .social__icons .social__icon:nth-child(3){transition-delay:.2s}.social__input:checked ~ .social__icons .social__icon:nth-child(4){transition-delay:.1s}.nav{display:flex;justify-content:space-around;align-items:center;user-select:none;position:fixed;top:0px;left:0px;width:100%;z-index:1}@media only screen and (max-width: 1024px){.nav{display:none}}.nav::before{content:"";position:absolute;width:100%;height:100%;background-color:#2e414b}.nav__list{display:flex;justify-content:center;align-items:stretch}.nav__item::before{content:"";position:absolute;right:1rem;bottom:1rem;left:1rem;height:0.5rem;background-color:#e8e8e8;transform:scaleX(0);transition:all 300ms ease 0s}.nav__item:hover::before{transition:all 300ms ease 0s;transform:scaleX(1)}.nav__link{font-family:"Oswald",sans-serif;font-size:2.2rem;padding:3rem 2rem;word-spacing:4px;letter-spacing:2px;color:#e8e8e8;transform-origin:bottom;transition:all 300ms ease 0s}.nav__link::first-letter{text-transform:capitalize}.nav__item:hover .nav__link{transition:all 300ms ease 0s;transform:scale(1.1) translateY(-0.5rem)}.sidebar{position:static}@media only screen and (min-width: 1488px){.sidebar{display:none}}@media only screen and (max-width: 1488px){.sidebar{display:none}}@media only screen and (max-width: 1024px){.sidebar{display:block}}.sidebar__header{padding:2rem;display:flex;justify-content:space-between;align-items:center;position:fixed;top:0px;left:0px;width:100%;z-index:3;padding-right:3rem}.sidebar__header::before{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px;background-color:#2e414b}@media only screen and (max-width: 591px){.sidebar__header{bottom:0px;top:auto;padding:1rem}}@media screen and (max-height: 591px){.sidebar__header{bottom:0px;top:auto;padding:1rem}}.sidebar__tg-btn{display:block;width:5rem;height:5rem;margin:auto;cursor:pointer}.sidebar__tg-btn-elem{height:4px;width:5rem;margin:auto;margin-top:1rem;background-color:#e8e8e8}@media only screen and (max-width: 591px){.sidebar__tg-btn-elem{height:3px;width:4rem;margin-top:.75rem}}.sidebar__tg-btn-elem:first-child{margin-top:0px}.sidebar__input{display:none}.sidebar__footer{position:fixed;top:10rem;right:0px;bottom:0px;z-index:2;box-shadow:0px 0px 0px 1000vh transparent;width:30rem;transform:translateX(100%);transition:all 300ms ease 0s;transition-duration:.7s;overflow-y:auto}.sidebar__footer::before{content:"";position:absolute;top:0px;right:0px;height:150%;width:100%;background-color:#194860;background-image:linear-gradient(90deg, #194860,#3c6378)}@media only screen and (max-width: 591px){.sidebar__footer{position:fixed;top:0px;right:0px;bottom:6.9rem;left:0px;width:auto;display:flex;flex-direction:column;justify-content:flex-end}}@media screen and (max-height: 591px){.sidebar__footer{position:fixed;top:0px;right:0px;bottom:6.9rem;left:0px;width:auto;display:flex;flex-direction:column;justify-content:flex-end;overflow-y:hidden}}.sidebar__link{font-family:"Oswald",sans-serif;font-size:2.2rem;padding:4.5rem 6rem;word-spacing:4px;letter-spacing:2px;color:#e8e8e8;text-align:center}.sidebar__link::first-letter{text-transform:capitalize}@media only screen and (max-width: 591px){.sidebar__link{padding-top:2rem;padding-bottom:2rem}}@media screen and (max-height: 591px){.sidebar__link{padding-top:1.3rem;padding-bottom:1.3rem}}.sidebar__active::before{content:"";position:absolute;top:0px;right:0px;bottom:0px;width:4px;margin:1rem 2rem;background-color:#e8e8e8}@media only screen and (max-width: 591px){.sidebar__active::before{position:absolute;top:0px;right:0px;bottom:0px;left:0px;height:4px;width:80%;margin:auto;margin-bottom:0px}}@media screen and (max-height: 591px){.sidebar__active::before{position:absolute;top:0px;right:0px;bottom:0px;left:0px;height:4px;width:80%;margin:auto;margin-bottom:0px}}.sidebar__img-box{width:6rem;height:6rem;margin:2rem 0px}@media only screen and (max-width: 591px){.sidebar__img-box{width:4rem;height:4rem;margin:1.25rem 2.5rem}}@media screen and (max-height: 591px){.sidebar__img-box{width:4rem;height:4rem;margin:1.25rem 2.5rem}}.sidebar__img{display:block;margin:auto;width:auto;filter:invert(100%)}.sidebar__social{display:flex;align-items:center;flex-direction:column;justify-content:flex-start}@media only screen and (max-width: 591px){.sidebar__social{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:3.5rem;margin-bottom:2rem}}@media screen and (max-height: 591px){.sidebar__social{flex-direction:row;flex-wrap:wrap;justify-content:center;margin-top:3.5rem;margin-bottom:3rem}}.sidebar__input:checked+.sidebar__footer{transform:translateX(0px);transition:all 300ms ease 0s;transition-duration:.7s;box-shadow:0px 0px 0px 1000vh rgba(0,0,0,0.7)}.l-projects{--grid-item-width:35rem;--grid-gap:2rem;display:grid;grid-template-columns:repeat(auto-fit, var(--grid-item-width));align-items:center;justify-content:center;grid-gap:var(--grid-gap);justify-items:center;perspective:1000px}@media only screen and (max-width: 1024px){.l-projects{--grid-item-width:51em}}@media only screen and (max-width: 591px){.l-projects{display:block}}.form{width:100%;max-width:700px;margin:auto;padding-bottom:80}.form__container{display:grid;grid-template-areas:"name email btn";align-items:center;justify-content:stretch;grid-gap:1rem}@media only screen and (max-width: 1024px){.form__container{grid-template-areas:"btn btn"
 "name email";grid-row-gap:4rem}}@media only screen and (max-width: 591px){.form__container{grid-template-areas:"btn"
 "name"
 "email";grid-row-gap:4rem}}.form__name{grid-area:name;width:auto}.form__email{grid-area:email;width:auto}.form__btn{display:block;width:auto;grid-area:btn;margin:0px}.footer{display:flex;justify-content:center;align-items:center;z-index:-1;user-select:all}.footer::after{content:"";position:absolute;top:0px;right:0px;bottom:0px;left:0px;background-color:#112832;background-image:linear-gradient(90deg, #112832 5%,#293e47 15%,#293e47 85%,#112832 95%);z-index:-1}.footer__flex-box{display:flex;justify-content:center;align-items:center}.footer__text{color:#f2f2f2;text-transform:uppercase;font-family:"Oswald",sans-serif;font-size:1.8rem;letter-spacing:3px;padding:1.5rem;padding-left:2rem;padding-right:2rem;cursor:text}.footer__text:not(:last-child)::before{content:"";position:absolute;top:0px;right:-.2rem;bottom:0px;left:100%;transform:translateX(-50%);margin-top:0.75rem;margin-bottom:0.75rem;background-color:#f2f2f2}