html,body {
    width: 100%;

    padding: 0;
    margin: 0;
}

body {
    background: #111;

    display: flex;
    flex-direction: row;

    font-family: arial;
}


.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}


#setsBox {
    flex: 1;
    margin: 20px 0 20px 20px;
    padding: 5vh 5vw;

    border-radius: 25px;

    background: #222;

    align-items: center;
}

#startBox {
    flex: 1;
    margin: 20px 20px 0 20px;
    padding: 5vh 5vw;

    border-radius: 25px;

    background: #222;

    display: flex;

    flex-direction: column;
    justify-content: space-between;
}

.setButton {
    font-size: 3em;
    text-align: center;
    color: white;
    padding: 10px;

    margin: 20px;
    background: rgb(255, 255, 255, .3);
    border-radius: 20px;
    border-width: 0;
}

/*.setButton:hover {*/
/*    transition-duration: .2s;*/
/*    background: rgba(255, 255, 255, 0.75);*/
/*    color: black;*/
/*}*/

/*.setButton:checked {*/
/*    background: green;*/
/*}*/

.checkLabel {
    color: white;
    font-size: 2.5em;
}

.checkerBox {
    width: 100%;
    display: flex;
    flex-direction: row;

    justify-content: flex-start;
}


#startButton {
    padding: 2vw 1vh;

    border-radius: 4vh;
    border-width: 0;

    background: #333;

    color: white;
    font-size: 3em;
}

#startButton:hover {
    transition-duration: .2s;
    scale: 105%;
    background: #464;
}

#startButton:active {
    transition-duration: .1s;
    scale: 110%;
    background: #5a5;
}


.optionsHolder {

}

.swapthingyBox {
    display: flex;
    width: 100%;
    justify-content: flex-start;
}

.swapthingy {
    font-size: 1.6em;
    color: white;
}

.infotext {
    font-size: 1.6em;
    color: white;
}


@media (max-aspect-ratio: 1/1) {
    body {
        flex-direction: column;
    }

    .checkLabel {

    }
}