*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#243548;--background-color:#fbfbfb;--text-color:#202020;--font-family:'Montserrat',sans-serif;--font-title:'Cormorant Garamond',serif}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}html{scroll-behavior:smooth}body{min-height:100vh;background-color:var(--background-color);color:var(--text-color);font-family:var(--font-family);letter-spacing:1px;display:flex;flex-direction:column}a{color:var(--text-color);text-decoration:none}ul{list-style:none}h1{font-family:var(--font-title);font-size:5rem;font-weight:400;margin-bottom:.3em;letter-spacing:3px;color:var(--primary-color)}h2{margin-bottom:1.5em;text-align:center;color:var(--primary-color);font-family:var(--font-title);font-size:3em}main{flex:1;position:sticky;top:0;background-color:var(--background-color)}#main-content{position:relative;z-index:10;background-color:var(--background-color);box-shadow:0 0 10px rgba(0,0,0,.1);padding-bottom:5rem}section:not(#hero){margin:0 auto 3rem;scroll-margin-top:60px}header{height:60px;position:sticky;top:0;z-index:4}#menu-toggle{display:none}nav{height:100%;display:flex;justify-content:end;align-items:center;background-color:var(--background-color);padding:1em}nav .social{display:flex;align-items:center}nav .social img{max-width:20px}nav label{cursor:pointer}nav label div{width:30px;height:3px;background-color:var(--primary-color);margin:5px auto;transition:transform .5s ease}nav ul{position:absolute;top:60px;left:0;width:100%;height:0;background-color:var(--background-color);backdrop-filter:blur(5px);overflow:hidden;opacity:0;transition:height .3s ease,opacity .3s ease}nav ul li{border:1px solid transparent;padding:.3em;margin-bottom:10px;display:none}nav ul a{color:var(--primary-color)}#menu-toggle:checked+ul{padding:1em 2em;height:calc(100vh - 60px);opacity:1}#menu-toggle:checked+ul li{display:block}@media screen and (min-width:576px){nav label{display:none}nav ul{height:max-content;opacity:1;display:flex;align-items:center;justify-content:center;gap:1em;position:static;padding:.3em 1em}nav ul li{margin-bottom:0;display:block}h1{font-size:10vw}}#hero{height:calc(100vh - 60px);position:sticky;top:60px;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}#hero p{text-transform:uppercase;letter-spacing:3px}#services{background-color:var(--primary-color);padding:3rem 1em;margin-top:0;color:var(--background-color)}#services h2{color:var(--background-color)}#services .card{max-width:400px;border:1px solid rgba(255,255,255,.3);margin:0 auto 2em;padding:2em .5em;display:flex;flex-direction:column;align-items:center;text-align:center}#services .card h3{margin:.5em 0 1em}#services .card p{font-size:.9em}#services .card img{max-width:30px;object-fit:contain}@media screen and (min-width:768px){#services .content{display:flex;gap:2em}}#projects{padding:1em;display:flex;flex-direction:column;align-items:center}#projects .card{max-width:992px;margin:0 auto 2em;padding:0 .5em;display:flex;flex-direction:column;align-items:center}#projects .card h3{margin:.5em 0 1em}#projects .card p{font-size:.9em;margin-bottom:1em}#projects .card img{width:100%;max-width:700px;height:auto;filter:saturate(.3);margin-bottom:1em}#projects .card button{width:25%}@media screen and (min-width:576px){#projects .card{flex-direction:row;gap:2em}}#about{padding:0 1em 3rem}#about .content{margin:0 auto;max-width:1024px;display:flex;flex-direction:column;align-items:center}#about .content p:nth-of-type(1){display:flex;align-items:center}#about-text{max-width:700px}.profile-pic{width:100%;height:auto;max-width:300px;margin-bottom:2em;box-shadow:0 3px 20px rgba(0,0,0,.1);filter:saturate(.8)}@media screen and (min-width:768px){#about .content{flex-direction:row;gap:2em}#about img{margin-bottom:0}}.social ul{display:flex;justify-content:center;align-items:center;gap:1em;margin-bottom:3em}.social ul li:last-of-type img{max-width:25px;border-radius:4px;background-color:var(--primary-color);border:4px solid var(--primary-color)}.social img{max-width:30px}#contacts{max-width:700px;margin:0 auto;padding:0 1em}#contacts p{font-size:1.6em;text-align:center;font-family:var(--font-title);font-style:italic}#contacts a{display:inline-block;width:max-content;font:normal bold .6em var(--font-family)}form{display:flex;flex-direction:column;max-width:500px;margin:3em auto}#form-status{font-family:var(--font-family);font-size:.8em}input,textarea{border:1px solid var(--primary-color);background-color:var(--background-color);color:var(--primary-color);margin-bottom:1em;padding:.3em;font-family:var(--font-family)}input::placeholder,textarea::placeholder{color:var(--primary-color)}input:focus,textarea:focus{outline:none;border-color:var(--primary-color)}.modal{display:none}#check-modal{display:none}#check-modal:checked+.modal{display:block;position:fixed;backdrop-filter:blur(5px);top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:20;padding:30px 10px}#check-modal:checked+.modal .modal-content{width:90%;height:100%;max-width:700px;position:relative;margin:auto;overflow:auto}#check-modal:checked+.modal p,#check-modal:checked+.modal h2,#check-modal:checked+.modal label,#check-modal:checked+.modal a{color:var(--background-color)}#check-modal:checked+.modal h2{font-size:2.2em}#check-modal:checked+.modal label{position:absolute;top:0;right:0;cursor:pointer}footer{background-color:var(--primary-color);position:relative;bottom:0;padding:1em;color:var(--background-color)}#copy{text-align:center;font-size:.6em;text-transform:uppercase;font-weight:100}#copy label{color:var(--background-color);cursor:pointer}.button{background-color:var(--primary-color);color:var(--background-color);border:none;padding:.5em;font-family:var(--font-family);cursor:pointer;transition:all .3s ease;box-shadow:0 5px 10px rgba(0,0,0,.2)}.button a{color:var(--background-color)}.button:hover{box-shadow:none}.hover-animation::after{content:'';display:block;width:0;height:1px;background-color:var(--primary-color);margin-top:.5em;transition:width .3s ease}.hover-animation:hover::after{width:100%}.no-scroll{overflow:hidden;height:100vh}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}label.checked div:first-of-type{transform:rotate(45deg)}label.checked div:nth-of-type(2){transform:rotate(-45deg);position:relative;top:-7px}
