/*
 * Bunte Mischung
 */

#challenge-colors-flexbox {
    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: 5rem;
}

.challenge-colors-item {
    width: 5rem;
    height: 5rem;
}

.challenge-colors-item.a {
    background-color: rgb(102, 108, 97);
}

.challenge-colors-item.b {
    background-color: rgb(103, 123, 98);
}

.challenge-colors-item.c {
    background-color: rgb(117, 110, 116);
}

.challenge-colors-item.d {
    background-color: rgb(101, 95, 102);
}

.challenge-colors-item.e {
    background-color: rgb(108, 97, 103);
}

.challenge-colors-item.f {
    background-color: rgb(103, 101, 125);
}

/*
 * Hüte
 */

#challenge-huete-flexbox {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    margin-left: 1rem;
    margin-right: 1rem;
}

.challenge-huete-item {
    display: flex;

    width: 100%;

    margin: .5rem;
    padding: 0.5rem 0.75rem 0.5rem 0.75rem;

    justify-content: space-between;
    align-items: center;

    background-color: #eee;
    border: none;
    border-radius: 5px;
}

.challenge-huete-text {
    width: calc(100% - 4rem);
    height: 100%;

    margin: 0;
}

.challenge-huete-hut {
    text-align: center;

    width: 6rem;
}

.challenge-huete-hut > img {
    max-width: 4rem;
}

.challenge-huete-hut > .challenge-huete-hut-description {
    white-space: nowrap;
}

/*
 * Obv
 */

#challenge-obv-button {
    padding: 0.5rem 0.5rem 0.5rem 0.5rem;
    margin: 0.125rem;
    margin-left: 1rem;
    height: 2.4rem;
}

#challenge-obv-output {
    margin-top: 1rem;
    padding: .2rem;

    border: 0px solid rgb(255, 255, 0);
    border-radius: 4px;
    box-shadow: 0 0 16px 2px yellow;
    transition: border-color .3s, box-shadow .3s;
}

#challenge-obv-output.fade-obv-output-class {
    border: 0px solid #ffffff00;
    box-shadow: none;
}

/*
 * Adventskranz
 */

#adventWreathContainer {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

#adventWreath {
    position: relative;
}

#adventWreath > img {
    height: 16rem;
}

.adventWreathCheckbox {
    position: absolute;
}

#adventWreathCheckbox1 {
    top: 41px;
    left: 49px;
}

#adventWreathCheckbox2 {
    top: 37px;
    left: 153px;
}

#adventWreathCheckbox3 {
    top: 149px;
    left: 31px;
}

#adventWreathCheckbox4 {
    top: 147px;
    left: 171px;
}

.css-challenge-pixel-art {
    width: 308px;
}

.css-ct {
    width: 2px;
    height: 2px;
}

.css-ct.b {
    background-color: #000;
}

.css-ct.w {
    background-color: #fff;
}

.caesar-challenge.caesar-flex {
    display: flex;
    flex-flow: row;

    align-items: start;
    justify-content: space-around;
}

.caesar-challenge.caesar-rot-input {
    width: 3rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.caesar-challenge.caesar-outer-disc {
    width: 16rem;
}

.caesar-challenge.caesar-inner-disc {
    width: 12.5rem;
    position: absolute;
    z-index: 2;

    transition: rotate 0.5s;

    clip-path: circle(50.9%);
}

.caesar-challenge.caesar-inner-disc:hover {
    cursor: grab;
}

.caesar-challenge.caesar-disc-container {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
}

.caesar-challenge.caesar-disc-and-input {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
}