html, body {
    position: relative;
}
html, body, p {
    margin: 0;
    padding: 0;
}

hr {
    height: 0;
    border: 0;
    border-top: .15rem solid #0E0067;
}
a:active {
    color: cyan;
}

h1, h2, h3, #email {
    overflow-wrap: break-word;
}

body {
    color: #0E0067;
    font-family: 'Arial';
    /*used if JS fails*/
    background-image: url("asset/mockgrid.png");
    background-size: 3%;
    font-size: 0;
}

#witch-title {
    position: absolute;
    top: 2.5vh;
    left: 12.7vw;

    height: 12.5vh;
    filter: drop-shadow(0 0 0.1rem #000000);
}
#main-flex {
    padding-top: 15vh;

    display: flex;
    flex-direction: row;
}

#pale-sheet {
    width: 80%;
    min-height: 83.5vh;
    
    background-color: #f5f7f7ce;

    font-size: 1rem;

    box-sizing: border-box;
    margin-top: 1.5vh;
    
    clip-path: polygon(
        0 0,
        0 100%,
        100% 100%,
        100% 2.5rem,
        calc(100% - 2.5rem) 0
    );

    padding-top: 2rem;
    padding-right: 2rem;
    
    padding-left: 1rem;
    padding-bottom: 1rem;

    backdrop-filter: blur(1.5pt);
}
#sidebar {
    display: flex;
    flex-direction: column;
    
    bottom: 0;
    
    width: 15%;
    
    background-color: #636363;

    box-sizing: border-box;
    padding-left: 1%;
    padding-right: 1%;
    padding-top: 1%;

    border-top: 1vmin ridge #C0C0C0;
    border-right: 1vmin ridge #C0C0C0;
}

.sidebar-link, .sidebar-link-inactive {
    display: block;
    
    border-left: 2px solid;
    border-bottom: 2px solid;

    font-family: 'Courier New', Courier, monospace;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;

    text-align: left;
    align-content: center;
    
    clip-path: polygon(
        0 0,
        0 100%,
        100% 100%,
        100% .75rem,
        calc(100% - .75rem) 0
    );
}
.sidebar-link {
    color: black;
    background-color: #F5F7F7;
    
    border-left-color: #C0C0C0;
    border-bottom-color: #C0C0C0;
}
.sidebar-link:hover, .sidebar-link-inactive {
    color:#0026FF;
}
.sidebar-link-inactive {
    background-color: #0E0067;
    
    border-color: #080039;

    text-align: left;
    align-content: center;
}

.random-symbol-grid {
    width: 100%;

    margin-top: auto;
    margin-bottom: 10%;
    /*
    this makes it the same size as it'd be if statically positioned.
    not totally sure why it's different. the internet says it's something
    to do with the way absolute positioning interacts with margins/padding. 
    */
    display: grid;
}

.cellular-automata {
    position: absolute;

    top: 2.5%;
    height: 97.5%;

    margin: 0;
    padding: 0;

    z-index: -1;
}
@media (orientation:landscape) {
    .cellular-automata {
        left: 2.5%;

        width: 95%;
    }
    .random-symbol-grid {
        position: absolute;
        grid-template-columns: auto auto;

        border: 0;
    }

    .sidebar-link img {
        max-height: 1.5rem;
        max-width: 75%;
    }
    
    .sidebar-link, .sidebar-link-inactive {
        height: calc(2rem - 2px); /*height of bottom border: 2px*/

        margin-bottom: 1rem;
    
        padding: 1rem;
        padding-right: 0;
    }
}

@media (orientation:portrait)
{
    .cellular-automata {
        left: 5%;
    
        width: 90%;
    }
    .random-symbol-grid {
        grid-template-columns: auto;
    }

    .sidebar-link, .sidebar-link-inactive {

        writing-mode: vertical-lr;

        min-height: fit-content;
        height: 15vh;
        width: 95%;


        padding-top: 2rem;
        padding-bottom: 2rem;

        margin-top: 1rem;
    }

    .sidebar-link img, .sidebar-link-inactive img {
        position: relative;
        left: -1.5rem;
        top: 1.5rem;
        
        text-align: center;
        
        height: 1.5rem;
        transform: rotate(90deg);
        overflow: visible;
    }
}

/*symbols and animation*/
.random-symbol-grid {
    position: relative;
}
.random-symbol-grid > img {
    box-sizing: border-box;
    padding: 5%;
    
    width: 100%;
    height: auto;
}
#symbol-peace {
    transform: rotate(calc((6000 / (6000 - 89)) * -180deg - 180deg));
}


button:hover {
    cursor: pointer;
}

.emoji-container {
    display: inline;
    vertical-align: middle;
}
.emoji-container > img {
    height: 1rem;
}

.flip {
    transform: scale(-1);
}

@keyframes spin {
    from {}
    to {
        transform: rotate(360deg);
    }
}
.spin {
    animation-name: spin;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-delay: 0;
    animation-iteration-count: infinite;
}
.reverse {
    animation-direction: reverse;
}

@keyframes fade-in {

    from {
        opacity: 0;
    }
    to {
        opacity: 100%;
    }
}

@keyframes fade-out {

    from {
        opacity: 100%;
    }
    to {
        opacity: 0;
    }
}

.fade-in {
    animation-name: fade-in;
    animation-duration: 20s;
    animation-iteration-count: 1;
}

.fade-out {
    animation-name: fade-out;
    animation-duration: 20s;
    animation-iteration-count: 1;
}


#article-grid > button,
#button-article-details-back,
#index-prev, #index-next,
#featured a  {
    color: #0E0067;

    border-left: 2px solid #0E0067;
    border-bottom: 2px solid #0E0067;

    border-top: 1px solid #bbb9c6;
    border-right: 1px solid #bbb9c6;

    background-color: #F5F7F7;
}
#featured a:hover {

    border-left-color:#0026FF;
    border-bottom-color:#0026FF;
    color:#0026FF;
}