:root{
    --primaryColor: #1b1714;
    --primaryLight: #342a21;
    --secondaryColor: #b56440;
    --secondaryColorDark: #623425;
    --textColor: #e4d8ca;
    --muteText: #75695a;
}

*{
    font-family:Alatsi, Arial, Helvetica, sans-serif;
}

/* Featured creator banner, put above the header by multipage.js
----------------------------------------
 */

#creator-banner{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 7px 45px; /* Leaves room for the close button on the right */
    position: relative;
    background-color: var(--primaryLight);
    font-size: 0.95rem;
}

#creator-banner p{
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Cuts a long description off with ... instead of wrapping */
}

#creator-banner strong{
    color: var(--secondaryColor);
    font-weight: normal;
}

#creator-banner span{
    opacity: 70%;
}

#creator-banner a{
    flex-shrink: 0;
    color: var(--secondaryColor);
}

#creator-banner a:hover{
    color: var(--textColor);
}

#creator-banner button{
    position: absolute;
    right: 10px;
    padding: 0 8px;
    border: none;
    background: none;
    color: var(--textColor);
    font-size: 1.3rem;
    line-height: 1;
    opacity: 65%;
    cursor: pointer;
}

#creator-banner button:hover{
    opacity: 100%;
}

/* Header
----------------------------------------
 */

header{
    font-size: 1.3rem;
    height: 60px;
    width: 100%;
    position: sticky;
    top: 0px;
    z-index: 100;
    text-shadow: 0.2rem 0.2rem 0.2rem #000; /* Keeps the links readable over whatever is behind them */
}

/* The blur behind the header, see-through at the top of the page and faded in once scrolled (multipage.js)
   It is its own layer so the fade at its bottom edge doesn't fade the links too */
header::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px; /* Goes past the bottom of the header so the blur can fade out */
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    mask-image: linear-gradient(to bottom, #000 50%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
    opacity: 0;
    transition: opacity 300ms ease-in;
}

header.scrolled::before{
    opacity: 1;
}

#header-logo{
    float: left;
    filter: drop-shadow(0.2rem 0.2rem 0.2rem #000);
}

#nav-item-holder{
    float: right;
    padding: 0;
    height: 100%;
    text-align: center;
    line-height: 60px;
    margin: 0;
}

#nav-item-holder li{
    padding-inline: 5px;
    display: inline;
}

#page-discord{
    padding-left: 15px;
}

#nav-item-holder img{
    width: 25px;
    height: auto;
    transform: translateY(25%);
    filter: brightness(0) saturate(100%) invert(96%) sepia(7%) saturate(623%) hue-rotate(332deg) brightness(90%) contrast(98%) drop-shadow(rgb(0, 0, 0) 0.2rem 0.2rem 0.2rem);
}

#nav-item-holder a{
    opacity: 65%;
    text-decoration: none;
    transition: opacity 150ms, color 500ms;
    color: var(--textColor)
}

#nav-item-holder a:hover, #nav-item-holder a:focus-visible{opacity: 100%;}

#nav-item-holder .active{opacity: 100%;}

/* The Discord link is just the icon up here, the word is for the dropdown */
#page-discord span{
    display: none;
}

/* Menu button, only shown on small screens */
#nav-toggle{
    display: none;
    float: right;
    width: 44px;
    height: 60px;
    padding: 0;
    border: none;
    cursor: pointer;
    background-color: var(--textColor);
    mask: url(../img/icons/menu.svg) center / 30px no-repeat;
    -webkit-mask: url(../img/icons/menu.svg) center / 30px no-repeat;
}

/* Main
----------------------------------------
 */

body{
    background-color: var(--primaryColor);
    color: var(--textColor);
    overflow-x: hidden;
}

main{
    min-height: calc(100vh - 60px);
}

main a{color: var(--secondaryColor);}
main a:hover{color: var(--textColor);}

main a[target="_blank"]::after, footer main a[target="_blank"]::after{ /* Add an image behind each external link */
    content: "";
    margin-left: 0.25rem;
    display: inline-block;
    width: 16px;
    height: 16px;
    transform: translate(-3px, 3px);
    mask: url(../img/icons/externallink.svg);
    -webkit-mask: url(../img/icons/externallink.svg);
    background-color: currentColor;
}

