@font-face{font-family:"gd-sage";src:url(/static/media/gd-sage-bold.162c9e17.woff2);font-weight:700;font-style:normal}@font-face{font-family:"Metropolis";src:url(/static/media/Metropolis-Regular.7b9a798c.woff2),url(/static/media/Metropolis-Regular.0b443baa.ttf);font-weight:500;font-style:normal}@font-face{font-family:"Metropolis";src:url(/static/media/Metropolis-SemiBold.10f01a9f.woff2),url(/static/media/Metropolis-SemiBold.b97c44a7.ttf);font-weight:600;font-style:normal}@font-face{font-family:"Metropolis";src:url(/static/media/Metropolis-Bold.dc6926c3.woff2),url(/static/media/Metropolis-Bold.0545ca64.ttf);font-weight:700;font-style:normal}@font-face{font-family:"Inter";src:url(/static/media/Inter-Regular.4dd66a11.woff2),url(/static/media/Inter-Regular.7c539936.woff);font-weight:400;font-style:normal}*{margin:0;padding:0;scroll-behavior:smooth;text-decoration:none;font-family:"Inter",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"Metropolis",sans-serif}h1{font-size:64px;line-height:72px}h2{font-size:56px;line-height:64px}h3{font-size:40px;line-height:44px}h4{font-size:32px;line-height:36px}h5{font-size:24px;line-height:28px}h6{font-size:20px;line-height:20px}#welcome{position:absolute;display:flex;justify-content:center;align-items:center;width:100vw;height:100vh;background:rgba(0,0,0,.3);z-index:9999}#welcome.exiting{opacity:0;transition:opacity .4s}#welcome.exiting #welcome-content{-webkit-animation:fly-out .3s;animation:fly-out .3s}#welcome #welcome-content{position:absolute;background:#fff;width:20%;height:30%;border-radius:10px;padding:10px;box-shadow:0 8px 20px rgba(0,0,0,.13);text-align:center;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;-webkit-animation:pop-in 1s;animation:pop-in 1s}#welcome #welcome-content h1{color:#313131}#welcome #welcome-content p{color:#686868;margin-bottom:10px;padding:0 30px}#welcome #welcome-content p:nth-child(6){color:#000}#welcome #welcome-content .popper{position:absolute;top:-30px;font-size:50px;-webkit-user-select:none;-ms-user-select:none;user-select:none}#welcome #welcome-content .popper:first-child{left:-40px;transform:scaleX(-1)}#welcome #welcome-content .popper:nth-child(2){right:-40px}#welcome #welcome-content .popper:hover{cursor:default}#welcome #welcome-content .welcome-button{flex-basis:30%;background-color:#1178ff;color:#fff;font-weight:600;font-size:18px;padding:5px 20px;border-radius:5px;-webkit-user-select:none;-ms-user-select:none;user-select:none;transition:box-shadow .3s}#welcome #welcome-content .welcome-button:hover{cursor:pointer;box-shadow:0 8px 20px rgba(0,110,255,.397)}#navigation{position:fixed;top:0;left:0;width:100%;height:8%;display:flex;justify-content:space-between;align-items:center;padding:20px 0;background:#23252e;z-index:999999}#navigation h3{margin-left:60px;transition:transform .6s}#navigation h3 a{font-family:"gd-sage",serif;color:#fff}#navigation h3:hover{transform:scale(1.1)}#navigation ul li{list-style:none;display:inline-block;position:relative}#navigation ul li+li{margin-left:30px}#navigation ul li a{font-family:"Inter",sans-serif;color:#fff}#navigation ul li.active:after{opacity:1}#navigation ul li.active:after,#navigation ul li:after{content:"";position:absolute;z-index:99999999;bottom:-8px;left:45%;background:#fff;height:5px;width:5px;border-radius:50%;transition:opacity .3s}#navigation ul li:after{opacity:0}#navigation ul li:hover:after{opacity:1}#navigation #create-btn{margin-right:60px;padding:20px 30px;background:#fff;transition:transform .3s ease-in-out,box-shadow .4s ease-in-out;font-family:"Inter",sans-serif;color:#000}#navigation #create-btn:hover{transform:translateY(-5px);cursor:pointer;box-shadow:4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);color:#23252e}.page-content{padding-top:20vh}.dropdown-wrapper{position:absolute;z-index:99;width:200px;-webkit-user-select:none;-ms-user-select:none;user-select:none;color:#adadad;-webkit-filter:drop-shadow(0 8px 20px rgba(0,0,0,.13));filter:drop-shadow(0 8px 20px rgba(0,0,0,.13))}.dropdown-wrapper>:hover{cursor:pointer}.dropdown-wrapper.active .dropdown-header{border-color:#2f4f4f}.dropdown-wrapper.active .dropdown-header .dropdown-header-title{color:#fff}.dropdown-wrapper .dropdown-header{border:2px solid #5a5a5a;padding:10px 20px;background-color:rgba(0,0,0,.6);transition:border .3s ease-in-out}.dropdown-wrapper .dropdown-header .dropdown-header-title{transition:color .3s ease-in-out}.dropdown-wrapper .dropdown-list{background-color:#08080a;max-height:0;transition:max-height 1s ease-in-out,border-width 1s ease-in-out;overflow:hidden;box-sizing:border-box}.dropdown-wrapper .dropdown-list .dropdown-list-item{list-style:none;padding:10px 20px;border-bottom:.5px solid #202020;transition:background-color .3s ease-in-out,color .3s ease-in-out}.dropdown-wrapper .dropdown-list .dropdown-list-item:hover{background-color:#202020;cursor:pointer;color:#fff}.dropdown-wrapper .dropdown-list.visible{max-height:150px;border:2px solid #2f4f4f;border-top:none}@media only screen and (max-width:414px){#nav #hamburger{display:block}#nav #nav-links{display:none}#nav h1{padding:0 20px}}@-webkit-keyframes pop-in{0%{transform:scale(.3)}20%{transform:scale(1)}40%{transform:scale(.8)}60%{transform:scale(1)}80%{transform:scale(.9)}to{transform:scale(1)}}@keyframes pop-in{0%{transform:scale(.3)}20%{transform:scale(1)}40%{transform:scale(.8)}60%{transform:scale(1)}80%{transform:scale(.9)}to{transform:scale(1)}}@-webkit-keyframes fly-out{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}@keyframes fly-out{0%{transform:translateY(0)}to{transform:translateY(-100vh)}}#home{background:url(https://w.wallhaven.cc/full/3k/wallhaven-3krpqy.jpg);background-size:cover;background-position:50%;background-repeat:no-repeat}#home #opening-container{cursor:none;width:100vw;height:100vh;display:grid;place-items:center;color:#fff;background:#23252e;-webkit-animation:fadeout .5s ease-in-out 2.5s 1 forwards;animation:fadeout .5s ease-in-out 2.5s 1 forwards}#home #opening-container #opening-text-cover{background:#23252e;overflow:hidden}#home #opening-container #opening-text-cover h2{font-family:"gd-sage",serif;-webkit-animation:slideinout 3s 1;animation:slideinout 3s 1;margin-bottom:20px}#home #center-container{position:absolute;top:0;left:0;width:100vw;height:100vh;-webkit-animation:fadein 1.6s 2.5s 1 forwards;animation:fadein 1.6s 2.5s 1 forwards;opacity:0;z-index:999;cursor:default}#home #center-container,#home #center-container #center-container-text-content{display:grid;place-items:center}#home #center-container #center-container-text-content #center-text-area{width:25vw;height:15vh;display:grid;place-items:center;background:#fff;position:relative;margin-bottom:20px}#home #center-container #center-container-text-content #center-text-area:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#fff;-webkit-animation:fadeout 1.4s 4s 1 forwards;animation:fadeout 1.4s 4s 1 forwards}#home #center-container #center-container-text-content #center-text-area h2{font-family:"gd-sage",serif;color:#000}#home #center-container #center-container-text-content p{font-family:"Inter",sans-serif;color:#fff;font-size:18px;-webkit-filter:drop-shadow(0 0 8px rgba(0,0,0,.5));filter:drop-shadow(0 0 8px rgba(0,0,0,.5))}#home #left-side{position:absolute;left:0;top:0;width:50vw;height:100vh;background:#23252e;opacity:0;-webkit-animation:leftright 2s 3s 1 forwards;animation:leftright 2s 3s 1 forwards;display:flex;align-items:center}#home #content{position:fixed;top:0;left:0;width:100vw;height:100vh;transform:scale(1.5);overflow:hidden;z-index:9999;-webkit-animation:zoomin 2s ease-out 3.3s 1 forwards;animation:zoomin 2s ease-out 3.3s 1 forwards}#home #content #content-navigation{position:absolute;top:0;left:0;width:100%;height:8%;display:flex;justify-content:space-between;align-items:center;padding-top:20px}#home #content #content-navigation h3{margin-left:60px;transition:transform .6s}#home #content #content-navigation h3 a{font-family:"gd-sage",serif;color:#fff}#home #content #content-navigation h3:hover{transform:scale(1.1)}#home #content #content-navigation ul li{list-style:none;display:inline-block;position:relative}#home #content #content-navigation ul li+li{margin-left:30px}#home #content #content-navigation ul li a{font-family:"Inter",sans-serif;color:#fff}#home #content #content-navigation ul li:after{content:"";opacity:0;position:absolute;z-index:99999999;bottom:-8px;left:45%;background:#fff;height:5px;width:5px;border-radius:50%;transition:opacity .3s}#home #content #content-navigation ul li:hover:after{opacity:1}#home #content #content-navigation #create-button{margin-right:60px;padding:20px 30px;background:#fff;transition:transform .3s ease-in-out,box-shadow .4s ease-in-out;font-family:"Inter",sans-serif;color:#000}#home #content #content-navigation #create-button:hover{transform:translateY(-5px);cursor:pointer;box-shadow:4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}#home #content #content-navigation #create-button:hover a{color:#23252e}#home #content #content-left{width:50%;height:100%;display:flex;align-items:center}#home #content #content-left a{position:absolute;left:-20px;transform:rotate(-90deg);font-family:"Inter",sans-serif;color:#797b81;text-decoration:none}@-webkit-keyframes zoomin{0%{transform:scale(1.5)}to{transform:scale(1)}}@keyframes zoomin{0%{transform:scale(1.5)}to{transform:scale(1)}}@-webkit-keyframes slideinout{0%{transform:translateY(90px);opacity:0}50%{transform:translateY(0);opacity:1}70%{transform:translateY(0);opacity:.8}to{transform:translateY(-50px);opacity:0}}@keyframes slideinout{0%{transform:translateY(90px);opacity:0}50%{transform:translateY(0);opacity:1}70%{transform:translateY(0);opacity:.8}to{transform:translateY(-50px);opacity:0}}@-webkit-keyframes slideout{0%{transform:translateY(0);opacity:0}to{transform:translateY(-10px);opacity:1}}@keyframes slideout{0%{transform:translateY(0);opacity:0}to{transform:translateY(-10px);opacity:1}}@-webkit-keyframes leftright{0%{transform:translateX(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes leftright{0%{transform:translateX(-100%);opacity:0}to{transform:translateY(0);opacity:1}}@-webkit-keyframes fadeout{0%{opacity:1}to{opacity:0}}@keyframes fadeout{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadein{0%{opacity:0}to{opacity:1}}@keyframes fadein{0%{opacity:0}to{opacity:1}}#letters{background:#1d1e25;min-height:100vh}#letters .subheading,#letters h3{color:#fff;padding-left:15px}#letters .subheading{margin-bottom:50px;font-size:18px;color:#ebebeb}#letters #letter{overflow-x:hidden;z-index:999999;position:absolute;top:0;left:0;padding:0;transform:translateY(-100vh);height:100vh;width:100vw;background:#1d1e25;display:grid;place-items:center}#letters #letter #letter-controls{position:-webkit-sticky;position:sticky;top:0;margin-bottom:50px;width:100%;text-align:right;background:#23252e}#letters #letter #letter-controls svg{transition:rotate .2s}#letters #letter #letter-controls svg:hover{stroke:#111114;cursor:pointer;rotate:90deg}#letters #letter #letter-header{text-align:center}#letters #letter #letter-header h3{color:#fff}#letters #letter #letter-content{width:40%}#letters #letter #letter-content #letter-body p{font-size:18px;color:#ebebeb;margin-bottom:30px}#letters #letter #letter-content #letter-wordcount{margin-top:10vh;text-align:center;font-size:15px;color:#c5c5c5;z-index:99999999}#letters #letter #letter-content:after{content:"";display:block;position:-webkit-sticky;position:sticky;bottom:0;width:100%;height:10vh;z-index:9;background:linear-gradient(0deg,#1d1e25,rgba(0,128,0,0))}#letters #letter.viewable{-webkit-animation:slidedown 1.5s ease-out 1 forwards;animation:slidedown 1.5s ease-out 1 forwards}#letters #letter.close{-webkit-animation:slideup .7s ease-out 1 forwards;animation:slideup .7s ease-out 1 forwards}#letters .page-content{width:80%;margin:0 auto;position:relative}#letters .page-content #note{margin-bottom:30px}#letters .page-content #letters-preview{width:55%;display:inline-block;position:relative}#letters .page-content #letters-preview .preloaded div{margin-bottom:30px}#letters .page-content #letters-preview .preloaded div:first-child{position:relative;overflow:hidden;background:rgba(0,0,0,.4);width:400px;height:20px;margin-bottom:10px}#letters .page-content #letters-preview .preloaded div:first-child:after{content:"";top:0;opacity:.1;transform:translateX(100%);width:100%;height:220px;position:absolute;z-index:1;-webkit-animation:slide 2s infinite;animation:slide 2s infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.4) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0))}#letters .page-content #letters-preview .preloaded div:nth-child(2){position:relative;overflow:hidden;background:rgba(0,0,0,.4);width:600px;height:40px}#letters .page-content #letters-preview .preloaded div:nth-child(2):after{content:"";top:0;opacity:.1;transform:translateX(100%);width:100%;height:220px;position:absolute;z-index:1;-webkit-animation:slide 2s infinite;animation:slide 2s infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,hsla(0,0%,100%,.4) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0))}#letters .page-content #letters-preview .letter{position:relative;padding:15px;transition:background .3s ease-in-out}#letters .page-content #letters-preview .letter:hover{background:rgba(0,0,0,.4);cursor:pointer}#letters .page-content #letters-preview .letter>*{-webkit-user-select:none;-ms-user-select:none;user-select:none}#letters .page-content #letters-preview .letter.unread:before{content:"";display:block;position:absolute;background:#00b7ff;border-radius:50%;width:10px;height:10px;left:0;top:45%}#letters .page-content #letters-preview .letter .letter-title{color:#fff}#letters .page-content #letters-preview .letter .letter-title .pinned{position:absolute;left:-30px;top:-2px;color:#a0c4ff}#letters .page-content #letters-preview .letter .letter-title .title-icon{display:inline-block;vertical-align:middle}#letters .page-content #letters-preview .letter .letter-preview{color:#ebebeb}#letters .page-content #stats{display:inline-block;vertical-align:top;position:fixed;right:20vw;padding:20px;border:2px solid #2d2e36;width:250px;height:460px;transition:background .4s ease-in-out}#letters .page-content #stats h4{color:#fff;margin-bottom:10px;-webkit-user-select:none;-ms-user-select:none;user-select:none}#letters .page-content #stats p{color:#ebebeb;font-size:18px;margin-bottom:15px;-webkit-user-select:none;-ms-user-select:none;user-select:none}#letters .page-content #stats span{font-weight:600;-webkit-user-select:none;-ms-user-select:none;user-select:none}#letters .page-content #stats:hover{background:#2d2e36}#letters .page-content .hiddenMessage{position:relative;background:#f0f0f0;padding:3px 5px;border-radius:3px}@-webkit-keyframes slide{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes slide{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@-webkit-keyframes slidedown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes slidedown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@-webkit-keyframes slideup{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes slideup{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@media only screen and (max-width:414px){#letters{width:90%}}#create{min-height:100vh;width:100%;background:#1d1e25}#create #heading,#create #subtitle{color:#fff}#create #subtitle{margin-bottom:50px;font-size:18px;color:#ebebeb}#create .page-content{width:80%;margin:0 auto;position:relative}#create .page-content #post{position:relative}#create .page-content #post label{display:block;font-size:18px;color:#ebebeb;margin-bottom:10px}#create .page-content #post #writeLetter{margin-top:100px;height:100%}#create .page-content #post #writeLetter #details{position:relative;display:inline-block;vertical-align:top;margin-right:40px;height:100%;color:#fff}#create .page-content #post #writeLetter #details input{-webkit-appearance:none;width:15vw;font-size:15px;color:#adadad;background-color:rgba(0,0,0,.6);padding:15px 10px;box-shadow:0 0 40px 16px rgba(0,0,0,.08);transition:border-color .3s ease-in-out;overflow:visible!important;margin-bottom:30px;border:2px solid transparent;box-sizing:border-box}#create .page-content #post #writeLetter #details input:focus{border:2px solid #2f4f4f;color:#fff}#create .page-content #post #writeLetter #details>input[type=submit]{all:unset;-webkit-text-fill-color:#000;background:#fff;transition:transform .3s ease-in-out;font-family:"Inter",sans-serif;color:#000;width:100%;font-size:18px;padding:15px;box-shadow:0 0 40px 16px rgba(0,0,0,.08);margin-bottom:30px;border:none;box-sizing:border-box;text-align:center}#create .page-content #post #writeLetter #details>input[type=submit]:hover{cursor:pointer;box-shadow:0 0 40px 16px rgba(0,0,0,.1);transform:translateY(-5px)}#create .page-content #post #writeLetter #details #information{margin-bottom:28px}#create .page-content #post #writeLetter #details #information dl dd{float:left;text-transform:uppercase;color:#555}#create .page-content #post #writeLetter #details #information dl dt{text-align:right;margin-bottom:5px;color:#c4c4c4}#create .page-content #post #writeLetter #details>*{display:block}#create .page-content #post #writeLetter #details #switch span{vertical-align:middle}#create .page-content #post #writeLetter #right{position:absolute;top:31px;display:inline-block;width:78%;height:500px}#create .page-content #post #writeLetter #right textarea{box-sizing:border-box;min-width:100%;max-width:100%;min-height:100%;max-height:100%;resize:none;padding:15px;background-color:rgba(0,0,0,.6);color:#ebebeb;border:none}#create .react-datepicker{border:none;background:#1d1e25}#create .react-datepicker .react-datepicker__day{color:#c4c4c4}#create .react-datepicker .react-datepicker__day:hover{border-radius:0;background:rgba(0,0,0,.2);color:#fff}#create .react-datepicker .react-datepicker__day--outside-month{color:grey}#create .react-datepicker .react-datepicker__day--keyboard-selected,#create .react-datepicker .react-datepicker__day--selected,#create .react-datepicker .react-datepicker__month-text--keyboard-selected,#create .react-datepicker .react-datepicker__quarter-text--keyboard-selected{border-radius:0;background:rgba(0,0,0,.4);font-weight:400;font-style:normal;color:#fff}#create .react-datepicker .react-datepicker__day--keyboard-selected:hover,#create .react-datepicker .react-datepicker__day--selected:hover,#create .react-datepicker .react-datepicker__month-text--keyboard-selected:hover,#create .react-datepicker .react-datepicker__quarter-text--keyboard-selected:hover{border-radius:0;background:rgba(0,0,0,.4)}#create .react-datepicker .react-datepicker__header{border:none;background-color:rgba(0,0,0,.4);margin:0;padding:15px 15px 0;color:#fff}#create .react-datepicker .react-datepicker__input-time-container{border:none;background-color:rgba(0,0,0,.4);margin:0;padding:15px;color:#fff}#create .react-datepicker .react-datepicker__input-time-container .react-datepicker-time__input input{margin-bottom:0!important}#create .react-datepicker .react-datepicker__current-month{font-family:"Metropolis",sans-serif;font-weight:700}#create .react-datepicker .react-datepicker-time__header,#create .react-datepicker .react-datepicker-year-header,#create .react-datepicker .react-datepicker__current-month,#create .react-datepicker .react-datepicker__day-name{color:#fff}#create .react-datepicker .react-datepicker__navigation--previous{border-right-color:#424242;transition:border-right-color .1s ease-in-out;margin-top:5px}#create .react-datepicker .react-datepicker__navigation--previous:hover{border-right-color:#fff}#create .react-datepicker .react-datepicker__navigation--next{border-left-color:#424242;transition:border-left-color .1s ease-in-out;margin-top:5px}#create .react-datepicker .react-datepicker__navigation--next:hover{border-left-color:#fff}@media only screen and (max-width:414px){body #details,body #right{display:block;width:100%!important}body #details input{width:100%!important}body #right textarea{width:100%}body #right #wordCount{right:15px!important;bottom:5px}}
/*# sourceMappingURL=main.a199e30c.chunk.css.map */