:root{
 --ivory:#F7F3EA;
 --blue:#C9DCE6;
 --ink:#172126;
 --line:#DAD5CA;
 --white:#FCFBF7;
}

*{
 box-sizing:border-box;
 margin:0;
 padding:0;
}

body{
 background:var(--ivory);
 color:var(--ink);
 font-family:"Manrope",sans-serif;
}

button,input,textarea{
 font:inherit;
}

header{
 height:78px;
 padding:0 4%;
 display:grid;
 grid-template-columns:1fr auto 1fr;
 align-items:center;
 border-bottom:1px solid var(--line);
 background:rgba(247,243,234,.96);
}

.back{
 font-size:7px;
 letter-spacing:2px;
 text-decoration:none;
}

.logo{
 display:flex;
 flex-direction:column;
 align-items:center;
 text-decoration:none;
 color:var(--ink);
}

.logo strong{
 font-family:"Cormorant Garamond",serif;
 font-size:27px;
 font-weight:500;
 letter-spacing:7px;
 line-height:.8;
}

.logo span{
 font-size:5px;
 letter-spacing:4px;
 margin-top:9px;
}

.free{
 margin-left:auto;
 padding:9px 12px;
 background:var(--blue);
 font-size:6px;
 letter-spacing:2px;
}

main{
 max-width:1500px;
 margin:auto;
 padding:70px 5% 120px;
}

.intro{
 display:grid;
 grid-template-columns:2fr 1fr;
 align-items:end;
 margin-bottom:70px;
}

.intro>div>span{
 font-size:7px;
 letter-spacing:2.5px;
}

.intro h1{
 font-family:"Cormorant Garamond",serif;
 font-size:72px;
 line-height:.83;
 font-weight:400;
 margin-top:25px;
}

.intro h1 em{
 font-weight:400;
}

.intro>p{
 max-width:390px;
 font-family:"Cormorant Garamond",serif;
 font-size:18px;
 line-height:1.5;
 opacity:.65;
}

.workspace{
 display:grid;
 grid-template-columns:minmax(0,1fr) 470px;
 gap:60px;
 align-items:start;
}

form{
 background:var(--white);
 border:1px solid var(--line);
}

.form-section{
 padding:38px;
 border-bottom:1px solid var(--line);
}

.section-title{
 display:flex;
 gap:18px;
 margin-bottom:35px;
}

.section-title>b{
 width:30px;
 height:30px;
 border-radius:50%;
 background:var(--blue);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:7px;
 font-weight:500;
}

.section-title h2{
 font-family:"Cormorant Garamond",serif;
 font-size:29px;
 font-weight:400;
}

.section-title p{
 font-size:8px;
 opacity:.45;
 margin-top:3px;
}

.grid2{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:20px;
}

label{
 display:block;
 margin-bottom:22px;
}

label>span{
 display:block;
 font-size:7px;
 letter-spacing:1.5px;
 margin-bottom:9px;
}

input,
textarea{
 width:100%;
 border:1px solid #DAD5CA;
 background:#F8F5EE;
 padding:14px;
 outline:none;
 font-family:"Cormorant Garamond",serif;
 font-size:18px;
 color:var(--ink);
}

textarea{
 min-height:90px;
 resize:vertical;
}

input:focus,
textarea:focus{
 border-color:#94B8C8;
 box-shadow:0 0 0 3px rgba(201,220,230,.4);
}

.colors{
 display:grid;
 grid-template-columns:repeat(5,1fr);
 gap:10px;
}

.color{
 border:1px solid var(--line);
 background:white;
 padding:7px;
 cursor:pointer;
}

.color.active{
 border:1px solid var(--ink);
 box-shadow:0 0 0 1px var(--ink);
}

.color i{
 display:block;
 width:100%;
 height:48px;
 border:1px solid rgba(0,0,0,.08);
}

.color span{
 display:block;
 text-align:left;
 font-family:"Cormorant Garamond",serif;
 font-size:13px;
 padding:7px 2px 2px;
}

.publish{
 width:100%;
 border:0;
 background:var(--ink);
 color:white;
 padding:20px 25px;
 display:flex;
 justify-content:space-between;
 align-items:center;
 cursor:pointer;
}

.publish div{
 text-align:left;
}

.publish small{
 display:block;
 font-size:5px;
 letter-spacing:2px;
 opacity:.5;
 margin-bottom:5px;
}

.publish strong{
 font-size:8px;
 letter-spacing:2px;
 font-weight:500;
}

.publish>span{
 font-family:"Cormorant Garamond",serif;
 font-size:25px;
}

aside{
 position:sticky;
 top:25px;
}

.preview-head{
 display:flex;
 justify-content:space-between;
 font-size:6px;
 letter-spacing:2px;
 margin-bottom:14px;
}

.preview-bg{
 padding:45px;
 transition:.35s;
}

.invitation{
 min-height:590px;
 padding:35px 25px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 align-items:center;
 text-align:center;
 box-shadow:0 25px 60px rgba(0,0,0,.1);
 transition:.35s;
}

.evori{
 position:absolute;
 margin-top:-520px;
 font-size:5px;
 letter-spacing:4px;
}

.symbol{
 font-family:"Cormorant Garamond",serif;
 font-size:30px;
}

.small-title{
 font-size:5px;
 letter-spacing:2px;
 margin:20px 0;
}

.invitation h2{
 font-family:"Cormorant Garamond",serif;
 font-size:49px;
 font-weight:400;
 line-height:.72;
}

.invitation h2 span{
 display:block;
}

