code {
    background-color:#c7f5ff;
    margin-left:3px;
    margin-right:3px;
    padding:1px;
    padding-left:7px;
    padding-right:7px;
    border: #1c6b7d 1px solid;
    border-radius: 7px;
}

.key {
    background:#ffffff;
    border: #000000 2px solid;
    padding:1px;
    padding-right:5px;
    padding-left:5px;
    border-radius:6px;
    margin-left:2px;
    color:#000000;
}

hr {
    border:none;
    border-top:2px solid #3eadc6;
    margin:16px;
}

.inline {
    display:inline-block;
}

.float-right {
    float:right;
}

.sidebar-section {
    border:3px dotted #4fb0c5;
    padding:5px;
    margin:10px;
    margin-top:0;
}

.sidebar-section div:hover {
    background:#ffffff;
}

.sidebar-section div {
    cursor:pointer;
}

.sidebar-option {
    cursor:pointer;
}
.sidebar-option:hover {
    background:#ffffff;
}

.sidebar-separator {
    margin:10px;
    margin-bottom:5px;
    border: 2px dashed #4fb0c5;
    background: #9ddae8;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding:5px;
    display:flex;
    justify-content: center;
}

.sidebar-separator-closed {
    border-radius: 0;
    padding-right:16px;
}

.sidebar-separator-closed::before {
    content: ">";
    position:fixed;
    margin-left:130px;
}

.sidebar-text {
    margin: 10px;
    margin-top: 0;
}

.linklike {
    text-decoration: underline;
    color:rgb(0,0,238);
    cursor:pointer;
}


.hidden-a {
    color: #1c6b7d;
    text-decoration:none;
    cursor:pointer;
}

@keyframes becomebig {
    0% {
        scale:1;
    }
    100% {
        scale:1.2;
    }
}

@keyframes becomesmall {
    0% {
        scale:1.2;
    }
    100% {
        scale:1;
    }
}

.hoverscale {
    animation:becomesmall ease-in-out 1 0.2s;
    display:inline-block;
}

.hoverscale:hover{
    scale:1.2;
    animation-name: becomebig;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-duration: 0.2s;
}

a {
    color: rgb(0,0,238);
    text-decoration: underline;
    cursor:pointer;
    position:relative;
}

.pixelart {
    image-rendering: pixelated;
}

.pixelart-inline {
    image-rendering: pixelated;
    display:inline-block;
    transform:translateY(3px);
}

.white-hover:hover {
    background:#ffffff;
}

.half-n-half {
    display:grid;
    grid-template-columns: 50% 50%;
}

.split-into-four {
    display:grid;
    grid-template-columns: 25% 25% 25% 25%;
}

.images-fill-size img {
    width:100%;
}

.clickable {
    cursor:pointer;
}

.quote {
    color: #3eadc6;
    text-align:center;
    font-style: italic;
}

.center-text {
    text-align:center;
}

.split-70-30 {
    display:grid;
    grid-template-columns: 60% 40%;
}

.split-80-20 {
    display:grid;
    grid-template-columns: 80% 20%;
}

.bordering2 {
    border:2px dotted #9ddae8;
    border-radius: 20px;
}

.margins-10 {
    margin:10px;
}

.margins-5 {
    margin:5px;
}

.padding-10 {
    padding:10px;
}

.padding-20 {
    padding:20px;
}

.padding-5 {
    padding:5px;
}

.text-gapper{
    display:inline-block;
    margin:5px;
}

.inline {
    display:inline-block;
}

.radius10 {
    border-radius: 10px;
}
.radius5 {
    border-radius: 5px;
}

.bgblur {
    backdrop-filter: blur(4px);
}