*{padding:0;margin:0;box-sizing:border-box;scroll-behavior:smooth;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif}::-webkit-scrollbar{display:none}::selection{background-color:#000;color:#fff}html,body{width:100%;height:100%;position:relative}#root{width:100%;height:100%;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;padding-top:60px;overflow:hidden;background:linear-gradient(179.4deg,#0c1445 -16.9%,#471e54 119.9%);background-color:#000}.phonenav{background:linear-gradient(90deg,#293e70 0%,#182848 100%);width:100vw;display:flex;align-items:center;justify-content:center;flex-direction:column;position:fixed;top:60px;display:none;height:10%;z-index:999;animation-name:phonenavanim;animation-duration:.6s;animation-fill-mode:both;animation-iteration-count:1;transition:.2s all ease}@keyframes phonenavanim{0%{transform:scale(.7);opacity:0}to{transform:scale(1)}}.phonenav ul{display:flex;text-decoration:none;list-style:none;width:100%;height:100%;justify-content:center;align-items:center;gap:5%}.phonenav button{background-color:transparent;border:none;color:#fff;font-size:5vw}i,.hidphonenav{display:none}@media (max-width:690px){.navitem{display:none}.phonenav{display:block}i{display:block;font-size:25px;padding:1px}}@keyframes webcontent{0%{transform:scale(.9)}to{transform:scale(1)}}@keyframes dimtolight{0%{opacity:0;to{opacity:1}}}@keyframes logoimg{0%{opacity:0;to{opacity:1}}}section{width:100%;background-color:#1e1f2691;height:60px;color:#fff;display:flex;gap:2px;align-items:center;margin-top:10px;font-weight:300;justify-content:end;text-align:center;flex-direction:column;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:fixed;bottom:0;padding:0}section ul{display:flex;gap:30%;font-size:20px;list-style:none}section ul li:hover{color:#0ff}hr{width:10%;background-color:#000}section .socials{display:flex;align-items:center;justify-content:center;justify-content:space-around;width:70px;height:20px}section img{width:35px}main{display:flex;justify-content:center;align-items:center;gap:20px;flex-wrap:wrap;width:100%;height:100%;padding-bottom:50px;overflow-y:scroll;position:relative;overflow-x:hidden;background-color:transparent}a{text-decoration:none}.content-oncard{display:flex}.postform{width:99%;padding:10px;display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:wrap;gap:10px;color:#fff}.postforminputs{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:2px;text-align:center;width:100%}.imagepostform{display:flex;justify-content:center;align-items:center}.postforminputs input{width:400px;height:40px;padding:0 2px;font-size:20px;outline:none;text-align:center}.postforminputs input[type=text]{color:#000;font-size:22px}@media (max-width:440px){.postforminputs input{width:100%}}.postform label{font-size:20px;text-align:center}.postform select{width:100px;font-size:20px;border-radius:10px;padding:0 5px;outline:none;border:none;color:#fff;background-color:transparent;border:2px solid rgb(255,255,255)}.postform select:hover{background-color:#2c2e37;color:#fff}input[type=file]::file-selector-button{border-radius:4px;padding:0 16px;height:40px;cursor:pointer;background-color:#fff;border:1px solid rgba(0,0,0,.16);box-shadow:0 1px #0000000d;transition:background-color .2s}input[type=file]::file-selector-button:hover{background-color:#bec1c9}input[type=file]::file-selector-button:active{background-color:#e5e7eb}.postform button{width:300px;height:50px;font-size:25px;background-color:#1b9e1b;border:none;border-radius:0 10px;color:#fff}.postform button:hover{background-color:green}.postform input[type=text]{color:#000;background-color:#fff}.postforminputs input:disabled{background-color:#989696;color:#dfd9d9}.fileandsubmit{display:flex;padding:10px;flex-direction:column;justify-content:center;align-items:center;gap:10px}.post{width:100%;min-height:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:column;padding:2px 2px 50px;animation-name:dimtolight;animation-duration:.5s;animation-fill-mode:both;animation-iteration-count:1;color:#000;background-color:#fff;gap:10px;text-align:left}.posttitletextbox{width:100%;text-align:center;height:fit-content;color:#151414}.posttitletextbox h4{background-color:#1c1a1aad;padding:10px;color:#fff;font-size:2.1rem}@media (max-width:498px){.posttitletextbox h4{font-size:6vw}}.post img{width:90vw;margin-bottom:10px}.content{font-family:Lucida Sans,Lucida Sans Regular,Lucida Grande,Lucida Sans Unicode,Geneva,Verdana,sans-serif}header{display:flex;align-items:center;justify-content:space-between;width:100%;height:60px;background-color:transparent;position:fixed;top:0;color:#fff;padding:0 10px;transition:.2s all ease-in-out;font-weight:700}header button{background-color:transparent;border:none;color:#fff;transition:.5s all;font-size:17px;margin-left:20px;font-weight:700;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;padding:5px 10px}header button:hover{background-color:#ff4655}header #logout{cursor:pointer;padding:5px;border-radius:10px}.homepage{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:transparent;animation-name:webcontent;animation-duration:1s;animation-fill-mode:both;animation-iteration-count:1}.main{height:40%;width:100%;display:flex;align-items:center;justify-content:center;text-align:center}.main h1{text-align:center;text-transform:uppercase;color:#ff0606df;font-size:4rem}.roller{height:4.125rem;line-height:4rem;position:relative;overflow:hidden;width:100%;display:flex;justify-content:center;align-items:center;color:#0f7b8e}#spare-time{font-size:1rem;font-style:italic;letter-spacing:1rem;margin-top:0;color:#a8dadc}.roller #rolltext{position:absolute;top:0;animation:slide 5s infinite}@keyframes slide{0%{top:0}25%{top:-4rem}50%{top:-8rem}72.5%{top:-12.25rem}}@media screen and (max-width: 629px){.btn{transform:scale(.8)}.main{height:25%}.main h1{font-size:2rem}.roller{height:2.3rem;line-height:2.125rem}#spare-time{font-size:1rem;letter-spacing:.1rem}.roller #rolltext{animation:slide-mob 5s infinite}@keyframes slide-mob{0%{top:0}25%{top:-2.125rem}50%{top:-4.25rem}72.5%{top:-6.375rem}}}.btn{-moz-appearance:none;width:200px;-webkit-appearance:none;appearance:none;background-color:transparent;border:none;background:none;color:var(--button-text-color);cursor:pointer;--button-text-color: var(--background-color);--button-text-color-hover: var(--button-background-color);--border-color: #7D8082;--button-background-color: #ece8e1;--highlight-color: #ff4655;--button-inner-border-color: transparent;--button-bits-color: var(--background-color);--button-bits-color-hover: var(--button-background-color);position:relative;padding:8px;margin-bottom:20px;text-transform:uppercase;font-weight:700;font-size:14px;transition:all .15s ease}.btn:before,.btn:after{content:"";display:block;position:absolute;right:0;left:0;height:calc(50% - 5px);border:1px solid var(--border-color);transition:all .15s ease}.btn:before{top:0;border-bottom-width:0}.btn:after{bottom:0;border-top-width:0}.btn:active,.btn:focus{outline:none}.btn:active:before,.btn:active:after{right:3px;left:3px}.btn:active:before{top:3px}.btn:active:after{bottom:3px}.btn__inner{position:relative;display:block;padding:20px 30px;background-color:var(--button-background-color);overflow:hidden;box-shadow:inset 0 0 0 1px var(--button-inner-border-color)}.btn__inner:before{content:"";display:block;position:absolute;top:0;left:0;width:2px;height:2px;background-color:var(--button-bits-color)}.btn__inner:after{content:"";display:block;position:absolute;right:0;bottom:0;width:4px;height:4px;background-color:var(--button-bits-color);transition:all .2s ease}.btn__slide{display:block;position:absolute;top:0;bottom:-1px;left:-8px;width:0;background-color:var(--highlight-color);transform:skew(-15deg);transition:all .2s ease}.btn__content{position:relative}.btn:hover{color:var(--button-text-color-hover)}.btn:hover .btn__slide{width:calc(100% + 15px)}.btn:hover .btn__inner:after{background-color:var(--button-bits-color-hover)}.btn--light{--button-background-color: var(--background-color);--button-text-color: var(--highlight-color);--button-inner-border-color: var(--highlight-color);--button-text-color-hover: #ece8e1;--button-bits-color-hover: #ece8e1}.webname{display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;gap:10px;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif}#logo{background-image:url(https://flaticons.net/icon.php?slug_category=brand-identity&slug_icon=onedrive);width:50px;height:50px;cursor:pointer;background-size:cover;background-position:center;background-repeat:no-repeat;animation-name:logoimg;animation-duration:2s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-direction:alternate-reverse}#navitem{display:flex;justify-content:center;align-items:center}header ul{display:flex;align-items:center;justify-content:center;list-style:none;height:100%}.button{width:100px;height:50px;padding:2px;color:#fff}#logout{width:70px;background-color:red;height:70%;color:#fff}.post .content{padding:0 10%}.post{font-size:large}.post .post-title{color:#000}.postcontainer{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:1rem;padding:20px;overflow:scroll}.postcard{width:450px;position:relative;color:#000;display:flex;flex-direction:column;justify-content:center;text-align:center;white-space:no-wrap;text-overflow:ellipsis;align-items:center;font-size:1rem;word-break:keep-all;transition:.2s all;animation-name:webcontent;animation-duration:.5s;animation-fill-mode:both;animation-iteration-count:1;border-radius:10px;overflow:hidden;transition:.2s all ease-in-out}.postcard:hover{height:fit-content;scale:.99}.postimage{width:100%;height:70%}.postimage img{width:100%;height:220px}.titlepostcard{width:100%;height:40px;text-overflow:ellipsis;background-color:#fff;color:#000}@media (max-width:960px){.postcard{width:400px;font-size:15px;height:fit-content}}@media (max-width:860px){.postcard{width:300px;height:fit-content;font-size:.7rem}}@media (max-width:660px){.postcard{width:40vw;height:fit-content}}@media (max-width:560px){.postcard{width:220px;height:fit-content;font-size:.57rem}}@media (max-width:500px){.postcard{width:90vw;height:fit-content;font-size:.76rem;display:flex;align-items:center;justify-content:center;overflow:auto}.titlepostcard{height:fit-content}}.loginform{width:500px;height:300px;flex-direction:column;display:flex;justify-content:center;align-items:center;gap:1rem;background-color:#0000005c;color:#fff;border-radius:10px;position:relative;text-align:center}.loginform input{width:80%;height:40px;font-size:20px;outline:none;border-radius:5px;text-align:center}.formerror{color:red;animation-name:errorpop;animation-duration:1s}@keyframes errorpop{0%{opacity:0}to{opacity:1}}.loginform h2{font-size:1.4rem}.loginform input[type=submit]{width:50%;background-color:#2ab82a;border:none;color:#fff;font-size:25px}.loginform input[type=submit]:hover{background-color:#08820c}.loginform a{color:red}.Login{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;position:relative;gap:10px;align-items:center;text-align:center;animation-name:dimtolight;animation-duration:.5s;animation-fill-mode:both;color:#fff;animation-iteration-count:1}.signup{width:100vw;height:100%;padding:10px;gap:10px;display:flex;justify-content:center;align-items:center;flex-direction:column;text-align:center;animation-name:dimtolight;animation-duration:.5s;animation-fill-mode:both;color:#fff;animation-iteration-count:1}.signupform{display:flex;align-items:center;justify-content:center;flex-direction:column;width:500px;height:350px;background-color:#0000005c;gap:10px;border-radius:10px;padding:5px;color:#fff}.signupform a{color:red}.signupform input{width:80%;height:40px;font-size:20px;outline:none;border-radius:5px;text-align:center}.signupform button[type=submit]{width:60%;height:40px;background-color:#2ab82a;border:none;color:#fff;border-radius:10px;font-size:25px;transition:.2s all ease-in-out}.signupform button[type=submit]:hover{background-color:#199417}.signupform a:hover{text-decoration:underline}.signupform h2{font-size:1.4rem}.loadercomponent{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(179.4deg,#0c1445 -16.9%,#471e54 119.9%);position:absolute;color:#fff}.loader{width:64px;height:64px;position:relative;animation:rotate 1.5s ease-in infinite alternate}.loader:before{content:"";position:absolute;left:0;bottom:0;color:#ff3d00;background:currentColor;width:64px;height:32px;border-radius:0 0 50px 50px}.loader:after{content:"";position:absolute;left:50%;top:10%;background:#fff;width:8px;height:64px;animation:rotate 1.2s linear infinite alternate-reverse}@keyframes rotate{to{transform:rotate(360deg)}}@media (max-width:510px){.Login{padding:0 5px}.loginform,.signupform{width:100%}}.postcruds{display:flex;justify-content:space-between;align-items:center;flex-direction:column;width:fit-content;height:fit-content;position:absolute;gap:5px;right:20px;top:20px}.postcruds button{width:80px;height:50%;color:#fff;font-size:20px;border-radius:5px;border:none;transition:.2s ease-in}@media (max-width: 680px){.postcruds button{transform:scale(.7)}.postcruds{gap:0px;top:0;right:0}}.postcruds button:nth-child(1){background-color:#0fbf0f}.postcruds button:nth-child(1):hover{background-color:#0b9615}.postcruds button:nth-child(2){background-color:#ff0909}.postcruds button:nth-child(2):hover{background-color:#890a0a}.editpostimage img{width:90%;text-align:center}.labelinput{font-size:23px}@media (max-width:595px){.labelinput{font-size:17px}input[type=file]{width:80%;height:40px}}.postdateoncard{position:absolute;color:#fff;bottom:45px;width:fit-content;height:fit-content;background-color:#94171700;left:0;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:.2s;padding:0 2px}.postcard:hover .postdateoncard{background-color:#1aff1a84;display:block}.postcard:hover .red{background-color:#c10707}.red{background-color:red}.active{color:#ff4655}.active:hover,.notActive{color:#fff}.navitem button a{height:200px;padding:10px}