/* body, div.main, div.container */
body {
    background-color: var(--color-primary-light);
}

.main {
    display: grid;
    align-items: start;
    justify-content: center;
    justify-items: center;
    grid-row-gap: 30px;
    min-height: 100vh;
    background-color: var(--color-primary-light);
    padding: 50px;
}

.main__inner {
    display: grid;
    grid-row-gap: 20px;
}

.main__inner .logo {
    display: grid;
    align-items: center;
    justify-items: center;
}
.main__inner .logo a:link,
.main__inner .logo a:visited,
.main__inner .logo a:hover,
.main__inner .logo a:focus,
.main__inner .logo a:active {
    text-decoration: none;
    outline: 0;
    color: var(--color-primary);
}

.main__inner .logo a img {
    width: 150px;
}

.container {
    background-color: #fff;
    padding: 50px;
    display: grid;
    grid-row-gap: 20px;
}

.container .content {
    display: grid;
    grid-row-gap: 5px;
}

.container .content h1 {
    color: var(--color-primary);
    font-weight: 500;
    font-size: 20px;
}

.container .content p {
    line-height: 1.5;
    color: #071d38;
    font-size: 14px;
}

.container .content p a:link,
.container .content p a:visited {
    color: var(--color-primary);
    text-decoration: none;
    outline: 0;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
}

.container .content p a:hover,
.container .content p a:focus {
    color: var(--color-primary);
    text-decoration: none;
    outline: 0;
    border-color: var(--color-primary);
}

.container .content p a:active {
    color: var(--color-primary);
    text-decoration: none;
    outline: 0;
    border-color: transparent;
}

.container form {
    display: grid;
    grid-row-gap: 20px;
}

@media only screen and (max-width: 400px) {
    .main {
        padding: 50px 0;
    }

    .main__inner {
        justify-items: center;
    }

    .container {
        padding: 50px 20px;
    }
}
/* End body, div.main, div.container */


/* div.links */
.links {
    display: grid;
    grid-row-gap: 7px;
}

.links p {
    line-height: 1.5;
}

.links p a:link,
.links p a:visited {
    color: var(--color-primary);
    text-decoration: none;
    outline: 0;
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease;
}

.links p a:hover,
.links p a:focus {
    color: var(--color-primary);
    text-decoration: none;
    outline: 0;
    border-color: var(--color-primary);
}

.links p a:active {
    color: var(--color-primary);
    text-decoration: none;
    outline: 0;
    border-color: transparent;
}

@media only screen and (max-width: 400px) {
    .links {
        padding: 0 20px;
        text-align: center;
    }
}
/* End div.links */