/* Elements */
:root {
    --color-header: white;
    --color-text: lightslategray;
    --color-link: rgb(240, 100, 240);
    --color-background: rgb(10, 10, 10);
    --color-container: rgb(25, 25, 25);
    --color-service: rgb(30, 30, 30);
    --color-button-hover-background: rgb(40, 40, 40);

    --border-container: 2px dashed rgb(40, 40, 40);
    --border-header: 2px solid rgb(40, 40, 40);
    --border-button-normal: 2px dashed rgb(40, 40, 40);
    --border-button-hover: 2px solid rgb(60, 60, 60);
    --border-button-light: 2px dashed rgb(70, 70, 70);
    --border-button-light-hover: 2px solid rgb(140, 140, 140);

    --radius-container: 25px;
    --radius-button: 10px;
}

html,
body {
    width: 100%;
    height: 100%;

    padding: 0px;
    margin: 0px;
}
body {
    background: var(--color-background);
    color: var(--color-text);

    display: flex;
    flex-direction: column;
    gap: 10px;
}
a {
    color: var(--color-link);
    font-weight: bold;
}
nav {
    background: var(--color-container);
    color: white;

    border-radius: var(--radius-container);

    width: calc(100% - 50px);
    height: 50px;

    padding: 10px;
    margin-top: 15px;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
}
nav .spacer {
    width: 100%;
}
nav button {
    cursor: pointer;

    background: none;

    width: 50px;
    height: 50px;

    padding: 25px;
    overflow: hidden;

    border: var(--border-button-normal);
    border-radius: 50%;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 1.25rem;
    transition-duration: 250ms;
}
nav button:hover {
    border: var(--border-button-hover);
    border-radius: var(--radius-button);
}
nav .branding {
    display: flex;
    flex-direction: row;
    align-items: center;

    height: 100%;
    gap: 10px;
}
nav .branding img {
    height: 100%;

    border: var(--border-header);
    border-radius: var(--radius-button);
}
nav .branding p {
    font-size: 1.15rem;
}

/* Classes */
.header {
    position: relative;

    background: var(--color-container);

    border: var(--border-header);
    border-radius: var(--radius-container);

    width: calc(100% - 90px);
    height: 200px;

    padding: 25px;
    margin-top: 0px;
    margin-bottom: 15px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}
.header h1 {
    color: black;

    font-size: 3.5rem;
    margin-bottom: 0px;
    padding-bottom: 0px;
}
.header p {
    color: darkslategray;

    margin-top: 0px;
    padding-top: 0px;
}
.container {
    background: var(--color-container);

    border: var(--border-container);
    border-radius: var(--radius-container);

    width: 80%;

    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 2.5%;
    padding-right: 2.5%;

    margin-bottom: 15px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
.container h1 {
    font-size: 2rem;
    color: var(--color-header);
}
.container p {
    margin: 0px;
    padding: 0px;
}
.bubble-container {
    position: absolute;
    background: linear-gradient(45deg, #3388ff 0%, #44ffff 100%);

    border-radius: var(--radius-container);

    width: 100%;
    height: 100%;

    z-index: 1;
    overflow: hidden;
}
.bubble-item {
    position: absolute;

    z-index: 2;

    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Objects */
#banner-text {
    z-index: 2;
}

/* Device Specific */
@media only screen and (max-width: 600px) {
    nav {
        height: 40px;
        width: calc(100% - 30px);

        border-radius: 0px;
        padding: 15px;

        justify-content: center;
        margin-top: 0px;
    }
    nav .spacer {
        width: 100%;
    }
    nav .branding {
        margin: 0px;
        padding-left: 10px;
    }
    nav .branding p {
        font-size: 0rem;
        padding: 0px;
        margin: 0px;
    }

    .header {
        width: calc(100% - 54px);
        border-radius: 0px;
    }
    .bubble-container {
        border-radius: 0px;
    }

    .container {
        width: 90%;
    }
}