:root {
    --main-radius: 5px;
    --main-padding: 5px;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container {
    display: grid;
    height: 100vh;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: 1fr 9fr;
    grid-template-areas:
        "nav nav"
        "sidebar main";
    grid-gap: 0.5rem;
    font-weight: 600;
    font-size: 1.6vw;
    color: #004d40;
    color: rgb(255, 125, 190);
    text-align: center;
}

nav {
    background: #000000;
    color: rgb(255, 145, 200);
    font-size: 50px;
    font-weight: 700;
    padding: 1rem;
    grid-area: nav;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

main {
    background: #181818;
    grid-area: main;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);
}

#sidebar {
    background: #84edff;
    background: #000000;
    background: #181818;
    grid-area: sidebar;
    border-radius: var(--main-radius);
    padding-top: var(--main-padding);

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "newArray"
        "sizeArray"
        "speedArray"
        "bubbleSort"
        "insertionSort"
        "selectionSort"
        "mergeSort"
        "quickSort";
}

/* Sorting Visualizer Sidebar */
#newarr {
    grid-area: newArray;
    align-self: center;
    justify-self: center;
    padding: 1rem;
    margin: 0.8rem;
}

#spanSize {
    grid-area: sizeArray;
    align-self: center;
    justify-self: center;
    font-size: 20px;
    color: white;
}

#spanSpeed {
    grid-area: speedArray;
    align-self: center;
    justify-self: center;
    font-size: 20px;
    color: white;
}

#bubble {
    grid-area: bubbleSort;
    align-self: center;
    justify-self: center;
    padding: 1rem;
}

#selection {
    grid-area: selectionSort;
    align-self: center;
    justify-self: center;
    padding: 1rem;
}

#insertion {
    grid-area: insertionSort;
    align-self: center;
    justify-self: center;
    padding: 1rem;
}

#merge {
    grid-area: mergeSort;
    align-self: center;
    justify-self: center;
    padding: 1rem;
}

#quick {
    grid-area: quickSort;
    align-self: center;
    justify-self: center;
    padding: 1rem;
}

button {
    color: #000000;
    grid-area: sortButton;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    border: none;
    background-color: rgb(255, 165, 215);
    font-size: 18px;
    font-weight: 640;
    border-radius: 20px;
    cursor: pointer;

    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

button:hover {
    background-color: rgb(250, 120, 180);
    transition: 0.5s;
    box-shadow: none;
}



#bar {
    color: rgb(255, 105, 105);
    display: flex;
    flex-direction: row;
    height: 400px;
    align-items: baseline;
    justify-content: center;
    margin: 10vw 0vw 0vw 0vw;
}

.baritem {
    background: rgb(255, 255, 100);
    border: 1px solid black;
    width: 0.9%;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 15vw;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 16px;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 15px;
    background: #ffffff;
    border-radius: 16px;
}

input[type="range"]::-moz-range-track {
    height: 15px;
    background: #fff;
    border-radius: 16px;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 15px;
    width: 15px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid rgb(255, 125, 190);
    box-shadow: -407px 0 0 400px rgb(255, 125, 190);
}

@media only screen and (max-width: 700px) {
    nav {
        font-size: 30px;
        padding: 2%;
    }

    .container {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1.5fr 7.5fr;
        grid-template-areas:
            "nav"
            "sidebar"
            "main";
    }

    #sidebar {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "newArray sizeArray sizeArray speedArray speedArray"
            "bubbleSort insertionSort selectionSort mergeSort quickSort";
    }

    button {
        font-size: 1.8vw;
    }

    #size {
        font-size: 14px;
    }

    #spd {
        font-size: 14px;
    }

    #newarr,
    #bubble,
    #insertion,
    #selection,
    #merge,
    #quick {
        padding: 0.5rem;
    }

    #spanSpeed,
    #spanSize {
        font-size: 12px;
        display: flex;
    }

    button {
        border-radius: 15px;
        font-weight: 500;
    }

    input[type="range"] {
        width: 25vw;
    }

    .baritem {
        border: 0.4px solid black;
    }        
}