@font-face {

    font-family: 'Roboto';

    src: url('Roboto.ttf');

}



body {

    background: url("../img/bg.jpg") no-repeat;

    color: #1f1f1f;

    font-family: 'Roboto', sans-serif;

    margin: 0;

    padding: 0;

    background-size: cover;

}



input {

    color: #1f1f1f;

    font-family: 'Roboto', sans-serif;

    font-size: 0.8em;

    border-radius: 5px;

    background: #ffffff;

    border: 2px solid black;

}



a {

    text-decoration: none;

    color: #1f1f1f;

}



header {

    width: 99%;

    height: 30px;

    text-align: right;

    position: absolute;

}



.login_wrapper {

    height: 100vh;

    display: grid;

    grid-template-rows: auto 8%;

    grid-template-columns: 35% 300px 300px 35%;

    justify-content: center;

    text-align: center;

    align-content: center;

    align-items: center;

    font-weight: bold;

    font-size: 1.3em;

    grid-gap: 4px;

}



.login_logo {

    height: auto;

    grid-column: 2/4;

    grid-row: 1/2;

}



.login_logo img {

    height: auto;

    width: 100%;

}



.login_checkin {

    grid-column: 2/3;

    grid-row: 2/3;

    background: lightblue;

    height: 80%;

    display: grid;

    align-items: center;

    border-radius: 25px;

}



button {

    border: none;

    height: 100%;

    color: #1f1f1f;

    font-family: inherit;

    font-size: 1em;

    font-weight: bold;

    cursor:pointer;

    overflow: hidden;

    background: none;

}



.login_checkout {

    grid-column: 3/4;

    grid-row: 2/3;

    background: lightcoral;

    height: 80%;

    display: grid;

    align-items: center;

    border-radius: 25px;

}



.checkin_wrapper {

    height: 100vh;

    display: grid;

    grid-template-rows: auto;

    grid-template-columns: 35% 300px 300px 35%;

    justify-content: center;

    text-align: center;

    align-content: center;

    align-items: center;

    font-size: 1.3em;

    grid-gap: 4px;

}



.checkin_content {

    grid-row: 1/2;

    grid-column: 2/4;

    height: auto;

    display: grid;

    grid-template-rows: auto 0 10px repeat(5, 50px) 200px repeat(3, 50px);

    grid-template-columns: 30% 70%;

    text-align: left;

    align-content: center;

    align-items: center;

    font-size: 1em;

    grid-gap: 7px;

    background: #f9f9f9;

    border-radius: 25px;

    box-shadow: 10px 10px 8px #888888;

}



.checkin_logo {

    height: auto;

    grid-column: 1/3;

    grid-row: 1/2;

}



.checkin_logo img {

    height: auto;

    width: 99%;

}