@import'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css';
*{
    box-sizing:border-box
}
body{
    margin:0;
    margin-bottom:6rem;
    font-family:space grotesk,sans-serif;
    font-size:16px;
    color:#fff;
    background-color:#000
}
body>main{
    max-width:1000px;
    margin:0 auto;
    padding:0 1px
}
h1,h2{
    font-weight:lighter;
    text-shadow:0 0 15px #fff
}
img,svg{
    width:100%;
    height:auto
}
@media screen and (min-width:1000px){
    body{
        background-image:url(../fonts/guides.svg);
        background-size:1001px;
        background-position:center;
        background-repeat:repeat-y
    }
}
body>main{
    display:grid;
    grid-auto-rows:min-content;
    grid-gap:1rem
}
body>main .h1{
    height:15rem
}
body>main .h2{
    height:30rem
}
body>main .h3{
    height:45rem
}
body>main .h4{
    height:60rem
}
.banner{
    background-color:rgba(255,255,255,.1);
    text-align:center
}
.banner.ukraine{
    background:linear-gradient(135deg,rgba(0,91,187,0.5),rgba(255,213,0,0.5))
}
.banner.discord{
    background:linear-gradient(135deg,rgba(88,101,242,0.25),rgba(88,101,242,0.5))
}
.banner .banner-inner{
    max-width:1000px;
    margin:0 auto;
    padding:1rem
}
.banner .banner-inner p{
    margin:0
}
.banner .banner-inner p a{
    color:#fff;
    text-decoration:none
}
.banner .banner-inner p a:hover{
    text-decoration:underline
}
header#header{
    max-width:1000px;
    margin:0 auto;
    padding:2rem 0 0
}
header#header a{
    display:block;
    width:200px;
    margin:0 auto
}
header#header .logo{
    opacity:.5;
    transition:all .2s
}
header#header .logo:hover{
    filter:drop-shadow(0 0 10px white)
}
header#header.logged-in{
    display:flex;
    padding-left:1rem;
    padding-right:1rem;
    justify-content:space-between;
    align-items:center
}
header#header.logged-in a{
    margin:0
}
header#header.logged-in .user{
    display:flex;
    align-items:center;
    column-gap:10px;
    width:unset;
    color:#fff;
    text-decoration:none
}
header#header.logged-in .user img{
    width:24px;
    height:24px;
    image-rendering:pixelated;
    transition:all .2s
}
header#header.logged-in .user p{
    position:relative;
    margin:0;
    transition:color .3s
}
header#header.logged-in .user p:before{
    transition:all .2s;
    content:"log out";
    position:absolute;
    right:0;
    opacity:0;
    color:#c34057
}
header#header.logged-in .user:hover{
    cursor:pointer
}
header#header.logged-in .user:hover img{
    filter:drop-shadow(0 0 5px #c34057)
}
header#header.logged-in .user:hover p{
    color:#000
}
header#header.logged-in .user:hover p:before{
    opacity:1;
    text-shadow:0 0 10px #c34057
}
section.hero{
    display:grid;
    grid-gap:1rem;
    place-items:center;
    align-content:center;
    background-image:linear-gradient(transparent 20%,black,transparent 80%)
}
section.hero h1{
    font-size:64px;
    text-align:center;
    margin:0
}
section.hero h1>span{
    transition:all 1s;
    opacity:0
}
section.hero h2{
    margin:0
}
section.hero .button{
    color:#fff;
    text-decoration:none;
    font-size:24px;
    text-shadow:0 0 15px #fff;
    width:250px;
    text-align:center;
    padding:1rem 2rem;
    background-color:#000;
    border:solid 5px #fff;
    box-shadow:inset 0 0 7.5px 0 #fff,0 0 7.5px 0 #fff
}
section.hero .button::after{
    content:"→";
    margin-left:1rem;
    transition:margin .2s
}
section.hero .button:hover::after{
    margin-left:1.5rem
}
section.map{
    margin-bottom:10%
}
section.map p{
    text-transform:uppercase;
    opacity:.5;
    text-align:center;
    margin-top:5rem;
    margin-left:240px
}
section.map #map{
    position:relative;
    transform:scale(1.2);
    transform-origin:top
}
section.map #map svg path{
    stroke-width:1px;
    stroke:rgba(255,255,255,.5)
}
section.map #map .point{
    position:absolute;
    width:20px;
    transform-origin:center;
    transition:opacity .2s;
    animation-name:scale;
    animation-duration:2.5s;
    animation-iteration-count:4
}
@keyframes scale{
    0%{
        transform:translate(-50%,-50%) scale(1);
        opacity:0
    }
    50%{
        transform:translate(-50%,-50%) scale(2);
        opacity:1
    }
    100%{
        transform:translate(-50%,-50%) scale(2.5);
        opacity:0
    }
}
main#other-mods .mods{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-auto-rows:250px;
    grid-gap:1rem;
    padding:1rem
}
@media screen and (max-width:750px){
    main#other-mods .mods{
        grid-template-columns:1fr
    }
}
main#other-mods .mods .mod{
    background-color:rgba(255,255,255,.05);
    padding:1rem;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    justify-content:space-between
}
main#other-mods .mods .mod h2{
    margin:0
}
main#other-mods .mods .mod.chattriggers h2{
    display:flex;
    align-items:center
}
main#other-mods .mods .mod.chattriggers h2::after{
    content:"";
    background-image:url(../images/chattriggers.png);
    background-size:contain;
    width:24px;
    height:24px;
    margin-left:10px;
    filter:drop-shadow(0 0 10px #aa53ff)
}
main#other-mods .mods .mod .links{
    line-height:1.75em
}
main#other-mods .mods .mod .links a{
    width:fit-content;
    text-decoration:none;
    color:#fff;
    display:grid;
    grid-template-columns:30px 1fr;
    align-items:center;
    transition:opacity .2s
}
main#other-mods .mods .mod .links a:hover{
    opacity:.75
}
main#other-mods .mods .mod:first-child{
    background-image:url(../images/background.jpg);
    background-position:center;
    background-size:cover;
    grid-column:1/-1;
    display:flex;
    justify-content:space-between
}
main#other-mods .note{
    padding:0 1rem;
    opacity:.25
}
#generator{
    padding:1rem
}
#generator .hero h1 sup{
    color:lime;
    text-shadow:0 0 15px lime;
    cursor:help
}
#generator #app{
    font-size:2rem
}
#generator #app select,#generator #app input,#generator #app button{
    color:#fff;
    font-family:space grotesk,sans-serif;
    font-size:inherit;
    padding:.25rem .5rem;
    outline:none;
    appearance:none;
    background-color:#000;
    border:solid 2px #fff;
    box-shadow:inset 0 0 7.5px 0 #fff,0 0 7.5px 0 #fff
}
#generator #app input[type=checkbox]{
    width:3rem!important;
    aspect-ratio:1/1;
    cursor:pointer
}
#generator #app input[type=checkbox]:checked{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGhlaWdodD0nMjQnIHdpZHRoPScyNCcgZmlsbD0nI0ZGRic+PHBhdGggZD0nTTAgMGgyNHYyNEgwVjB6JyBmaWxsPSdub25lJy8+PHBhdGggZD0nTTkgMTYuMiA0LjggMTJsLTEuNCAxLjRMOSAxOSAyMSA3bC0xLjQtMS40TDkgMTYuMnonLz48L3N2Zz4=);
    background-size:contain;
    background-color:green
}
#generator #app select{
    background-image:url(data:image/svg+xml;
    base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHN0eWxlPSdpc29sYXRpb246aXNvbGF0ZScgdmlld0JveD0nNTIyLjkzIDIwNC45MyA5Mi4xNCA1My4xNCcgd2lkdGg9JzkyLjE0cHQnIGhlaWdodD0nNzAuODUzJz48cGF0aCBkPSdtNTY5IDI1OC4wNy0zLjU0LTMuNTMtMzktMzktMy41My0zLjU0IDcuMDctNy4wNyAzLjU0IDMuNTNMNTY5IDI0My45MmwzNS40Ni0zNS40NiAzLjU0LTMuNTMgNy4wNyA3LjA3LTMuNTMgMy41NC0zOSAzOS0zLjU0IDMuNTNaJyBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGZpbGw9JyNGRkYnLz48L3N2Zz4=);
    background-position:calc(100% - 1rem);
    background-repeat:no-repeat;
    background-size:auto 35%
}
#generator #app .input{
    display:flex;
    margin:1rem 0;
    align-items:center;
    white-space:nowrap;
    column-gap:1rem
}
#generator #app .input>:not(label){
    width:100%
}
#generator #app .info{
    border-bottom:solid 1px rgba(255,255,255,.1);
    margin-bottom:1rem
}
#generator #app .actions{
    display:grid;
    grid-gap:1rem
}
#generator #app .actions .action{
    background-color:rgba(255,255,255,.1);
    padding:1rem;
    border-radius:1rem
}
#generator #app .actions .action.sortable-ghost{
    visibility:hidden
}
#generator #app .actions .action .top{
    display:flex;
    align-items:center;
    justify-content:space-between
}
#generator #app .actions .action .input{
    margin-bottom:0
}
#generator #app .actions .action h3{
    font-weight:400;
    margin:0;
    font-size:2rem
}
#generator #app .actions .action h3 span{
    opacity:.5
}
#generator #app .actions .action .buttons{
    font-size:1.25rem;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-gap:10px
}
#generator #app .actions .action .buttons .handle{
    cursor:grab
}
#generator #app .actions .action .buttons .delete{
    cursor:pointer;
    transition:color .2s
}
#generator #app .actions .action .buttons .delete:hover{
    color:#c34057
}
#generator #app .no-actions{
    font-size:1.25rem;
    opacity:.25;
    margin:4rem 0 5rem;
    text-align:center
}
#generator #app .add-action{
    border-top:solid 1px rgba(255,255,255,.1);
    padding-top:1rem
}
#generator #app button{
    cursor:pointer;
    transition:background-color .2s;
    width:100%
}
#generator #app button:hover{
    background-color:rgba(255,255,255,.1)
}
#generator #app button:disabled{
    opacity:.5;
    pointer-events:none
}
#marketplace{
    padding:1rem
}
#marketplace header{
    display:flex;
    align-items:center;
    justify-content:space-between
}
@media screen and (max-width:750px){
    #marketplace header{
        display:block;
        text-align:center
    }
}
#marketplace header h1>sup{
    color:lime;
    text-shadow:0 0 15px lime
}
#marketplace header .buttons{
    display:flex;
    justify-content:center;
    column-gap:.75rem
}
#marketplace header .buttons a{
    color:#fff;
    text-decoration:none;
    padding:.5rem .9rem;
    transition:background-color .2s;
    border:solid 2px #fff;
    box-shadow:inset 0 0 7.5px 0 #fff,0 0 7.5px 0 #fff
}
#marketplace header .buttons a:hover{
    background-color:rgba(255,255,255,.1)
}
#marketplace .routines{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-gap:1rem
}
@media screen and (max-width:750px){
    #marketplace .routines{
        grid-template-columns:1fr
    }
}
#marketplace .routines .routine{
    border:solid 1px rgba(255,255,255,.1);
    padding:1rem;
    transition:all .2s;
    cursor:pointer;
    display:grid;
    grid-template-columns:85px 1fr;
    align-items:center
}
#marketplace .routines .routine img{
    display:block;
    margin:-8px
}
#marketplace .routines .routine .info{
    overflow:hidden
}
#marketplace .routines .routine .info h3{
    margin:0 0 2px;
    font-weight:400;
    font-size:1.5rem;
    text-shadow:0 0 5px #fff;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
