*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Lexend";
    scroll-behavior: smooth;
}

:root{
    --bg-body: #000000ff;
    --bg-header: #00000000;
    --color-h1: #fff;
    --color-h2: #fff;
    --color-h3: #fff;
    --color-text: #ffffffff;
    --gray-scale-1: #000;
    --gray-scale-2: #101010;
    --gray-scale-3: #181818;
    --gray-scale-4: #232323;
    --gray-scale-5: #252525;
    --gray-scale-6: #303030;
    --gray-scale-7: #2d2d2d;
    --gray-scale-8: #fff;
    --color-highlighted: #ff9800;
    --color-primary: #fca311ff;
}

.light-mode{
    --bg-body: #fff;
    --bg-header: #00000000;
    --color-h1: #303030;
    --color-h2: #303030;
    --color-h3: #303030;
    --color-text: #000;
    --gray-scale-1: #ffffff;
    --gray-scale-2: #101010;
    --gray-scale-3: #f0f0f0;
    --gray-scale-4: #232323;
    --gray-scale-5: #252525;
    --gray-scale-6: #303030;
    --gray-scale-7: #2d2d2d;
    --gray-scale-8: #000000;
    --color-highlighted: #ff9800;
    --color-primary: #fca311ff;
}

body{
    min-height: 100dvh;
    background-color: var(--bg-body);
    color: var(--color-text);
}

a{
    color: var(--color-text);
    text-decoration: none;
}


.screnView{
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;

    visibility: hidden;
    opacity: 0;

    transition: opacity 0.2s, visibility 0.2s;
}

.screnView-activate{
    z-index: 10;
    background-color: #000000c7;
    visibility: visible;
    opacity: 1;
}