@charset "UTF-8";

body {
    width: 100%;
    background: var(--back);
	cursor: default;
}

.page {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
}

.screen {
    font: 12px/1.55 "SF_m regular";
    color: var(--font);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.navigation {
    display: flex;
    flex-direction: row;
    opacity: 0;
    animation: navFade var(--fadeIn) ease-in-out var(--fadeDelay) forwards;
}

@keyframes navFade {
  to {
    opacity: 1;
  }
}

.buttons {
    display: flex;
    flex-direction: row;
    gap: 6px;
}

.sections {
    margin-left: auto;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.click {
    transition: var(--click);
}

body.hasHover .click:hover {
    color: var(--hover);
    cursor: pointer;
}

.click > svg {
    width: var(--icons-size);
    height: var(--icons-size);
    display: block; 
}

.click > svg * {
    fill: currentColor;
    stroke: currentColor;
    transition: fill var(--transition), stroke var(--transition);
}

.slide {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.slide > img {
    border-radius: 8px;
}

a {
    color: var(--font);
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.8px;
    text-underline-offset: 2.2px;
    position: relative;
    transition: var(--click);
}

body.hasHover a:hover {
    color: var(--hover);
    cursor: pointer;
}

.info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}