*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{height:100vh;width:100vw;--clr-white: #fff;--clr-white-65: rgba(200, 200, 200, .65);--clr-light-gray: #c8c8c8;--clr-green: hsl(142, 98%, 48%);--clr-red: #ff3f1d;--clr-primary: #f29202;--clr-secondary: #1c1624;display:grid;place-items:center;min-height:100vh;position:relative;font-family:Exo,sans-serif;background-color:var(--clr-secondary)}form{width:50vw;max-width:265px;min-width:200px;display:flex;flex-direction:column;align-items:center;gap:1.5em}.input-text,.input-email{font:inherit;width:100%;padding:.75em;padding-left:calc(5ch + .75em);border:none;border-left:2px solid transparent;background-color:var(--clr-white-65);transition:border .25s}.input-text:focus,.input-email:focus{outline:none;border-left:2px solid var(--clr-primary)}.input-text:valid,.input-email:valid{outline:none;border-left:2px solid var(--clr-green)}.inputbox{position:relative;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .5s ease-in-out var(--delay)}.placeholder{text-transform:capitalize;color:var(--clr-light-gray);font-weight:600;position:absolute;top:50%;left:.5em;transform:translateY(-50%);z-index:2;pointer-events:none;transition:color .25s}.input-text:focus+.placeholder,.input-email:focus+.placeholder{color:var(--clr-secondary)}.btn{width:100%;padding:.5em 2.5em;font:inherit;font-weight:700;color:var(--clr-secondary);border:2px solid transparent;background-color:var(--clr-primary);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:color .25s,border-color .25s,background-color .25s,clip-path .5s ease-in-out var(--delay)}.btn:focus,.btn:hover{color:var(--clr-primary);border-color:var(--clr-primary);background-color:transparent}#contact-form{position:relative;animation-name:clipit;animation-delay:.15s;animation-duration:1s;animation-fill-mode:forwards;animation-play-state:paused}@keyframes clipit{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1}75%{clip-path:polygon(49.5% 0,50.5% 0,50.5% 100%,49.5% 100%);opacity:.9}to{clip-path:polygon(49.5% 0,50.5% 0,50.5% 100%,49.5% 100%);opacity:0}}#roket{z-index:1;position:absolute;width:2px;height:0px;background-image:linear-gradient(var(--clr-white) 60%,var(--clr-primary),transparent);top:50%;left:50%;transform:translate(-50%,-50%);animation-name:sending;animation-delay:.75s;animation-duration:1.25s;animation-fill-mode:forwards;animation-play-state:paused}@keyframes sending{0%{height:0;transform:translate(-50%,-50%)}15%{transform:translate(-50%,-50%)}25%{height:200px}to{height:200px;transform:translate(-50%,-110vh)}}#msg{font-weight:600;font-size:1.5rem;display:block;width:max-content;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:-1;color:var(--clr-primary);padding:.75em 3.5em;opacity:0;transition:3.5s opacity .5s}.hidden{clip-path:polygon(0 0,100% 0,100% 0,0 0)}#c{display:block;position:absolute;z-index:-1;width:100%;height:100%;opacity:0;transition:opacity 1.5s ease-out}.topnav{overflow:hidden;background-color:#333;position:relative;z-index:1}.topnav a{float:left;display:block;color:#f2f2f2;text-align:center;padding:14px 16px;text-decoration:none;font-size:17px}.topnav a:hover{background-color:#ddd;color:#000}.topnav a.active{background-color:#04aa6d;color:#fff}.topnav .icon{display:none}@media screen and (max-width: 600px){.topnav a:not(:first-child){display:none}.topnav a.icon{float:right;display:block}}@media screen and (max-width: 600px){.topnav.responsive{position:relative}.topnav.responsive .icon{position:absolute;right:0;top:0}.topnav.responsive a{float:none;display:block;text-align:left}}