:root {
    --night: #243242;
    --sky: #ACC3DD;
    --gold: #EACE5D;
    --sidebar: rgba(172, 195, 221, 0.5);
    --sidebar-width: 500px
}

@keyframes slideInText {
    0% {
        transform: translateX(100%);
    }

    100% {
        transform: translateX(0);
    }

}

body {
    font-family: 'Inter';
    overflow-x: hidden;
}

#main-landing {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#logo-container svg {
    height: 100%;
    width: 100%;
    fill: var(--night);
}

#logo-container {
    max-height: 25vh;
    max-width: 33vw;
    width: 300px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 20px;
}

#sidebar {
    position: absolute;
    top: 0;
    right: 0;
    /* right: calc(-1 * var(--sidebar-width)); */
    height: 100vh;
    overflow-y: auto;
    width: var(--sidebar-width);
    max-width: 40vw;
    background-color: var(--sidebar);
    padding: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    box-sizing: border-box;
    animation: slideInText 1s forwards;
}

#sidebar > div {
    width: 100%;
}

.explain-card {
    width: 100%;
    background-color: white;
    border-radius: 25px;
    margin-bottom: 20px;
    height: auto;
    padding: 20px;
    box-sizing: border-box;
    animation: slideInText 1s forwards;
}

.explain-card > div {
    padding: 12px 0px;
}

.explain-small-logo {
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.explain-small-logo svg {
    height: 100%;
    fill: var(--night)
}

.explain-title {
    color: var(--night);
    font-size: 28px;
    font-weight: 600;
}

.explain-text {
    color: var(--night);
    font-size: 21px;
    font-weight: 200;
}

.small-text {
    color: var(--night);
    font-size: 12px;
    font-weight: 100;
}

#button-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

button {
    width: 200px;
    min-height: 50px;
    padding: 16px 24px;
    max-width: 50%;
    background-color: white;
    border: 0px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 400;
    margin-bottom: 10px;
    cursor: pointer;
    transition: transform 0.8s;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

button:active {
    transform: scale(0.9);
}

button:hover {
    filter: brightness(90%);
    transform: scale(1.05);
}

.tooltip-button {
    height: 20px;
}

.tooltip-button svg {
    height: 100%;
}

.darkongoldtooltip circle {
    fill: var(--night)
}

.darkongoldtooltip path {
    fill: var(--gold);
    stroke: var(--gold);
}

.darkonlighttooltip circle {
    fill: var(--sky)
}

.darkonlighttooltip path {
    fill: var(--night);
    stroke: var(--night);
}

.lightondarktooltip circle {
    fill: var(--night)
}

.lightondarktooltip path {
    fill: var(--sky);
    stroke: var(--sky);
}