@import "global.css";

:root {
    --accent-color-1: red;
    --accent-color-2: rgb(0, 212, 0);

    --phecbo-title-font-size: 75px;
    --normal-font-size: 14px;
    
}

* {
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--default-background-color);

    scroll-snap-type: y proximity;
}

.page {
    width: 100vw;
    height: 100vh;

    overflow: hidden;

    position: relative;
}

.page > .background {
    width: 100%;
    height: 100%;
    
    transition: opacity var(--slow-transition);
    opacity: 1.0;

    position: absolute;
    top: 0;
    left: 0;
}

.page > .background.default {
    background: url('resources/TL_BW.jxl') var(--image-background-settings);
}
.page > .background.default.changed {
    background: url('resources/TL_BW2.jxl') var(--image-background-settings);
}
.page > .background.color {
    background: url('resources/TL.jxl') var(--image-background-settings);
}
.page > .background.color.changed {
    background: url('resources/TL2.jxl') var(--image-background-settings);
}
.page > .background.hidden {
    opacity: 0.0;
}

.page > .title.big {
    --font-size: var(--phecbo-title-font-size);

    background: none;
    color: #fff;
    mix-blend-mode: difference;

    font-family: var(--fun-font);
    font-size: var(--font-size);
    font-weight: 300;
    padding: 0 0 calc(var(--font-size) * 0.09) calc(var(--font-size) * 0.2);

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: 
        transform var(--medium-transition),
        background var(--medium-transition);

    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.page > .title.big:hover{
    transform: translate(-50%, -50%) scale(1.1);
    background: red;
}

.page > .scroll {
    --font-size: calc(var(--normal-font-size)*0.75);

    font-family: var(--sans-serif-font);
    font-size: var(--font-size);

    position: absolute;
    left: 50%;
    bottom: var(--font-size);
    transform: translateX(-50%);

    display: flex;
    gap: 1px;
    align-items: center;
    justify-content: center;

    opacity: 0.3;
    transition: opacity var(--slow-transition);

    color: black;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.page > .scroll #arrow-scroll-svg {
    width: calc(var(--normal-font-size)*0.75);

    transform: translateY(5%);
    aspect-ratio: 1/1;
    color: black;
}