:root {
    --devide-by: 2;
    --xxl-font-size: 10vw;
    --xl-font-size: calc(var(--xxl-font-size) / var(--devide-by));
    --l-font-size: calc(var(--xl-font-size) / var(--devide-by));
    --m-font-size: calc(var(--l-font-size) / var(--devide-by));
    --s-font-size: calc(var(--m-font-size) / var(--devide-by));
    --accesibillity-font-family: 'Times New Roman', Times, serif;
    --main-font-family: Verdana, Geneva, Tahoma, sans-serif;
    --list-padding: 2vh;
    --xs-breakpoint: 320px;
    --sm-breakpoint: 600px;
    --md-breakpoint: 900px;
    --lg-breakpoint: 1200px;
    --xl-breakpoint: 1536px;
    --tablet-breakpoint: 900px;
    --wur-primary-green: #008A00;
    --wur-primary-lightblue: #6AADE4;
    --wur-primary-soil: #D0B972;
    --wur-secondary-orange: #FF7900;
    --wur-secondary-lightgreen: #69BE28;
    --wur-secondary-blue: #00549F;
    --wur-secondary-darkblue: rgb(0, 81, 114);
    --wur-secondary-lightgrey: #D5D2CA;
}

* {
    padding: 0;
    margin: 0;
}

body {
    font-size: 1vw;
    max-height: 100vh;
}

.container {
    display: grid;
    grid-auto-flow: row;
    /* grid-template-rows: repeat(1fr); */
    gap: 5vh;
    width: 100vw;
    height: 100%;
}

.container>div {
    margin: 0 50px;
}

.header {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 3fr 1fr;
}

.header>#logo>img {
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.header>#clock {
    font-size: var(--xxl-font-size);
    text-align: center;
}

.header>#contact {
    font-size: var(--m-font-size);
    font-family: var(--main-font-family);
}

.header>#contact>ul {
    list-style-type: none;
    padding: var(--list-padding);
    place-items: center;
}

.header>#contact>ul>li {
    padding: .5vh;
}

.header>#contact>ul>.url {
    font-size: var(--s-font-size);
}

.title {
    position: relative;
    text-align: center;
}

.title>span {
    font-size: var(--l-font-size);
    font-family: var(--main-font-family);
    font-weight: bold;
}

.main {
    display: grid;
    height: 100%;
    max-height: 90vh;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    font-family: var(--main-font-family);
}

.main>#login-instructions>ol {
    border-right: 1px solid #000;
    padding: var(--list-padding);
    font-size: var(--m-font-size);
}

.main>#login-instructions>ol>li {
    margin-bottom: 30px;
}

.main>#login-information {
    margin-left: 30px;
    grid-auto-flow: column;
    font-size: var(--m-font-size);
}

.main>#login-information>div {
    vertical-align: middle;
}

#login-information input {
    height: 10vh;
    width: 100%;
    font-size: var(--xl-font-size);
    font-family: var(--accesibillity-font-family);
}

#login-information .col {
    display: grid;
    grid-auto-flow: column;
    gap: var(--s-font-size);
    margin: var(--list-padding);
}
#login-information .col:nth-child(1) span{
    vertical-align: bottom;
}
#login-information .col:nth-child(1) span img{
    max-height:20px;
}
#login-information .col:nth-child(3){
    grid-auto-flow: row;
}

#login-information .col img{
    float:left;
    max-height:50px; 
}

a:link,
a:visited {
    color: var(--wur-secondary-blue);
    cursor: pointer;
}