:root {


    /* NAME + POSITION */
    --name: "Samuel Einheri";
    --position: "Game Designer";

    /* NAME */
    --name-font-size: 24px;
    --name-font-weight: 700;

    /* POSITION */
    --position-font-size: 16px;
    --position-font-weight: 400;

    /* NAME CONTAINER */
    --container-width: 300px;
    --container-height: 60px;

    /* CENTRE BUTTON NAMES */
    /*--portfolio-button-name: "PORTFOLIO";
    --prototypes-button-name: "PROTOTYPES";
    --about-me-button-name: "ABOUT ME";*/

    /* CENTRE TEXT BUTTONS */
    --button-font-size: 16px;
    --button-font-weight: 700;
    --button-gap: 20px;

    /* SHARED SETTINGS */
    --font-family: "Open Sans", sans-serif;
    --font-color: #DFE6E9;
    --button-hover-color: #FFC20A;

    /* MENU LAYOUT */
    --menu-bottom-offset: 80px;
    --menu-side-offset: 150px;

    /* ICON BUTTON SETTINGS */
    --icon-button-size: 48px;
    --icon-button-gap: 20px;

}

html,
body {
    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

video {
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    pointer-events:none;
}

/* MAIN CONTAINER */
.menu-container {
    position: fixed;
    left: 50%;
    bottom: var(--menu-bottom-offset);
    transform: translateX(-50%);

}

/* LEFT NAME BUTTON */
.profile-button {
    position: absolute;
    right: calc(100% + var(--menu-side-offset));
    top: 50%;
    transform: translateY(-50%);
    width: var(--container-width);
    height: var(--container-height);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}

.name-box {
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:center;
    font-family:var(--font-family);
    color:var(--font-color);
    text-align:center;
}

.name {
    font-size:var(--name-font-size);
    font-weight:var(--name-font-weight);
    transition:color .2s ease;
}

.name::before {
    content:var(--name);
}

.position {
    font-size:var(--position-font-size);
    font-weight:var(--position-font-weight);
    transition:color .2s ease;
}

.position::before {
    content:var(--position);
}

.profile-button:hover .name,
.profile-button:hover .position {
    color:var(--button-hover-color);
}

/* CENTRE TEXT MENU */
.button-bar {
    display: flex;
    align-items: center;
    gap: var(--button-gap);
    font-family: var(--font-family);
}

.button {
    background:transparent;
    border:none;
    padding:8px 16px;
    color:var(--font-color);
    font-family:inherit;
    font-size:var(--button-font-size);
    font-weight:var(--button-font-weight);
    cursor:pointer;
}

.button:hover {
    color:var(--button-hover-color);
}

/* RIGHT ICON MENU */
.icon-bar {
    position: absolute;
    left: calc(100% + var(--menu-side-offset));
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: var(--icon-button-gap);
}

.icon-button {
    width:var(--icon-button-size);
    height:var(--icon-button-size);
    border:none;
    padding:0;
    background:transparent;
    cursor:pointer;
    position:relative;
}

.icon-button img {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    object-fit:contain;
    transition:opacity .2s ease;
}

.icon-highlighted {
    opacity:0;
}

.icon-button:hover .icon-normal {
    opacity:0;
}

.icon-button:hover .icon-highlighted {
    opacity:1;
}