h1{
        margin-bottom: 0% ;
        font-family: 'Pixelta';
        color: var(--mainColor);
        font-size: 3rem;
    }

    a{
        color: var(--mainColor) !important;
    }

    body{
        margin: 0%;
        background-color:  var(--mainColor);
        color: var(--mainColor);
    }
    #site {
        width: min(100%, 745px);
        margin-inline: auto;
        padding-inline: clamp(1rem, 5vw, 5rem);
        padding-block: clamp(1rem, 1vw, 6rem);
        padding-bottom: 0rem;
        display: flex;
        flex-direction: row;
    }
    .main {
        height: 96vh;
        background-color: white;
        width: min(100%, 680px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    }

    .content {
        padding: 0% 5% 1% 5%;
        height: 82%;
        overflow-wrap: break-word;
        overflow-y: scroll;
        scrollbar-color: var(--mainColor) transparent;   
        font-family: 'Consolas';
        scrollbar-width: thin;
        text-align: justify;
        box-shadow: 7px 0 5px -6px rgba(47, 81, 122, 0.4);
        z-index: 2;
        position: relative;
    }

    .title{
        height: 10%;
        padding: 1% 5% 1% 5%;
        overflow-wrap: break-word;
        text-align: center;
    }

    .title.double{
        height: 15% !important;
    }

    .nav{
        font-family: 'Pixelta';
        color: var(--mainColor);
        text-align: center;
        font-size: 1.4rem;
        cursor: pointer;
        width: min(10%, 55px);
        flex-direction: column;
        align-items: baseline;
    }

    .nav div {
        background: white;
        padding: 12px 8px;
        writing-mode: vertical-rl;
        min-height: 145px;
        box-sizing: border-box;
        position: relative;
         
    }

    .nav .elem {
        border-bottom: 2px solid var(--mainColor);
        z-index: 1;
    }

    .nav .elem:hover{
        z-index: 2;
        box-shadow: 8px 0 5px 3px color-mix(in srgb, var(--mainColor) calc(var(--shadowOpacity) * 100%), transparent);;
        border: none;;
    }

    .nav .mainElem {
        z-index: 2;
        box-shadow: 8px 0 5px 3px color-mix(in srgb, var(--mainColor) calc(var(--shadowOpacity) * 100%), transparent);;
        cursor: default;
    }

    p{
        color: var(--mainColor);
    }

    .imgContainer{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;

    }

    img {
        filter:
        grayscale(1)
        sepia(1)
        hue-rotate(var(--image-hue))
        saturate(1);
    }

    .col{
        flex-direction: column;
    }

    .width50{
        max-width: 50%;
    }
    .row{
        flex-direction: row;
    }

    #goBack a{
        text-decoration: none;
    }

    .sub{
        text-align: center;
        font-style: italic;
        font-weight: lighter;
    }

    img{
        max-width: 80%;
    }