/* Copyright (C) 2023 Furasoft Private Limited.  All Rights Reserved. */

:root{
    --root-font-size: 0.1vmin;

    --void-background: #1b1b1f;
    --void-background-highlight: #2a2a38;
    --void-background-tint-standard: hsla(240, 7%, 11%, 0.3);
    --fresh-blue: #d8e2ff;
    --friendly-white: rgb(240, 240, 240);
    --pure-white: white;
    --pure-black: black;
    
    --top-navigation-bar-height:72rem;
    --website-content-height: calc(100vh - var(--top-navigation-bar-height));
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{
    font-size: var(--root-font-size);
}

body{
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    height: 100vh;
    width: 100vw;
    font-family: Arial, Helvetica, sans-serif;
}

.website-wrapper{
    height: 100vh;
    width: 100vw;
    background-color: var(--void-background);
}

.top-navigation-bar{
    position: fixed;
    z-index: 9;
    height: var(--top-navigation-bar-height);
    padding: 0 12rem;
    width: 100%;
    background-color: var(--void-background);
    display: grid;
    grid-template-rows: auto;
}


.top-navigation-bar-content{
    height: var(--top-navigation-bar-height);
    width: 100%;
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
}

.top-navigation-bar-heading{
    color: var(--fresh-blue);
    font-size: 24rem;
    font-weight: 600;
    line-height: var(--top-navigation-bar-height);
    padding: 0 24rem;
    letter-spacing: 3rem;
}

.top-navigation-bar-heading-link{
    text-decoration: none;
    color: var(--fresh-blue);
}

.top-navigation-bar-menu-item{
    font-size: 20rem;
    font-weight: 500;
    line-height: var(--top-navigation-bar-height);
    letter-spacing: 1rem;
    display: inline-block;
    padding: 0 24rem;
    font-weight: 500;
    width: initial;
}

.top-navigation-bar-menu-item-spacer-bigger-screen{
    display: inline-block;
    width: 24rem;
}

#top-navigation-bar-menu-icon-small-screen{
    font-size: 48rem;
    font-weight: 500;
    line-height: var(--top-navigation-bar-height);
    letter-spacing: 1rem;
    display: inline-block;
    padding: 0 24rem;
    font-weight: 500;
    color: var(--friendly-white);
}

.top-navigation-bar-menu-link{
    text-decoration: none;
    color: var(--friendly-white);
}

.top-navigation-bar-menu-link :hover{
    background-color: var(--void-background-highlight);
}

.top-navigation-bar-menu-active-item{
    background-color: var(--void-background-highlight);
}

#top-navigation-bar-menu-container-bigger-screen{
    display: block;
}

#top-navigation-bar-menu-icon-container-small-screen{
    display: none;
}

#top-navigation-bar-menu-container-small-screen{
    display: none;
    position: absolute;
    z-index: 6;
    top: var(--top-navigation-bar-height);
    right: 100vw;
    bottom: 0;
    width: 100vw;
    padding: 0 36rem;
    overflow-x: hidden;
    overflow-y: auto;
    transition-property: right;
    transition-duration: 250ms;
    background-color: var(--void-background);
}

.top-navigation-bar-menu-divider-small-screen{
    height: 1rem;
    width: 100%;
    background-color: var(--friendly-white);
}

.content{
    position: absolute;
    z-index: 5;
    top: var(--top-navigation-bar-height);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-template-rows: auto min-content;
}

.footer{
    color: var(--friendly-white);
    font-size: 16rem;
    font-weight: 500;
    letter-spacing: 1.5rem;
    padding: 24rem 36rem;
    line-height: 1.5;
}


@media screen and ((max-width: 1000px) or (max-height: 1000px))  {
    :root{
        --root-font-size: 1px;
    }
}

@media screen and (max-width: 1000px)  {
    .top-navigation-bar-menu-item{
        width: 100%;
        text-align: center;
    }

    #top-navigation-bar-menu-container-bigger-screen{
        display: none;
    }

    #top-navigation-bar-menu-icon-container-small-screen{
        display: block;
    }

    #top-navigation-bar-menu-container-small-screen{
        display: block;
    }
}


@media screen and ((max-width: 500px) or (max-height: 500px))  {
    :root{
        --root-font-size: 0.2vmin;
    }
}