:root {
    --twinetic-blue: #072249;
    --twinetic-green: #BCCE00;
}

html, body {
    height: 100vh;
    width: 100vw;
    margin: 0;
}

body {
    background: url("../images/twinetic-hub-background-less.svg") no-repeat;
    background-size: 100% 100%;
}

main {
    height: 100%;
}

/* @see https://css-tricks.com/snippets/css/complete-guide-grid/#aa-css-grid-properties */
#grid-container-5x5 {
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 5% 10% auto 10% 5%;
    grid-template-rows: 5% 20% auto 10% 5%;
}

#upper-middle-right-center{
    background: url("../images/twinetic-logo.svg") no-repeat;
}

/* @see https://css-tricks.com/snippets/css/complete-guide-grid/#aa-css-grid-properties */
#grid-container-3x3 {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(50px, 1fr) minmax(100px, 600px) minmax(50px, 1fr);
    grid-template-rows: 20% auto;
}

#login-image-title {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-title {
    flex-grow: 1;
    color: white;
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 40px;
}

#open-imprint{
    background-color: transparent;
    border: none;
    color: var(--twinetic-green);
    text-align: center;
    text-decoration: none;
    font-size: 24px;
    margin: 4px 2px;
    cursor: pointer;
}

#close-imprint-dialog {
    color: black;
    background-color: white;
    border-radius: 12px;
    border: 5px solid black;
    transition: color 0.6s ease, background-color 0.6s ease, transform 0.6s ease-in-out;
    aspect-ratio: 1 / 1; /* Keep button quadratic */
}

#close-imprint-dialog:hover {
    color: white;
    background-color: black;
}

#close-imprint-dialog > i {
    font-size: 2.5rem;
}

/*
############ DEBUG #############
#   Makes outer grid visible   #
################################
.grid-item {
    border: 1px solid red;
}
*/


/*
############ DEBUG #############
#   Makes outer grid visible   #
################################
.login-grid-item {
    border: 1px solid cyan;
}
*/