/* LANGUAGE SELECTION */
.language-wrapper {
    display: inline-flex;
    position: fixed;
    height: 5%;
    width: 40%;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px 10px;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
    background-color: #282C34;
    font-family: Consolas, Monaco, monospace;
}

.language-wrapper .option {
    height: 100%;
    width: 30%;
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 10px;
    border: 1px solid lightgray;
    transition: all 0.3s ease;
    box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}

.language-wrapper .option:hover {
    background: lightgray;
    border-color: lightgray;
}

.language-wrapper .option:hover span {
    color: #000;
}

input[type="radio"] {
    display: none;
}

#csharp:checked:checked ~ .csharp,
#csharpcore:checked:checked ~ .csharpcore,
#xml:checked:checked ~ .xml,
#python:checked:checked ~ .python {
    border-color: #8C9FFF;
    background: #8C9FFF;
}

#csharp:checked:checked ~ .csharp span,
#csharpcore:checked:checked ~ .csharpcore span,
#xml:checked:checked ~ .xml span,
#python:checked:checked ~ .python span {
    color: #fff;
}

.language-wrapper .option span {
    color: lightgray;
}