:root {
                --header-image: url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
            }

 html, html[data-theme="dark"]{
                --bg:#151721;
                --content: #dfe5fa;
                --h: #8ea1d8;
                --links:#8ea1d8;
                --button:#524880;
                --button-border:#a5b6e6;
                --button-text:#b6c2e6;
                --border: #7387c2;
                --content-bg:#151721;
                --box:#1b152b;
                --body-bg-image: url('https://i.imgur.com/cFtIBFd.jpg');
            }
    
            html, html[data-theme="light"]{
                --bg:#dfe5fa;
                --content: #151721;
                --h: #6a77b1;
                --links:#435fb9;
                --button:#a4a5d9;
                --button-border:#323854;
                --button-text:#323854;
                --border: #42496b;
                --content-bg:#d7dcf1;
                --box:#1b152b;
                --body-bg-image: url('https://i.imgur.com/8IbhCmo.jpg');
            }

             @media (prefers-color-scheme: light) {
            html, html[data-theme="light"]{
                --bg:#ffffff;
                --content: #151721;
                --h: #151721;
                --links:#435fb9;
                --button:#524880;
                --button-border:#a5b6e6;
                --button-text:#b6c2e6;
                --border: #7387c2;
                --content-bg:#dfe5fa;
                --box:#1b152b;
                --body-bg-image: url('https://i.imgur.com/8IbhCmo.jpg');
            }

            html, html[data-theme="dark"]{
                --bg:#151721;
                --content: #dfe5fa;
                --h: #8ea1d8;
                --links:#8ea1d8;
                --button:#524880;
                --button-border:#a5b6e6;
                --button-text:#b6c2e6;
                --border: #7387c2;
                --content-bg:#151721;
                --box:#1b152b;
                --body-bg-image: url('https://i.imgur.com/cFtIBFd.jpg');
            }
}

            html, body {
                height:100%;
                margin:auto;
                padding:0;
            }

            body {
                font-family: 'Atkinson Hyperlegible';
                background-color: var(--bg);
                background: var(--body-bg-image) no-repeat center fixed;
                background-size:cover;
                color: var(--content);
                font-size:1.1em;
            }

            * {
                box-sizing: border-box;
            }

            #container {
                width:65%;
                height:100%;
                animation: fadeEffect 1s;
                margin:auto;
            }

            header {
                width: 100%;
                background-color: #5e4e8c;
                height: 100px;
                background-image: var(--header-image);
                background-size: 100%;
                border:solid 1px var(--border);
            }

            nav {
                width: 100%;
                font-family:'STIX Two Text';
                top:0;
            }

            nav ul {
                width:100%;
                padding: 0;
                position:sticky;
                display: flex;
                flex-wrap:wrap;
            }

            nav li {
                list-style-type: none;
                text-align:center;
                padding:0;
                font-variant:small-caps;
                flex-grow:1;
                background-color: var(--button);
                border: double 4px var(--button-border);
                display:block;
            }
            
            nav li:hover{
                transition: 0.3s;
                background:var(--content-bg);
            }

            nav li a {
                padding:4px 0;
                margin:0;
                color:var(--button-text);
                text-decoration: none;
                font-size:1.3em;
                display:block;
                cursor: help;
            }
            
            .column {
                float: left;
                min-height:100vh;
            }
            
            .left, .right {
                display:flex; 
                flex-direction:column;
                width:20%;
                text-align:center;
                padding:20px;
                font-variant:small-caps;
                background:var(--content-bg);
                border-left:solid 1px var(--border);
                border-right:solid 1px var(--border);
                }

            .left {
                order:1
                }

            .right {
                order:3
                }

            .middle {
                height:100vh;
                width:60%;
                order:2;
                } 

            #content {
                padding:0 30px 10px 30px;
                background-color: var(--content-bg);
                border:solid 1px var(--border);
                }

            footer {
                width:100%;
                height: 40px;
                margin-top:15px;
                bottom:0;
                padding: 10px;
                text-align: center;
                font-size:0.9em;
                font-variant:small-caps;
                background-color:var(--content-bg);
                border:solid 1px var(--border);
                border-bottom:0;
            }

            nav {
                width: 100%;
            }

            nav ul {
                width:100%;
                padding: 0;
                background-color: var(--button);
                justify-content: space-evenly;
                list-style-type: none;
                position:sticky;
                top:0;
                display: flex;
                flex-wrap:wrap;
            }

            nav li {
                margin:0;
                padding:0;
                font-variant:small-caps;
            }
            
            nav li:hover{
                transition: 0.3s;
                background:var(--content-bg);
                display:block;
                
                left:0;
                right:0;
            }

            nav li a {
                padding:4px 10px;
                margin:0;
                color:var(--button-text);
                text-decoration: none;
                font-size:1.3em;
                display:block;
                cursor: help;
            }

            button {
                border: double 4px var(--button-border);
                padding:4px 10px 4px 10px;
                color:var(--button-text);
                background-color: var(--button);
                font-size:1em;
                font-variant:small-caps;
            }
            
            button:hover{
                cursor: help;
                transition: 0.3s;
                background:var(--content-bg);
            }

            h1,
            h2,
            h3 {
                font-family:'Jacquard 12';
                font-size: 1.5em;
                font-variant:small-caps;
                font-weight:100;
            }

            h1 {
                font-family:'Jacquard 12';
                font-size: 2.2em;
                font-variant:small-caps;
                font-weight:600;
                border-bottom:solid 1px;
                color:var(--h)
            }

            strong {
                color: #ED64F5;
            }

            .box {
                background-color: var(--box);
                border: double 4px var(--border);
                padding: 10px;
                min-height:10%;
                overflow:auto;
            }

#icon { 
    width:100%;
    height:200px;
    border:double 4px var(--button-border);
    background-image:url('https://sadhost.neocities.org/images/layouts/wp.jpeg');
    margin-bottom:20px;
    
}

               @media only screen and (max-width: 1422px) {
                   
                   #container {
                    min-width:100%;
                    min-height: 100%;
                }
                   
                   button {
                       margin-top:10px;
                   }
                   

            @media only screen and (max-width: 930px) {
                
                #container {
                    width:100%;
                    margin:0;
                    padding:0 10px;
                }
                
                .footer {
                    margin:0;
                }

                h1 {
                    margin-top:10px;
                }

                .column {
		            width: 100%;
                }
                
                .left, .right {
                    display:none;
                }