#content {
    display:flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    padding: 20px;
    box-sizing: border-box;
}

h2 {
    margin-bottom: 0px;
    color: #ef1a38;
}

hr {
    width: 50px;
    border: 5px solid #ef1a38;
    border-radius: 5px;
    margin: 20px 0;
}

#logo {
    width: 400px;
}

#showcaseImage {
    background: url('/img/splash.jpg');
    background-position: bottom;
    background-size: cover;
    width: 100%;
    height: 400px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
}

#showcaseImage > h1 {
    color:white;
    text-shadow: 4px 3px 5px #222;
    text-align: center;
}

.red {
    color: #ef1a38;
}

.hidden {
    display:none;
}

input[type=submit], input[type=button], #showcaseImage > a > div, a.button, button {
    background-color: #ef1a38;
    color: white;
    font-size: large;
    border-radius: 5px;
    width: 180px;
    height: 40px;
    border: none;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type=submit]:disabled, input[type=button]:disabled {
    background-color: #aaa;
}

td > input[type=submit], td > input[type=button] {
    font-size: medium;
    height: 20px;
    margin: 5px;
}

form.horizontal {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

form.border {
    border: 2px solid grey;
    border-radius: 5px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
    padding: 30px;
}

form > p {
    margin: 0;
}

input[type=text], input[type=tel], input[type=password] {
    background-color: transparent;
    border: none;
    font-size: large;
    border-bottom: 2px solid #ef1a38;

    display: flex;
    width: 250px;
    height: 40px;
}

input[type=text]:disabled, input[type=tel]:disabled, input[type=password]:disabled {
    border-bottom-color: #aaa;
}

input[type=checkbox] {
    accent-color: #4c40c5;
}

table {
    border-spacing: 0;
    border: 1px solid #ddd;
    border-radius: 5px;
}

table.centered {
    text-align: center;
}

td, th {
    padding: 5px 10px;
}

tr:not(:last-child) > td {
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #4c40c5;
    color: white;
}

th:first-child {
    border-top-left-radius: 5px;
}

th:last-child {
    border-top-right-radius: 5px;
}

td:nth-child(odd) {
    background-color:#e0deff;
}

div.progress {
    display:flex;
    flex-direction: row;
    flex-grow: 1;
    justify-content: space-between;
    margin:20px 0;
}

div.progress > .stage {
    display:flex;
    flex-direction: column;
    align-items:center;
}

div.progress > .stage::before {
    content: "✓";
    font-size:x-large;
    color: white;
    width: 60px;
    height: 60px;
    margin-bottom:15px;
    display:flex;
    align-items:center;
    justify-content: center;
    border-radius:30px;
    background-color:#4c40c5;
}

div.progress > .current {
    color: #ef1a38;
    font-weight:bold;
}

div.progress > .future::before {
    content: "⧗";
    background-color: grey;
}

div.progress > .current::before {
    content: "►";
}

.progressbar {
    display:flex;
    background-color: grey;
    border-radius: 5px;
    width: 100%;
}

.progressbar > div {
    display:flex;
    background-color:#4c40c5;
    border-radius: 5px;
    padding: 3px;
    color:white;
}

#logs {
    display: flex;
    overflow: auto;
}

.homepage {
    display:flex;
    flex-direction: column;
    gap: 80px;
}

p.big {
    font-size:large;
    font-weight:100;
    letter-spacing: 1px;
}

#features {
    display:flex;
    flex-wrap: wrap;
    flex-direction:row;
    justify-content: space-evenly;
    gap: 30px;
}

#features > div {
    display:flex;
    flex-direction:column;
    align-items: center;
    text-align: center;
    width: 200px;
    background-color: white;
    box-shadow: 3px 5px 20px rgba(20,20,20,.2);
    padding: 20px;
    border-radius: 5px;
    gap: 20px;
}

#features > div > .mdi {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: #4c40c5;
    font-size: 30px;
    color:white;
    width: 70px;
    height: 70px;
}

#features > div > p {
    font-style: italic;
    font-family: serif;
}

#features > div > p, #features > div > h3 {
    margin: 0px;
}

.columns {
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 40px;
}
.columns.reverse {
    flex-wrap: wrap-reverse;
}

.columns > div {
    flex: 1 1;
}

#mcdlogo {
    width: 350px;
    filter: grayscale(100%);
}

.sideimg.phone {
    background: url('/img/phone.jpg');
    background-position: right;
}
.sideimg {
    display:flex;
    flex: 1 1;
    border-radius: 5px;
    min-height: 300px;
    min-width: 400px;
}