#marketplace .routines .routine .info code{
    font-family:space mono,monospace;
    opacity:.5
}
#marketplace .routines .routine .info code:after{
    content:" (copy)";
    opacity:0;
    transition:opacity .2s
}
#marketplace .routines .routine:hover{
    box-shadow:0 0 15px rgba(255,255,255,.25)
}
#marketplace .routines .routine:hover .info code:after{
    opacity:.5
}
main#store-success{
    text-align:center;
    margin:5rem auto;
    padding:1rem
}
main#store-success p{
    max-width:600px;
    margin:0 auto
}
main#store-success p a{
    color:inherit
}
main#store{
    padding:1rem
}
main#store header.hero{
    display:grid;
    place-items:center
}
main#store header.hero h1{
    font-size:3rem;
    margin-bottom:0
}
main#store header.hero ul{
    text-align:center;
    font-size:1.1rem;
    margin-bottom:2rem;
    list-style-type:none;
    padding:0;
    text-shadow:0 0 30px lime
}
main#store .capes{
    display:grid;
    grid-gap:1rem
}
@media screen and (min-width:750px){
    main#store .capes{
        grid-template-columns:repeat(2,1fr)
    }
}
main#store .capes .cape{
    border:solid 1px rgba(255,255,255,.1);
    border-radius:1rem;
    padding:1rem;
    display:grid;
    grid-gap:1rem
}
main#store .capes .cape .preview{
    background-color:rgba(255,255,255,.05);
    padding-top:20px
}
main#store .capes .cape .preview .mc-skin-viewer-11x *{
    animation-play-state:paused;
    animation-delay:-5s
}
main#store .capes .cape .info{
    display:flex;
    justify-content:space-between;
    align-items:center
}
main#store .capes .cape .info h2{
    margin:0
}
main#store .button{
    color:#fff;
    text-decoration:none;
    padding:.5rem .9rem;
    transition:background-color .2s;
    font:inherit;
    background:0 0;
    cursor:pointer;
    border:solid 2px #fff;
    box-shadow:inset 0 0 7.5px 0 #fff,0 0 7.5px 0 #fff
}
main#store .button:hover{
    background-color:rgba(255,255,255,.1)
}
main#store .popup-wrapper{
    position:fixed;
    background-color:rgba(255,255,255,.25);
    backdrop-filter:blur(10px);
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    place-items:center;
    display:none
}
main#store .popup-wrapper.shown{
    display:grid
}
main#store .popup-wrapper .popup{
    background-color:#000;
    border-radius:1rem;
    display:grid;
    grid-gap:2rem;
    width:100%;
    max-width:600px;
    padding:2rem
}
main#store .popup-wrapper .popup p:first-child{
    margin-top:0
}
main#store .popup-wrapper .popup p:last-child{
    margin-bottom:0
}
main#store .popup-wrapper .popup .info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%
}
main#store .popup-wrapper .popup .info h2{
    margin:0
}
main#store .popup-wrapper .popup .info .close{
    appearance:none;
    font:inherit;
    border:solid 1px rgba(255,255,255,.1);
    border-radius:1000rem;
    padding:.5rem 1rem;
    cursor:pointer;
    color:#fff;
    background:0 0;
    transition:background-color .2s
}
main#store .popup-wrapper .popup .info .close:hover{
    background-color:rgba(255,255,255,.05)
}
main#store .popup-wrapper .popup form{
    display:grid;
    grid-gap:1rem
}
main#store .popup-wrapper .popup input{
    color:#fff;
    font-family:space grotesk,sans-serif;
    font-size:inherit;
    padding:.25rem .5rem;
    height:40px;
    outline:none;
    appearance:none;
    background-color:#000;
    border:solid 2px #fff;
    box-shadow:inset 0 0 7.5px 0 #fff,0 0 7.5px 0 #fff
}
main#store .popup-wrapper .popup p{
    color:rgba(255,255,255,.5)
}
main#store .popup-wrapper .popup p a{
    color:inherit
}
section.features{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    grid-gap:2rem;
    text-align:center;
    padding:0 2rem
}
@media screen and (max-width:750px){
    section.features{
        grid-template-columns:repeat(2,1fr)
    }
}
section.features img{
    height:100px;
    width:auto
}
footer#footer{
    max-width:1000px;
    margin:0 auto;
    padding:1rem;
    display:flex;
    justify-content:space-between
}
footer#footer p{
    opacity:.5;
    margin:0
}
footer#footer nav{
    display:flex
}
footer#footer nav a{
    opacity:.5;
    color:#fff;
    text-decoration:none;
    transition:opacity .2s;
    margin-left:1rem
}
footer#footer nav a:hover{
    opacity:.75
}