/*
* Copyright (c) Microsoft Corporation. All rights reserved.
*/

html {
    height: 100%;
    margin: 0;
    padding: 0;
    --pgBlack: #000000;
    --pgWhite: #FFFFFF;
    --pgGray160: #323130;
    --pgGray200: #1B1A19;
    --pbiPrimary: #F2C811;
    --pbiShade10: #DAB50F;
    --pbiShade20: #A98C0C;
    --focusBoxShadowColor: #51CAEE;
    --segoeFontFamily: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --primaryButtonBackgroundColor: #117865; 
    --buttonBorderRadius: 4px;
    --primaryButtonBorder: 2px solid var(--primaryButtonBackgroundColor);
    --primaryButtonColor: #ffffff;
    --primaryButtonBackgroundColorHover: #0c695a;
    --primaryButtonHoverBorder: 2px solid var(--primaryButtonBackgroundColorHover);
    --primaryButtonBackgroundColorActive: #033f38;
    --primaryButtonActiveBorder: 2px solid var(--primaryButtonBackgroundColorActive);
    --primaryButtonOutline: 1px solid #ffffff;
    --primaryButtonOutlineOffset: -3px;
    --primaryButtonOutlineBorder: 2px solid #000000;
    --primaryButtonOutlineBorderActive: 2px solid #000000;
}

.pg-h4 {
    font-size: 16px;
    font-family: var(--segoeFontFamily);
    font-weight: 600;
    line-height: 22px;
}

.pg-h6 {
    font-size: 14px;
    font-family: var(--segoeFontFamily);
    font-weight: 400;
    line-height: 20px;
}

.pg-h7 {
    font-size: 14px;
    font-family: var(--segoeFontFamily);
    font-weight: 600;
    line-height: 18px;
}

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

#topBar {
    height: 48px;
    padding: 0 16px;
    background-color: var(--pgGray200);
    cursor: default;
    display: flex;
    justify-content: space-between;
    margin: 0;
}

#playgroundLogoText {
    color: var(--pgWhite);
    text-decoration: none;
    margin: auto 0;
}

#content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: calc(100% - 48px);
}


#errorPageTitle {
    color: var(--pgGray160);
    margin-top: 64px;
    text-align: center;
}

#errorPageMessage {
    color: var(--pgGray160);
    padding: 50px 0 30px;
    text-align: center;
}

#backHomeButton {
    align-items: center;
    display: inline-flex;
    background-color: var(--primaryButtonBackgroundColor);
    height: 32px;
    padding: 0px 20px;
    border-radius: var(--buttonBorderRadius);
    border: var(--primaryButtonBorder);
    color: var(--primaryButtonColor) !important;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;

    &:hover {
        background-color: var(--primaryButtonBackgroundColorHover);
        border: var(--primaryButtonHoverBorder);
    }

    &:focus-visible {
        border: var(--primaryButtonOutlineBorder);
        outline: var(--primaryButtonOutline);
        outline-offset: var(--primaryButtonOutlineOffset);
    }

    &:active {
        background-color: var(--primaryButtonBackgroundColorActive);
        border: var(--primaryButtonActiveBorder);
    }

    &:active:focus-visible {
        background-color: var(--primaryButtonBackgroundColorActive);
        border: var(--primaryButtonOutlineBorderActive);
        outline: var(--primaryButtonOutline);
        outline-offset: var(--primaryButtonOutlineOffset);
    }
}

img {
    width: min(1370px, 100%);
    margin-top: 200px;
}

@media (max-height: 700px) {
    img {
        display: none;
    }
}

@media (max-height: 860px) {
    #content {
        justify-content: center;
    }

    img {
        margin-top: auto;
    }
}