@import url(./font/lato/lato.css);

@font-face {
    font-family: 'custom-megrim';
    src: url('./font/megrim.ttf');
}

* {
    box-sizing: border-box;
    color: white;
}

svg {
    overflow: visible;
}

html, body {
    margin:0;
    padding: 0;
}

html {
    background-color: rgb(15, 15, 15);
}

.btn {
    display: block;
    padding: 8px;
    color: white;
    width: fit-content;
    font-family: 'custom-megrim';
    /* outline: solid 1px white; */
    /* border-radius: 4px; */
    /* transition: outline-offset ease-out 0.2s, background-color ease-out 0.2s; */
    border-radius: 8px 8px 0 0;
    background-color: #000B;
    border-bottom: solid 1px white;
    border-width: 1px;
}

.btn:hover {
    border-width: 3px;
    /* outline-offset: 4px; */
}

/* .btn {
    display: block;
    padding: 8px;
    color: white;
    width: fit-content;
    font-family: 'custom-megrim';

    --b: 2px;
    --c: white;
    --w: 8px;
    border: var(--b) solid #0000;
    --_g: #0000 90deg,var(--c) 0;
    --_p: var(--w) var(--w) border-box no-repeat;
    background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p),
    #000E;
    transition: background ease-out 0.2s, letter-spacing ease-out 0.2s;
    border-radius: 4px;
}

.btn:hover {
    background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--_g)) 0    0    / var(--_p),
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g)) 100% 0    / var(--_p),
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--_g)) 0    100% / var(--_p),
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p),
    #444E;
    letter-spacing: 4px;
} */

.btn-galaxy {
    text-decoration: none;
    width: max-content;
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 22px;

    display: flex;
    align-items: center;
    gap: 0px;
    transition: gap ease-out .2s;
}

.btn-galaxy:hover {
    outline-offset: 8px;
    background-color: #333B;
    gap: 8px;
}

.btn-galaxy > img {
    height: 16px;
    width: 0px;
    border-radius: 0;
    transition: width ease-out .2s;
}

.btn-galaxy:hover > img {
    width: 16px;
}

.galaxy-container {
    padding: 64px;
}

#nav-galaxy {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

#nav-galaxy svg {
    position: absolute;
}

#nav-origin {
    width: 0;
    height: 0;
    position: absolute;
    z-index: 5;
}

.paragraph {
    direction: rtl;
    text-align: end;
    padding-left: 16px;
    font-family: 'custom-megrim';
    font-size: 28px;
    margin: 32px;
    line-height: 1.5em;
}

.paragraph * {
    direction: ltr;
    text-align: left;
    font-family: 'custom-megrim';
}

body.columns {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding-top: 64px;
}

body.nonav {
    padding-top: 0px;
}

@keyframes wave-animation {
    0% {
        background-position-x: 0px;
    }
    100% {
        background-position-x: 1024px;
    }
}

nav {
    position: fixed;
    z-index: 5;
    top: 0;
    width: 100%;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;

    background: url('/assets/img/wave.svg');
    background-repeat: repeat-x;
    background-size: 1024px 512px;
    background-position: bottom;

    animation: wave-animation 8s linear infinite;

    padding-bottom: calc(16px + 22px);
    margin-bottom: 32px;
}

.nav-buttons {
    display: flex;
    gap: 16px;
}

.nav-buttons a {
    text-decoration: none;
    letter-spacing: 0 !important;
    padding: 4px 8px;
}

.nav-buttons a:hover {
    padding: 2px 8px;
}

.logo {
    display: flex;
    gap: 4px;
    align-items: center;
    text-decoration: none;
}

#logo-sans-attendre {
    width: 32px;
    height: 32px;
}

.logo-label {
    font-family: 'custom-megrim';
}
/* 
.margin-navbar {
    padding-top: 64px;
} */

/* Favicon */

#buffer-favicon {
    width: 32px;
    height: 32px;
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tree {
    position: fixed;
    z-index: 10;
    left: 50%;
    top: calc(32px + 16px + 16px);
    transform: translateX(-50%);

    font-family: 'Lato';
    font-weight: 300;

    background: black;
    border: solid 1px white;
    border-radius: 8px;

    padding: 8px 12px;
    pointer-events: none;
}

.tree a {
    text-decoration: none;
    border-bottom: solid 1px white;
    pointer-events: all;
}

.tree a:hover {
    border-bottom: solid 2px white;
}

#nav-burger {display: none;}
#burger-menu {display: none;}
@media (orientation: portrait) {
    .paragraph {margin: 16px;}
    p {font-size: 0.8em;}
    body.columns {
        display: flex;
        flex-direction: column;
    }
    .galaxy-container {
        padding: 16px;
        aspect-ratio: 1/1;
    }
    #nav-origin {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 16px;
    }
    .btn-galaxy {
        width: 100%;
        position: initial;
        transform: none !important;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }
    .btn-galaxy img {
        width: 16px;
    }
    #btn-logo {
        opacity: 0;
    }
    svg line, svg circle {
        opacity: 0;
    }

    nav {
        width: 100%;
        justify-content: space-between;
        padding-bottom: 28px;
    }

    .nav-buttons, .tree {
        display: none;
    }

    #nav-burger {
        display: block;
    }

    #burger-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: fit-content;
        padding: 32px;
        padding-top: 16px;
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 16px;
        z-index: 20;
        background: #000;
        border-radius: 0 0px 0 8px;
        /* border: solid 1px white;
        border-top: none;
        border-right: none; */
        outline: solid 1px transparent;
        outline-offset: 8px;
        transform: translateX(100%);
        transition: transform ease-out 0.2s;
    }

    body.burger-opened #burger-menu{
        transform: translateX(0%);
        outline: solid 1px white;
    }

    #burger-menu a {
        width: 100%;
        text-decoration: none;
        font-size: 1.2em;
    }

    body * {
        transition: filter ease-out 0.2s;
    }

    body.burger-opened > *:not(#burger-menu) {
        filter: blur(4px);
        pointer-events: none;
    }
}