* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    width: 100vw;
    height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    display: grid;
    grid-template-columns: 1fr 200px;
    grid-template-rows: 1fr;

    overflow: hidden;
}

.content {
    padding: 15px;
    background-color: rgb(225, 225, 225);
    overflow: hidden;
}

.controls {
    padding: 15px;
    color: antiquewhite;
    background-color: rgb(0, 64, 148);
    background-image: linear-gradient(90deg, silver 0px, rgb(0, 64, 148) 10px);
}

.controls svg {
    width: 100%;
    height: 60px;
}

circle {
    fill: tomato;
    stroke: black;
    stroke-width: 0.1;
    cursor: pointer;
}

circle.selected {
    fill: red;
}

.regler {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-row: auto auto;
    grid-template-areas: "top top" "l2 r2";
    column-gap: 10px;
}

.regler p {
    grid-area: top;
    padding: 5px;
}

.regler input {
    grid-area: l2;
}

.regler label {
    grid-area: r2;
    text-align: end;
}