* {
    box-sizing: border-box;
    font-size: 16px;
}

.box {
    width: 20em;
    height: 15em;
    background-color: #fff;
    border: 1px solid var(--delftblue);
    border-radius: 5px;

    min-width: 15em;
    min-height: 10em;
    max-height: 15em;
    max-width: 20em;

    font-size: 32px;

    position: absolute;
}

.box-body {
    padding: 15px;
}

.drag-handle {
    cursor: pointer;
}

.dragging {
    cursor: move !important;
}

.box-header {
    color: #fff;
    background-color: var(--delftblue);
    padding: 10px 15px;
}

.box-header p {
    margin: 0;
    padding: 0 .25em;
    display: inline;
}


.box-header h1 {
    margin: 0;
    padding: 0 .25em;
    display: inline;
    font-size: larger
}

.box-header a {
    color: #fff;
}

.box-header a:hover {
    color: lightblue;
}

.box-body {
    padding: 15px;
}

.image {
    padding: 0;

    min-width: 15em;
    min-height: 10em;
    max-height: 15em;
    max-width: 20em;
}

iframe, .iframe {
    padding: 0;
    height: 100%;
    width: 100%;
}

.iframe {
    overflow: hidden !important;
}

audio {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    width: 100% !important;
}

.text {
    padding: 0;

    min-width: 15em;
    min-height: 10em;
    max-height: 15em;
    max-width: 20em;
}

.image img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    z-index: -100;
    object-fit: scale-down;
    background: var(--lightgrey)
}

.box-body table {
    width: 100%;
    border-collapse: collapse;

    background-color: white;
    border-radius: 5px;
}

.box-body table td {
    padding: 0 10px;
}

.box-body table thead td {
    font-weight: 800;
    padding: 10px 10px 0px 10px;
}

.box-body table:first-child {
    width: 66%;
}

.box-body table:nth-child(2) {
    width: 33%;
}

.box-body table tr + tr {
    border-top: 2px solid #3A405A55;
    padding: 0 5px;
}

.box-body table td + td {
    border-left: 2px solid #3A405A55;
}

.box-body table tr:last-child {
    padding: 0 10px 10px 10px;
}

.box-body table small {
    font-size: smaller !important;
    font-weight: 100 !important;
    text-align: right;
    opacity: 0.5;
}

.drag-handle {
    cursor: pointer;
}

.start-top-left {
    top: .5em;
    left: .5em;
}

.start-top-right {
    top: .5em;
    right: .5em;

    min-width: 7em;
    min-height: 2.5em;
}

.start-top-challenge {
    top: calc(5em);
    right: .5em;

    min-width: 7em;
    min-height: 2.5em;
}

.start-bottom-left {
    bottom: .5em;
    left: .5em;
}

.start-bottom-right {
    bottom: .5em;
    right: .5em;
}

.Easy {
    background-color: #00A08A;
    color:white;
}

.Medium {
    background-color: #F98400;
    color:white;
}

.Hard {
    background-color: #F21A00;
    color:white;
}

.Challenge {
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #d4d714, #1de840, #3dc5cc, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;
    animation: rainbow 9s ease infinite;
    color: white;
}


.Challenge:hover {

    &:before,
    &:after {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #d4d714, #1de840, #3dc5cc, #2b1de8, #dd00f3, #dd00f3);
        border-radius: 10px;
        background-size: 1800% 1800%;
        animation: rainbow 12s reverse infinite;
        z-index: -1;
        border-radius: 20px;
    }

    &:content {
        background: linear-gradient(0deg, #000, #262626);
    }

    &:after {
        top: -8px;
        left: -8px;
        width: calc(100% + 16px);
        height: calc(100% + 16px);
        filter: blur(24px);
    }

}

@keyframes rainbow {
    0% {
        background-position: 0% 82%
    }

    50% {
        background-position: 100% 19%
    }

    100% {
        background-position: 0% 82%
    }
}