:root {
    --color-primary: rgb(41, 41, 160);
    --color-complimentary: rgb(217, 201, 78);
    --color-bg: rgb(241, 241, 241);
    --color-light-blue: aliceblue;
}

html {
    zoom: 1;
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0 auto;
    max-width: 1800px;
}

select,
input,
.logo {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
}

input[type=radio],
input[type=checkbox] {
    cursor: pointer;
    width: 20px;
    height: 20px;
}

select {
    background-color: var(--color-bg);
    border: solid var(--color-bg) 3px;
    border-right: 20px solid transparent;
    cursor: pointer;
    border-radius: 5px;
}

select:focus,
input:focus {
    outline: none;
}

ul {
    list-style-type: none;
    padding: 0;
}

a {
    text-decoration: none;
}

section {
    padding: 0 12%;
}

button,
input[type=submit] {
    background-color: var(--color-primary);
    color: var(--color-complimentary);
    padding: 15px 30px;
    border-radius: 5px;
    border: none;
}

button:hover {
    color: white;
    cursor: pointer;
}

.footer {
    height: 200px;
}

::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.flash-msg {
    position: fixed;
    z-index: 10;
    background-color: rgb(211, 223, 193);
    border: solid 1px rgb(105, 153, 33);
    box-shadow: 0 0 5px 0 rgb(0, 0, 0, 0.4);
    padding: 20px;
    text-align: center;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
}

.error-msg {
    background-color: rgb(229, 211, 211);
    border: solid 1px rgb(231, 90, 90);
}

.active-msg {
    top: 40px;
    opacity: 1;
    transition: top 1s, opacity 1s;
}