body {
    background-color: midnightblue;
    background-image: url(images/bg.png);
    background-size: cover;
    color: rgb(200, 200, 255);
    font-size: 20px;
    text-align: center;
}

ul {
    margin-top: 1px;
    margin-bottom: 1px;
}

h1 {
    margin-top: 8px;
    margin-bottom: 8px;
}

h3 {
    margin-top: 8px;
    margin-bottom: 8px;
}

a {
    color: yellow;
}

input {
    border-color: red;
    border-width: 4px;
}

.inputOptional {
    border-color: yellow;
}

.box {
    background-color: darkblue;
    color: rgb(220, 220, 255);
    text-align: center;
    padding: 8px 4px 8px 4px;
    border: 5px solid;
    border-color: darkslateblue;
    border-radius: 10px;
    margin-bottom: 32px;
    padding: 4px 2% 8px 2%;
    transition: 0.5s;
    transition-delay: 0.2s;
}

.box:hover {
    filter: brightness(120%) contrast(120%);
}

.boxSize {
    margin-left: 8%;
    margin-right: 8%;
    max-width: 84%;
}

.boxSize:hover {
    margin-left: 2%;
    margin-right: 2%;
    max-width: 96%;
    padding-left: 2%;
    padding-right: 2%;
}

.boxImg {
    position: absolute;
    transform: translateY(-16px);
    left: 3%;
    min-width: 64px;
    max-width: 10%;
    z-index: 3;
}

.leftArea {
    width: 49.5%;
    float: left;
    background-color: rgb(15, 45, 15);
    border-radius: 4px;
    margin-bottom: 4px;
}

.rightArea {
    width: 49.5%;
    float: right;
    background-color: rgb(15, 25, 15);
    border-radius: 4px;
    margin-bottom: 4px;
}

@media only screen and (max-width: 768px) {
    .leftArea {
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        float: none;
    }
    .rightArea {
        margin-left: auto;
        margin-right: auto;
        width: 95%;
        float: none;
    }
}

/* bottom */
.miniBox {
    margin-left: 10%;
    margin-right: 10%;
    max-width: 80%;
}

@media only screen and (min-width: 1280px) {
    .miniBox {
        margin-left: 0%;
        margin-right: 0%;
        width: 25%;
    }
}

.theContainer {
    display: inherit;
}

@media only screen and (min-width: 1280px) {
    .theContainer {
        display: flex;
    }
}