planet-wars/backend/static/style/mapbuilder.css

.content {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background: black;
    color: #ff7f00;
    line-height: 1.5rem;
    overflow: hidden;
    align-items: center;
}

.hidden {
    display: none;
}

.grid {
    width: 120vh;
    height: 95vh;
    display: flex;
    flex-wrap: wrap;
}

.controls {
    padding-left: 3rem;
    display: flex;
    flex-direction: column;
}

.boxed {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

.row {
    width: 100%;
    height: 4.75%;
    display: flex;
    flex-wrap: wrap;
}

.row:nth-child(even) {
    position: relative;
    margin-left: 2.5%;
    margin-right: -2.5%;
}

.row:nth-child(even) .square:nth-child(even) {
    opacity: 0.9;
}

.row:nth-child(even) .square:nth-child(odd) {
    opacity: 0.8;
}

.row:nth-child(odd) .square:nth-child(even) {
    opacity: 0.7;
}

.row:nth-child(odd) .square:nth-child(odd) {
    opacity: 1;
}

.square {
    clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    background: #804000;
    width: calc(4.75% - 2px);
    height: 130%;
}

.square:hover {
    filter: brightness(80%);
}


/* Customize the label (the container) */

.colourButtonContainer {
    position: relative;
    padding-left: 35px;
}


/* Hide the browser's default radio button */

.colourButtonContainer input {
    opacity: 0;
    height: 0;
    width: 0;
    margin: 1rem 0rem;
}


/* Create a custom radio button */

.colourButtonCheckmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
}

.colourButton_gray {
    background-color: lightgray;
}

.colourButton_blue {
    background-color: blue;
}

.colourButton_cyan {
    background-color: cyan;
}

.colourButton_green {
    background-color: green;
}

.colourButton_yellow {
    background-color: yellow;
}

.colourButton_orange {
    background-color: orange;
}

.colourButton_red {
    background-color: red;
}

.colourButton_pink {
    background-color: pink;
}

.colourButton_purple {
    background-color: purple;
}

.planet_gray {
    background-color: lightgray;
}

.planet_blue {
    background-color: blue;
}

.planet_cyan {
    background-color: cyan;
}

.planet_green {
    background-color: green;
}

.planet_yellow {
    background-color: yellow;
}

.planet_orange {
    background-color: orange;
}

.planet_red {
    background-color: red;
}

.planet_pink {
    background-color: pink;
}

.planet_purple {
    background-color: purple;
}


/* On mouse-over, add a gray background color */

.colourButtonContainer:hover input~.colourButtonCheckmark {
    opacity: 0.7;
}


/* When the radio button is checked, add a blue background */

.colourButtonContainer input:checked~.colourButtonCheckmark {
    border: 1px solid blue;
}


/* Create the indicator (the dot/circle - hidden when not checked) */

.colourButtonCheckmark:after {
    content: "";
    position: absolute;
    display: none;
}


/* Show the indicator (dot/circle) when checked */

.colourButtonContainer input:checked~.colourButtonCheckmark:after {
    display: block;
}


/* Style the indicator (dot/circle) */

.colourButtonContainer .colourButtonCheckmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}

label {
    font-size: 1.2rem;
}

input,
textarea {
    border: 1px solid #804000;
    color: #804000;
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: black;
    font-size: 0.8rem;
}

.input_container {
    display: flex;
    width: 100%;
    align-items: center;
}

.input_container label {
    width: 140px;
    font-size: normal;
}

.input_container input {
    width: 100%;
    font-size: small;
}

.output {
    height: 100%;
    margin-bottom: 20px;
}

button {
    background-color: #E67300;
    /* Green */
    border: none;
    color: black;
    padding: 10px;
    margin: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    flex-grow: 1;
}

.buttons {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
}