@import url("https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap");

:root {
    --accent-color: #256ccf;
    --hover-anim-speed: 0.3s;
    --border-radius: 100px;
    --border-width: 4px;
    font-size: 1.25rem;
    height: 100%;
}

img {
    object-fit: contain;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Onest", sans-serif;
}

body {
    background-color: white;
    color: black;
    height: 100%;
}

#content {
    display: flex;
    flex-direction: column;
    align-items: normal;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

li {
    list-style: none;
}

@view-transition {
    navigation: auto;
}

@keyframes slide-out-left {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(-100%);
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0%);
    }
}

@keyframes slide-out-right {
    from {
        transform: translateX(0%);
    }

    to {
        transform: translateX(100%);
    }
}

@keyframes slide-in-right {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0%);
    }
}

::view-transition-old(root) {
    animation: none;
}

::view-transition-new(root) {
    animation: none;
}

html.page-transition-slide-left::view-transition-old(root) {
    animation: 0.2s ease-out both slide-out-left;
}

html.page-transition-slide-left::view-transition-new(root) {
    animation: 0.2s ease-out both slide-in-left;
}

html.page-transition-slide-right::view-transition-old(root) {
    animation: 0.2s ease-out both slide-out-right;
}

html.page-transition-slide-right::view-transition-new(root) {
    animation: 0.2s ease-out both slide-in-right;
}