body {
    background-color: white;

    color: black;
    border-color: black;
}

body.dark {
    background-color: black;

    color: white;
    border-color: white;
}




.emojiCanvas {
    border: 1px solid grey;
    display: inline;
    margin-right: 3px;
    vertical-align: baseline;
}




/*for pages*/
.page-wrapper {
    margin: 5%;
    margin-top: 100px;
}

.page-main {
    padding: 10px 30px;
    border-style: solid;
    border-width: 2px;
    border-color: #000000;

    box-shadow: 10px, 10px, black;

    outline-color:white;
    outline-style: solid;
    outline-offset: -7px;
    outline-width: 5px;
}

.page-nav a {
    background-color: white;
}

.page-nav a {
    /*float: left; i do not know what happened but this was rendering really high in the z index and i did something and undid it and this was now causing it to be broken even though i undid everything and it shouldve been reverted*/
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 3px 30px;
    text-decoration: none; /*no underline*/
    font-weight: bold;
    clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
    z-index: 0;
}






/*navbar stuff*/
.navbar{
    color: inherit;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: inherit;
    top: 0;
    width: 100%;
    height: 60px;
    border-bottom: 3px solid;

    display: flex;
    
    position: fixed;
    z-index: 9999;
}

.navbar li {
    color: inherit;
    font-size: 20px;
    margin-right: auto;
    border-right: 1px solid;
    display: flex;
    align-items: center;
}

.navbar li a {
    color: inherit;
    display:block;
    text-align:center;
    padding: 14px 16px;
    text-decoration:none;
}