html{
    background-color: #e7e2f0;
    transition: background-color 0.5s;

    margin: 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;

}
body{
    background-color: #d3ced9;
    color:#383838;
    transition: color 0.5s, background-color 0.5s;

    margin: 0px;
    width: 100%;
    
    max-width: 1500px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    font-family: sans-serif;
}
a{
    transition: color 0.5s;
    color: #5a86df;
    text-decoration: none;
}
a:hover{
    cursor: pointer;
    text-decoration: underline;
}
#Logo1{
    opacity: 1;
    transition: opacity 0.5s;
}
#Logo2{
    opacity: 0;
    transition: opacity 0.5s;
}

.borderLeft{
    border-left: solid 2px #ececec;
    transition: border-left 0.5s;
}
.borderRight{
    border-right: solid 2px #ececec;
    transition: border-right 0.5s;
}
.borderTop{
    border-top: solid 2px #ececec;
    transition: border-top 0.5s;
}
.borderBottom{
    border-bottom: solid 2px #ececec;
    transition: border-bottom 0.5s;
}

html:has(#darkMode:checked){
    background-color: #3d3845;
}
html:has(#darkMode:checked) body{
    background-color: #4a4355;
    color:#ecdfff;
}

html:has(#darkMode:checked) .borderLeft{
    border-left: solid 2px #716d9a;
}
html:has(#darkMode:checked) .borderRight{
    border-right: solid 2px #716d9a;
}
html:has(#darkMode:checked) .borderTop{
    border-top: solid 2px #716d9a;
}
html:has(#darkMode:checked) .borderBottom{
    border-bottom: solid 2px #716d9a;
}

html:has(#darkMode:checked) #Logo1{
    opacity: 0;
}
html:has(#darkMode:checked) #Logo2{
    opacity: 1;
}
html:has(#darkMode:checked) a{
    color: #96c9ff;
}

#middle{
    width: 65%;
}

#titleImageHolder{
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.navigator{
    position: sticky;
    top: 0px;
    width: calc(100% - 60px);;
    justify-self: center;
}

.center{
    width: calc(100% - 60px);
    justify-self: center;
}

#bodyText{

}
#bodyText > sup{
    line-height: 0;
}
.code{
    background-color: #1e1e1e;
    padding: 2px;
    border-radius: 4px;
    border: solid 1px gray;
    color: #e7e7e7;
    font-family: monospace;
}