@charset "UTF-8";
/* Reset */
    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,time,mark,audio,video,main{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* end Reset */
/* Styling */
    @font-face {
        font-family: 'Trykker';
        src: url('../fonts/Trykker.woff2') format('woff2');
        font-display: swap;
    }
    html, body {
        background-color: black;
        color: white;
        font-family: 'Trykker', serif;
        letter-spacing: 6px;
        line-height: 2.5;
        text-shadow: 1px 1px 1px black;
    }
    #siteheader, #sitefooter {
        background-color: black;
        color: white;
        height: 64px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-variant-caps: all-small-caps;
        font-size: 14px;
    }
    .minor {
        text-align: center;
        font-size: 24px;
    }
    .entrycode {
        color: red;
    }
    a, a:visited {
        text-decoration: none;
        color: white;
        transition: color 0.3s ease;
    }
    a:hover {
        color: red;
    }
    .minor {  
        background: rgba(0, 0, 0, 0.75) no-repeat center/cover;
        background-blend-mode: darken;
    }
    #minor25 { background-image: url('../img/jungle.webp'); }
    #minor74 { background-image: url('../img/stars.webp'); }
    #minor00 { background-image: url('../img/desert.webp'); }
/* end Styling */
/* Navigation */
    #mainnav {
        display: none;
        height:100%;
        width:100%;
        background-color:black;
        text-align: right;
        position:fixed!important;
        z-index:1;
        overflow:auto;
    }
    #mainnav li a {
        display: block;
        cursor: pointer;
        padding: 0 16px;
    }
    #mainnav a {
        display: inline-block; /* Necessary for the transform effect */
        transform-origin: right; /* Set the origin for scaling to the right side */
        transition: transform 0.3s ease; /* Smooth animation on transform change */
    }
    #mainnav a:hover {
        transform: scale(1.2); /* Scale up the anchor element */
    }
    #mainnav {
        position:relative;
        animation:animateright 0.4s
    }
    @keyframes animateright {
        from{right:-300px;opacity:0} to{right:0;opacity:1}
    }
    #PrimaryNavBtn {
        position:fixed;
        top:0;
        right: 0;
    }
    .codexNav {
        background: none;
        border: none;
        padding: 10px 20px;
        cursor: pointer; 
        transition: color 1s ease;
        color: white;
        font-size: 28px;
    }
    .codexNav:hover {
        color:red;
    }
    .inactive {
        color: rgb(80, 80, 80);
        cursor:initial;
    }
    .inactive:hover {
        color: rgb(80, 80, 80);
        cursor:initial;
    }
/* end Navigation */
/* Flex layout */
    .codex {
        display: flex;
        overflow-x: auto;
        height: calc(100vh - 128px);
    }
    .codex > .major {
        display: flex;
        flex-direction: row;
    }
    .minor {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 100vw;
        height: 100%;
        padding: 32px;
        box-sizing: border-box;
    }
    .codex, .major {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .codex::-webkit-scrollbar, .major::-webkit-scrollbar {
        display: none;
    }
/* end Flex layout */
/* Cloak */
    #cloak {
        display: none;
    }
/* end Cloak */
/* Orb */
    #orb {
        font-size: 4em;
        color: transparent;
        background-color: transparent;
        border: none;
        cursor: pointer;
        -webkit-animation: glow 1s ease-in-out infinite alternate;
        -moz-animation: glow 1s ease-in-out infinite alternate;
        animation: glow 1s ease-in-out infinite alternate;
        padding: 10px 20px;
        transition: color 0.5s ease;
    }
    #orb:hover {
        color: white;
    }
    @-webkit-keyframes glow {
        from {
            text-shadow: 
                0 0 5px #fff,      /* Closer bright white glow */
                0 0 10px #fff, 
                0 0 15px red,  /* Blue tone */
                0 0 20px red,
                0 0 25px red,
                0 0 40px red, 
                0 0 60px red;  /* Extended further glow */
        }
        to {
            text-shadow: 
                0 0 10px #fff,     /* Move slightly further out */
                0 0 20px #fff, 
                0 0 30px red,
                0 0 40px red,
                0 0 55px red,  /* Extended further blue glow */
                0 0 80px red,
                0 0 100px red; /* Largest blue glow */
        }
    }
/* end Orb */
/* Media queries */
    @media only screen and (max-width: 600px) {
        /* Styles for phones */
        .minor {
            font-size: 16px;
        }
    }

    @media only screen and (min-width: 600px) and (max-width: 768px) {
        /* Styles for portrait tablets */
        .minor {
            font-size: 16px;
        }
    }
/* end Media queries */