body {
    font-family: 'Roboto';
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #e0f7fa, #80deea);
    color: #333;
}
body.lander {
    font-family: 'Roboto';
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #f3b3b3, #eefdff, #226cff);
    color: #333;
}
body.blue {
    font-family: 'Roboto';
    margin: 0;
    padding: 0;
    background: linear-gradient(to right, #1d8af1, #fffaee);
    color: #333;
}
@font-face {
    font-family: 'Roboto';
    src: url('https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5Q.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
div.rounded_center {
    padding: 50px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    margin: 50px auto;
    width: 80%;
}
div.rounded {
    padding: 50px;
    border-radius: 15px;
}
div.displayblock {
    padding: 50px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

div.center {
    padding:50px;
    margin:50px auto;
}
div.div30 {
    width:30%;
}
div.div50 {
    width:50%;
}
div.div65 {
    width:65%;
}
div.div80 {
    width:80%;
}
div.div90 {
    width:90%;
}
div.navbar {
    background-color: #ffffff;
    overflow: hidden;
}
img.logo {
    float: left;
    padding: 10px 20px;
    height: 30px;
}
.topnav {
    background: rgba(255, 255, 255, 0.8);;
    overflow: hidden;
}
.topnav a {
    float: left;
    color: #000000;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}
.topnav a:hover {
    background-color: #cecdc7;
    color: black;
}
.topnav a.active {
    background: linear-gradient(to top, #226cff,#f3b3b3);
    color: white;
}
div.rounded_center_small {
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 15px;
    margin: 20px auto;
    width: 60%;
}
div.center_text {
    text-align: center;
}
p.med_text {
    font-size: 16px;
}
p.large_text {
    font-size: 20px;
}
h1.title {
    color: #002679;
    font-size: 2.5em;
}
h3.title {
    color: #001f4d;
    font-size: 1.5em;
}
h1.subtitle {
    color: #001279;
}
h3.subtitle {
    color: #00184d;
}
sub.custom_dark {
    color:#195466
}
code.custom_code_dark {
    background-color: #a9c4ff;
    padding: 4px 6px;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 4px;
}
code.custom_code {
    background-color: #b0c9ff;
    padding: 4px 6px;
    font-family: 'Courier New', Courier, monospace;
    border-radius: 4px;
}

input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

input[type=submit] {
    background-color: #04AA6D;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
}