@font-face {
    font-family: 'Graphik';
    src: url('../fonts/Graphik-Extralight.eot');
    src: url('../fonts/Graphik-Extralight.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Graphik-Extralight.woff2') format('woff2'),
    url('../fonts/Graphik-Extralight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fonts/Graphik-Light.eot');
    src: url('../fonts/Graphik-Light.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Graphik-Light.woff2') format('woff2'),
    url('../fonts/Graphik-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fonts/Graphik-Medium.eot');
    src: url('../fonts/Graphik-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Graphik-Medium.woff2') format('woff2'),
    url('../fonts/Graphik-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Graphik';
    src: url('../fonts/Graphik-Regular.eot');
    src: url('../fonts/Graphik-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Graphik-Regular.woff2') format('woff2'),
    url('../fonts/Graphik-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/*
--------------------------------------------------
    Variables
--------------------------------------------------
*/
:root {
    --color: #ed3237;
    --color-rgb: 237,50,55;
    --color-dark: #4d1213;
    --color-dark-rgb: 77,18,19;
    --color-light: #fff;
    --color-light-rgb: 255, 255, 255;

    --color-text: #e5e5e5;
    --color-text-sub: #a6a6a6;

    --h-header: 8rem;

    --duration-fade: .5s ease-out;
    --duration-toggle: .3s ease-out;

    --padding-x: 3rem;
    --margin-items-top: 5rem;

    --bg-primary: #0d0d0d;
    --bg-overlay: rgba(0, 0, 0, .6);

    --border-color: #404040;
    --border-around: solid thin var(--border-color);

    --shadow-color: #1a1a1a;
    --shadow-around: .2rem .5rem 2rem rgba(0,0,0,.6)
}


/*
--------------------------------------------------
    Elements
--------------------------------------------------
*/
html {
    font-size: 62.5%
}

body {
    font-family: "Graphik", sans-serif, Roboto, Tahoma, Arial, Verdana;
    font-weight: 300;
    font-style: normal;
    font-size: 1.5rem;
    line-height: 1.6;

    background: var(--bg-primary);
    color: var(--color-text)
}

.vr-paragraph strong {
    color: var(--color)
}

/*
--------------------------------------------------
    User Interface
--------------------------------------------------
*/
.ui-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.ui-empty {
    padding: 10rem 0;
    text-align: center;
    color: var(--color-text-sub)
}

/*
------------------------------
*/
.ui-overlay {
    position: relative;
}
.ui-overlay:before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, var(--bg-overlay) 50%, transparent);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: var(--duration-fade);
}
/*
------------------------------
*/
.ui-overlay-bottom {
    position: relative;
}
.ui-overlay-bottom:before {
    content: '';
    width: 100%;
    height: 0;
    background: linear-gradient(to top, rgba(13,13,13,.75), transparent);
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    transition: var(--duration-fade);
}

/*
------------------------------
*/
.ui-polygon {
    position: relative;
}
.ui-polygon svg {
    fill: #1a1a1a;
    position: absolute;
    left: 0;
    bottom: -2px;
    z-index: 1;

}
/*
------------------------------
*/
.ui-button {
    border: dashed thin var(--border-color);
    padding: 1.6rem 4rem;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: .1rem;
    display: inline-block;
    margin: auto;
    position: relative;
    user-select: none;
    white-space: nowrap;
    transition: var(--duration-fade);
}
.ui-button:after {
    content: '';
    width: 20%;
    height: 0;
    border-top: dashed thin var(--border-color);
    position: absolute;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
    transition: inherit;
    transform-origin: left center;
}