.invitation h2 i{
 display:block;
 font-size:21px;
 font-weight:400;
 margin:12px;
}

.rule{
 width:100px;
 height:1px;
 background:currentColor;
 opacity:.35;
 margin:25px;
}

.families{
 font-family:"Cormorant Garamond",serif;
 font-size:13px;
 line-height:1.5;
}

.families span{
 display:block;
}

.families i{
 display:block;
 font-weight:400;
 margin:3px;
}

.date{
 width:100%;
 border-top:1px solid;
 border-bottom:1px solid;
 border-color:rgba(100,100,100,.3);
 margin:30px 0;
 padding:17px;
 display:flex;
 justify-content:center;
 gap:30px;
}

.date strong,
.date span{
 font-family:"Cormorant Garamond",serif;
 font-size:16px;
 font-weight:400;
}

.venue small{
 font-size:5px;
 letter-spacing:2px;
}

.venue strong{
 display:block;
 font-family:"Cormorant Garamond",serif;
 font-size:22px;
 font-weight:400;
 margin:9px;
}

.venue p{
 font-family:"Cormorant Garamond",serif;
 font-size:12px;
 opacity:.6;
}

/* THEMES */

.theme-ivory{
 background:#C9DCE6;
}
.theme-ivory .invitation{
 background:#F7F3EA;
 color:#172126;
}

.theme-babyblue{
 background:#EDF3F5;
}
.theme-babyblue .invitation{
 background:#C9DCE6;
 color:#172126;
}

.theme-burgundy{
 background:#E4D3D3;
}
.theme-burgundy .invitation{
 background:#681F2D;
 color:#FFF7ED;
}

.theme-black{
 background:#D7D7D5;
}
.theme-black .invitation{
 background:#171717;
 color:#F7F3EA;
}

.theme-white{
 background:#E7E7E5;
}
.theme-white .invitation{
 background:#FFF;
 color:#1B1B19;
}

.theme-sage{
 background:#DCE1D8;
}
.theme-sage .invitation{
 background:#89927F;
 color:#FFF9EF;
}

.theme-navy{
 background:#D1D8E0;
}
.theme-navy .invitation{
 background:#182436;
 color:#F8F1E5;
}

.theme-blush{
 background:#F3E6E3;
}
.theme-blush .invitation{
 background:#E7D2CE;
 color:#392E2C;
}

.theme-mocha{
 background:#E6DCD4;
}
.theme-mocha .invitation{
 background:#A98F7A;
 color:#FFF8F0;
}

.theme-lavender{
 background:#EEEAF2;
}
.theme-lavender .invitation{
 background:#D8D0E3;
 color:#302D35;
}


/* RESULT */

.result{
 position:fixed;
 inset:0;
 z-index:100;
 background:rgba(23,33,38,.72);
 backdrop-filter:blur(12px);
 display:none;
 align-items:center;
 justify-content:center;
 padding:20px;
}

.result.active{
 display:flex;
}

.result-card{
 width:500px;
 max-width:100%;
 background:#F7F3EA;
 padding:55px 40px 40px;
 text-align:center;
 position:relative;
}

.result-close{
 position:absolute;
 top:15px;
 right:18px;
 border:0;
 background:none;
 font-family:"Cormorant Garamond",serif;
 font-size:30px;
 cursor:pointer;
}

.result-eyebrow{
 font-size:6px;
 letter-spacing:4px;
}

.result-icon{
 width:45px;
 height:45px;
 border-radius:50%;
 background:#C9DCE6;
 display:flex;
 align-items:center;
 justify-content:center;
 margin:25px auto;
}

.result-card h2{
 font-family:"Cormorant Garamond",serif;
 font-size:46px;
 line-height:.9;
 font-weight:400;
}

.result-card>p{
 font-size:9px;
 line-height:1.7;
 opacity:.6;
 margin:18px auto 30px;
}

.link-box{
 display:flex;
 border:1px solid var(--line);
 background:white;
 padding:5px;
}

.link-box input{
 border:0;
 background:white;
 font-family:"Manrope",sans-serif;
 font-size:9px;
}

.link-box button{
 border:0;
 background:#172126;
 color:white;
 padding:0 15px;
 font-size:6px;
 letter-spacing:1.5px;
}

#openInvitation,
.share-button{
 width:100%;
 display:block;
 margin-top:10px;
 padding:15px;
 text-decoration:none;
 border:1px solid var(--ink);
 background:transparent;
 color:var(--ink);
 font-size:7px;
 letter-spacing:2px;
 cursor:pointer;
}

.share-button{
 background:#C9DCE6;
 border-color:#C9DCE6;
}

@media(max-width:850px){

 header{
  height:70px;
  padding:0 18px;
 }

 .back{
  font-size:0;
 }

 .back:after{
  content:"←";
  font-size:17px;
 }

 main{
  padding:50px 14px 90px;
 }

 .intro{
  display:block;
 }

 .intro h1{
  font-size:52px;
 }

 .intro>p{
  margin-top:25px;
 }

 .workspace{
  display:flex;
  flex-direction:column;
  gap:35px;
 }

 aside{
  width:100%;
  position:relative;
  top:auto;
  order:-1;
 }

 .preview-bg{
  padding:30px 22px;
 }

 .invitation{
  min-height:510px;
 }

 .evori{
  margin-top:-445px;
 }

 form{
  width:100%;
 }

 .form-section{
  padding:28px 18px;
 }

 .grid2{
  grid-template-columns:1fr;
  gap:0;
 }

 .colors{
  grid-template-columns:repeat(2,1fr);
 }

 .color i{
  height:55px;
 }

}