/* CSS */
html {
    background: url("../images/surfaceBox.svg") no-repeat left top,
    url("../images/thumbnail_image002.png") no-repeat right center fixed, #1E1733;

    -webkit-background-size: 100vh;
    -moz-background-size: 100vh;
    -o-background-size: 100vh;
    background-size: 100vh;

    opacity: 1;
    height: 100vh;
    width: auto;
    z-index: -1;
}


/*********************GRID SYSTEM**********************/
.container {
    display: grid;
    grid-template-columns: 0.5fr 1fr 1fr 1fr 0.5fr;
    grid-template-rows: 1.5fr 1.5fr 1.5fr;
    gap: 0px 0px;
    grid-template-areas:
    ". . . . ."
    ". login . . ."
    ". . . . .";
    height: 100%;
}

.profile-grid {
    display: grid;
    grid-template-columns: 0.5fr 2fr 0.5fr;
    grid-template-rows: 0.5fr 1fr 2fr 0.5fr;
    gap: 0px 0px;
    grid-template-areas:
    ". . ."
    ". Logo ."
    ". Form ."
    ". . .";
    grid-area: login;
}

.title-grid {
    grid-area: Logo;
    /*background-image: url("../images/PINIT_black_logo.svg");
    background-size: cover;*/
}

.form-grid {
    grid-area: Form;
}

/******************End of Grid System*************************/


.save-button {
    background-color: #FFFFFF;
    border: 1px solid #c9c9c9;
    border-radius: 4px;
    box-sizing: border-box;
    color: #111827;
    font-family: "Roboto", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: .75rem 1rem;
    text-align: center;
    text-decoration: none #D1D5DB solid;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    max-width: 400px;
    width: 90vw;
    height: 60px;
    margin: 5px;
}


.save-button:hover {
    background-color: rgb(249, 250, 251);
    border-color: #1a85b9;
}

.save-button:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.save-button:focus-visible {
    box-shadow: none;
}

.navDot img {
    width: 17px;
    position: absolute;
    margin: 4px;
}

.intend-text {
    margin: 8px;
}