/* Chrome Error Page Styles */
body {
    --background-color: var(--portfolio-background-color); /* Google Gray 900 */
    --error-code-color: rgb(154, 160, 166);
    --google-blue-300: rgb(138, 180, 248); /* Light Google Blue */
    --google-blue-600: rgb(66, 133, 244); /* Google Blue */
    --google-blue-700: rgb(26, 115, 232); /* Dark Google Blue */
    --google-gray-50: rgb(248, 249, 250);
    --google-gray-100: rgb(241, 243, 244);
    --google-gray-300: rgb(218, 220, 224);
    --google-gray-500: rgb(154, 160, 166);
    --google-gray-600: rgb(128, 134, 139);
    --google-gray-700: rgb(66, 133, 244); /* Google Blue */
    --google-gray-800: rgb(60, 64, 67);
    --google-gray-900: var(--portfolio-background-color);
    --heading-color: rgb(154, 160, 166);
    --link-color: rgb(66, 133, 244); /* Google Blue */
    --primary-button-fill-color-active: var(--google-blue-700);
    --primary-button-fill-color: rgb(66, 133, 244); /* Google Blue */
    --primary-button-text-color: rgb(32, 33, 36); /* Google Gray 900 */
    --quiet-background-color: rgb(247, 247, 247);
    --secondary-button-border-color: var(--google-gray-500);
    --secondary-button-fill-color: #fff;
    --secondary-button-hover-border-color: var(--google-gray-600);
    --secondary-button-hover-fill-color: var(--google-gray-50);
    --secondary-button-text-color: rgb(66, 133, 244); /* Google Blue */
    --small-link-color: var(--google-gray-700);
    background: var(--background-color);
    word-wrap: break-word;
    font-family: system-ui, sans-serif;
    font-size: 75%;
}

.icon {
    background-repeat: no-repeat;
    background-size: 100%;
    height: 85px; /* Increased icon size */
    margin: 0 0 45px; /* Adjusted margin */
    width: 85px; /* Increased icon size */
    filter: hue-rotate(90deg); /* Add a green tint to the icon */
}

.icon-generic {
    content: image-set(
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIAQMAAABvIyEEAAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAENJREFUeF7tzbEJACEQRNGBLeAasBCza2lLEGx0CxFGG9hBMDDxRy/72O9FMnIFapGylsu1fgoBdkXfUHLrQgdfrlJN1BdYBjQQm3UAAAAASUVORK5CYII=) 1x,
        url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQAQMAAADdiHD7AAAABlBMVEUAAABTU1OoaSf/AAAAAXRSTlMAQObYZgAAAFRJREFUeF7t0cENgDAMQ9FwYgxG6WjpaIzCCAxQxVggFuDiCvlLOeRdHR9yzjncHVoq3npu+wQUrUuJHylSTmBaespJyJQoObUeyxDQb3bEm5Au81c0pSCD8HYAAAAASUVORK5CYII=) 2x
    );
}

h1 {
    color: var(--heading-color);
    font-size: 1.8em; /* Slightly larger font size */
    font-weight: bold; /* Make text bold */
    line-height: 1.25em;
    margin-bottom: 18px; /* Adjusted margin */
}

#main-message h1 {
    font-family: system-ui, sans-serif; /* Use default system font for error page heading */
}

#main-message p {
    color: var(--heading-color); /* Match the color of the h1 heading */
}

.error-code {
    color: var(--error-code-color);
    font-size: .9em; /* Slightly larger font size */
    margin-top: 14px; /* Adjusted margin */
    text-transform: uppercase;
}

button {
    border: 0;
    border-radius: 20px;
    box-sizing: border-box;
    color: var(--primary-button-text-color);
    cursor: pointer;
    float: right;
    font-size: .875em;
    margin: 0;
    padding: 8px 16px;
    transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.blue-button {
    background: #8ab5f8; /* Reload button color */
}

button:active {
    background: var(--primary-button-fill-color-active); /* Use active color variable */
    outline: 0;
}