html {
    /* Making a gradient background because why not */
    background: linear-gradient(45deg, rgba(3, 0, 196, 0.9), rgba(0, 196, 65, 0.9));
}

body {
    color: #384047;
    margin: 0;
    font-size: 16px;
}

form {
    width: 400px;
    margin: 50px auto;
    padding: 20px 20px 24px;
    text-align: center;
    background: #f4f7f8;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 8px;
}

legend {
    width: 100%;
    padding: 0 20px;
    font-size: 32px;
    box-sizing: border-box;
}

.form-row {
    width: 100%;
    text-align: left;
    margin-top: 12px;
}

.form-row.submit {
    margin-top: 24px;
}

label {
    padding: 0 4px;
    margin-bottom: 4px;
}

.form-row input {
    width: 100%;
    height: 32px;
    border-radius: 4px;
    border: 1px solid rgba(56, 64, 71, 0.6);
}

.form-row input[type="submit"] {
    color: #252b30;
    height: 36px;
    font-size: 16px;
    background: rgba(0, 196, 65, 0.75);
}

.form-row input[type="submit"]:hover,
.form-row input[type="submit"]:active {
    cursor: pointer;
    background: rgba(0, 196, 65, 1);
}

.form-row input[type="submit"]:active {
    transform: translate(0, 2px);
}

.error-message {
    color: #ff0060;
    padding: 2px 4px;
    font-size: 14px;
    visibility: hidden;
}

form.error .error-message {
    visibility: visible;
}

nav ul {
    color:#f4f7f8;
    margin: 0;
    padding: 0;
    list-style-type: none;
    background-color: #252b30;
}

nav > ul {
    height: 40px;
}

nav li {
    cursor: pointer;
}

nav li:hover {
    background-color: #4a5762;
}

nav > ul > li {
    float: left;
    margin: 0;
    height: 32px;
    padding: 4px 12px;
    position: relative;
    line-height: 32px;
    border-right: 1px solid #00c441;
}

nav a {
    color: inherit;
    display: block;
    text-decoration: none;
}

nav > ul > li:hover ul.dropdown {
    display: block;
}

ul.dropdown {
    top: 100%;
    left: 0;
    z-index: 100;
    display: none;
    position: absolute;
}

ul.dropdown li {
    padding: 4px 12px;
    white-space: nowrap;
}

.promo-block {
    color: #f4f7f8;
    width: 300px;
    height: 300px;
    margin: 32px;
    border: 4px solid #00c441;
    padding: 16px;
    display: block;
    opacity: 1;
    transition: all 3s;
    visibility: visible;
}

.promo-block.immediate {
    right: 0;
    position: absolute;
}

.promo-block.immediate.hidden {
    display: none;
}

.promo-block.not-immediate.hidden {
    opacity: 0;
    visibility: hidden;
}

.page {
    color: #f4f7f8;
    margin: 32px;
    height: 400px;
    border: 2px solid #f4f7f8;
    padding: 16px;
}

.page a {
    color: inherit;
}

#page_1_2 {
    /* To make it bigger than the screen */
    height: 1200px;
}