@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;400&family=League+Gothic&display=swap');

* {
    box-sizing: border-box;
}

:root {
    --toggle-size: 2;
}

.console {
    font-family: 'Inconsolata', monospace;
}

/** toggle toggle toggle **/
.tog-a>input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

.tog-a>label {
    cursor: pointer;
    text-indent: -9999px;
    width: calc(20px*var(--toggle-size));
    height: calc(10px*var(--toggle-size));
    transition: 0.3s;
    background: rgba(238, 174, 202, 1);
    display: block;
    border-radius: calc(10px*var(--toggle-size));
    position: relative;
}

.tog-a>label:after {
    content: '';
    position: absolute;
    top: calc(0.5px*var(--toggle-size));
    left: calc(0.5px*var(--toggle-size));
    ;
    width: calc(9px*var(--toggle-size));
    height: calc(9px*var(--toggle-size));
    background: #fff;
    border-radius: calc(9px*var(--toggle-size));
    transition: 0.3s;
}

.tog-a>input:checked+label {
    transition: 0.3s;
    background: rgba(148, 233, 162, 1);
}

.tog-a>input:disabled+label {
    transition: 0.3s;
    background: rgb(201, 201, 201) !important;
}

.tog-a>input:checked+label:after {
    left: calc(100% - (0.5px*var(--toggle-size)));
    transform: translateX(-100%);
}

.tog-a>label:active:after {
    width: calc(13px*var(--toggle-size));
}

/** toggle toggle toggle **/

/** radio radio radio **/


.radiu {
    display: flex;
}

.radiu input[type="radio"] {
    display: grid;
    place-content: center;
    appearance: none;
    background-color: #fff;
    font: inherit;
    color: currentColor;
    width: 0.8em;
    height: 0.8em;
    /* width: 1.15em;
  height: 1.15em; */
    /* border: 0.1em solid currentColor; */
    border-radius: 50%;
    transform: translateY(0.45em);
    box-shadow: none;

}

.radiu input[type="radio"]::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em rgba(238, 174, 202, 1);
}

.radiu input[type="radio"]:disabled::before {
    box-shadow: inset 1em 1em rgb(201, 201, 201);
}

.radiu input[type="radio"]:checked::before {
    transform: scale(1);
}

/** radio radio radio **/

::selection {
    /* color: rgba(238,174,202,1); */
    background-color: rgba(253, 187, 45, 0.25);
}

body {
    background: rgba(221, 97, 86, 0.5);
    background: linear-gradient(-180deg, rgba(221, 97, 86, 0.5) 0%, rgba(147, 117, 255, 0.5) 46%, rgba(0, 212, 255, 0.5) 100%);
    background-size: cover;
    background-repeat: no-repeat;
    /* height: 100vh; */
    margin: 0;
    padding: 20px;
    font-family: 'League Gothic', sans-serif;
    font-size: 1.5em;

}

div {
    border-radius: 10px;
}

.parent {
    color: white;
    height: 300px;
    padding: 2px;
    transition: 0.35s;
}
.enfant {
    transition: 0.35s;
}
.parent > * {
    transition: 0.35s;
}
.enfant>p {
    padding: 4px;
    text-align: center;
}

.a {
    background: rgba(18, 12, 110, 1);
    background: linear-gradient(90deg, rgba(136, 132, 185, 1) 0%, rgba(18, 12, 110, 1) 100%);
    
}

.c {
    background: rgb(34, 193, 195);
    background: linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}

.b {
    background: rgb(255, 145, 144);
    background: linear-gradient(90deg, rgba(255, 145, 144, 1) 0%, rgba(94, 114, 235, 1) 100%);
}

.d {
    background: rgb(74, 222, 222);
    background: linear-gradient(90deg, rgba(74, 222, 222, 1) 0%, rgba(120, 127, 246, 1) 100%);
}



.other {
    display: flex;
    /* min-width: 600px; */
    margin-top: 20px;
}

.other>div {
    width: 100%;
    padding: 20px;
}

.pieces-container {
    background: rgb(238, 174, 202);
    background: linear-gradient(180deg, rgba(238, 174, 202, 1) 0%, rgba(148, 233, 162, 1) 100%);
    text-align: center;
    color: rgb(17, 63, 63);
}

.piece {
    background-color: rgba(255, 255, 255, 0.5);

}

.piece p,
.piece div {
    margin-bottom: 0;
}

.controllers-row {
    display: flex;
    align-items: center;
    justify-content: center;
}


.control_unit_container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.control_unit {
    display: flex;
}

.control_unit>* {
    align-items: center;
}

.tog-a {
    margin: 0 10% 0 10%;
}


.control {
    width: 100%;
    text-align: center;
    justify-content: center;
}

.radiu {
    margin-left: 2%;
}

.output {
    background: rgb(150, 156, 255);
    background: linear-gradient(180deg, rgba(150, 156, 255, 1) 0%, rgba(81, 84, 143, 1) 100%);
    color: rgb(17, 63, 63);
}

.other #centerme {
    text-align: center;
    width: 100%;
    font-size: 1.5em;
    color: rgb(17, 63, 63);
}

.output p {
    text-align: center;
}

.buttony {
    padding: 7px;
    background: white;
    color: rgba(238, 174, 202, 1);
    transition: 0.3s;
}

.buttony:hover,
.buttony:active {
    cursor: pointer;
    color: rgba(148, 233, 162, 1);
    transition: 0.3s;
}

.output>div>pre {
    display: contents;
    justify-content: left;
}

.output {
    border-radius: 10px;
}

code#code-result {
    border-radius: 10px !important;
}
.text_a, .text_b {
    font-weight: 200;
    font-size: 0.7em;
}

#arrow-x {
    height: 20px;
    width: 100%;
    background-image: url("horarrow.svg");
    background-repeat: no-repeat;
    opacity: 80%;
    background-position: center;
    margin-bottom: 10px;
    transition: 0.35s;
}