:root {
    --main-txt: #582704;
    --main-bg: #faebd7;
    --head-lines: #b7520916;
    --link-bg: #f6ceb1;

    --back-splash: repeating-conic-gradient(white 0 25%, antiquewhite 0 50%) 
      50% / 90px 90px;

    --link-clr: #34251b;
    --link-hover: #f8d5bc;
    --link-clr-active: burlywood;
    --link-bg-active: #544033;
}

.drkTheme {
    --main-txt: #ac8971;
    --main-bg: #1f1203;
    --head-lines: #7d756f16;
    --link-bg: #5b3f2c;

    --back-splash: repeating-conic-gradient(#39230c 0 25%, #32200f 0 50%) 
      50% / 90px 90px;

    --link-clr: #f8e0cc;
    --link-hover: #9f7d62;
    --link-clr-active: burlywood;
    --link-bg-active: #795239;
}


body, html {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 200;
    color: var(--main-txt);
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;

    display: grid;

    grid-template-columns: auto;
    /*positions center-top*/
    justify-content: center;
    /*Puts in center of page*/
    align-items: center;
    text-align: center;

    background: var(--back-splash);
    transition: all .9s ease;
}
.pagedecor {
    padding: 2rem;
    margin-bottom: 2rem;
    border: 2px solid var(--main-txt);
    border-radius: 3rem;
    background-color: var(--main-bg);
    
}
    header {
        border-bottom: 5px double var(--head-lines);
    }
    .spinClass {
        margin-bottom: 1rem;
    }
    video {
        border-radius: 20rem;
    }
        }
        video:focus {
            outline: none;
        }

.linkClass {
    display: grid;
    gap: 1rem;
    grid-auto-flow: dense;
    list-style: none;

}

a {
    color: var(--link-clr);
    text-decoration: none;
    font-weight: 800;
}
li:hover {
    background-color: var(--link-hover);
    transition: all .3s ease-in-out;
}
a:active , li:active {
    color: var(--link-clr-active);
    background-color: var(--link-bg-active);
    border-radius: 1rem;
}


a:focus {
    border-radius: 1rem;
}

    .testPara {
        background-color: var(--link-bg);
        border-radius: 1rem;
        font-size: large;
        padding: 2em;
    }

button {
    margin-top: 1rem;
    padding: 1rem;
    border-color: var(--main-txt);
    border-radius: 5rem;
    background-color: var(--link-bg);
    font: inherit;
    color: var(--link-clr);
}
    button:hover {
        background-color: var(--link-hover);
        transition: all .3s ease-in-out;
    }
.footClass {
    position: fixed;
    left: .1rem;
}
    .messPara {
        writing-mode: sideways-lr;
    }