main.content-page{
    padding-top: 40px;
    padding-bottom: 65px;
    box-sizing: border-box;
}

main.content-page h1{
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    margin: 0;
}

main.content-page h2{
    border-bottom: solid 2px var(--primaryLight);
    padding-bottom: 5px;
    margin-top: 40px;
}

main.content-page h3{
    margin-bottom: 5px;
}

main.content-page h3, main.content-page h4 {
    color: var(--secondaryColor);
    font-weight: normal;
}

main.content-page p{
    margin-top: 0;
    line-height: 1.5;
}

main.content-page ul{
    margin: 10px 0;
}

/* Footer
----------------------------------------
 */

footer{
    border-top: solid 5px var(--primaryLight);
    text-align: center;
    background-color: var(--primaryColor);
}

footer p{
    color: var(--muteText); 
    margin:0;
    font-size: 1rem
}

footer a{
    color: var(--muteText);
    text-decoration: underline;
}
footer a:hover{
    color: var(--secondaryColor)
}

.footer-content{
    padding: 25px 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.footer-content img{
    height: 5rem;
}

.footer-sect1{
    text-align: left;
}

.footer-sect2{
    text-align: right;
    padding-top: 15px;
    justify-content: right;
    display: flex;
    flex-direction: column;
}

.footer-sect2 li, .footer-sect2 ul{
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline;
    color: var(--muteText);
}

#footer-icon-rs{
    display: none;
}

/* Misc
----------------------------------------
*/

.clear{
    clear: both;
}

.center{
    text-align: center;
    justify-self: center;
    justify-content: center;
    align-items: center;
}

.bevel-10{
	clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

.bevel-25{
	clip-path: polygon(25px 0%, calc(100% - 25px) 0%, 100% 25px, 100% calc(100% - 25px), calc(100% - 25px) 100%, 25px 100%, 0% calc(100% - 25px), 0% 25px);
}

.text-muted{
    color: var(--muteText) !important;
}

.vertically-aligned{
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}

.width-clamp{
    height: 100%;
    width: 85vw;
    max-width: 1600px;
    margin: auto;
}

/* Use with width-clamp on text pages so lines don't get too long */
.narrow{
    max-width: 1200px;
    margin: auto;
}

.box{
    background-color: var(--primaryLight);
    padding: 10px 15px;
    margin-bottom: 10px;
}

.box h3{
    margin-top: 0;
}

.box p:last-child{
    margin-bottom: 0;
}

.button{
    display: inline-block;
    padding: 12px 20px;
    font-size: 1.05rem;
    text-decoration: none;
    color: #fff;
    background-image: linear-gradient(to bottom, var(--secondaryColor), var(--secondaryColorDark));
    transition: scale 150ms ease-in;
}

.button:hover, .button:focus-visible{
    color: #fff;
    scale: 1.025;
}

main a.button::after{
    transform: none;
}

.visually-hidden{
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.w-50{
    width: 50%;
}

.m-0{
    margin: 0;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background-color:  var(--primaryColor);
    border-radius: 2px;

}

::-webkit-scrollbar-thumb {
    background: var(--primaryLight);
    border-radius: 10px;
    border-top: 2px solid rgba(80, 80, 80, 0.349);
    border-bottom: 2px solid rgba(80, 80, 80, 0.349);
}

@media only screen and (width < 600px) {
    /* Only the name fits on a phone */
    #creator-banner span{
        display: none;
    }

    #footer-icon-hz{
        display: none;
    }

    #footer-icon-rs{
        display: inline;
    }
}

/* The links turn into a dropdown under the header */
@media only screen and (width < 850px) {
    #nav-toggle{
        display: block;
    }

    #nav-item-holder{
        display: none;
        float: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: auto;
        padding: 5px 0 15px;
        line-height: 48px;
        background-color: var(--primaryColor);
        border-bottom: solid 1px var(--primaryLight);
    }

    header.open #nav-item-holder{
        display: block;
    }

    #nav-item-holder li{
        display: block;
        padding: 0;
    }

    #nav-item-holder a{
        display: block;
    }

    #page-discord{
        padding-left: 0;
    }

    #page-discord img{
        display: none;
    }

    #page-discord span{
        display: inline;
    }
}