/* SortingVisualizer.css */
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/* Body styling */
body {
    font-family: "Poppins", serif;
    font-weight: 500;
    font-style: normal;
    margin: 0px;
    padding: 0px;
}

.nav-logo .home{
    text-decoration: none;
    color: #fff;
}

/* Main Navbar */
nav.content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #1b1b1b;
    padding: 15px 30px;
    height: 7rem;
    width: 100vw;
}

.nav-logo h1 {
    font-weight: bold;
    color: white;
    font-size: 2rem;
}

.nav-logo h1 span {
    color: aqua;
}

/* Navigation Items */
.nav-items ul {
    list-style: none;
    display: flex;
    gap: 20px;
    margin-top: 2rem; /* Push the nav-links to the bottom */
    padding-right: 2rem;
    padding-bottom: 1rem;
}

.nav-items ul li {
    display: inline;
}

/* ================================================ */
.nav-items select,
.nav-items button {
    background-color: #1b1b1b;
    color: #fff;
    padding: 8px 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}
/* Button styling */
/* #arr_generate, */
#arr_randomize,
#arr_sort {
    border: none;
    color: #fff;
    text-decoration: none;
    padding: 0.8rem 1rem; /* Add space around links */
    font-size: 1rem;
    font-weight: 800;
    border-radius: 10px; /* Rounded corners */
    transition: all 0.5s ease-in-out; /* Smooth transition for hover effect */
    margin: 1rem;
}

/* #arr_generate:hover, */
select:hover,
#arr_randomize:hover,
#arr_sort:hover {
    color: aqua;
    background-color: #000; /* Add a slight background on hover */
    box-shadow: 0 0 10px 2px aqua; /* Glow effect */
}

.nav-items ul li select {
    margin-top: 1.5rem; /* Adjust as needed */
    border-radius: 10px;
}
/* ==================================================================== */

/* =========================================== */
.labelandcontrol{
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
    /* margin: 20px; */
}
.label{
    display: flex;
}
.label div{
    margin: 10px;
}
.color1{
    height: 20px;
    width: 20px;
}
.color2{
    height: 20px;
    width: 20px;
}
.color3{
    height: 20px;
    width: 20px;
}
/* ========================================= */
/* Secondary Navbar for Size & Speed */
.controls-navbar {
    display: flex;
    /* justify-content: flex-end; */
    align-items: center;
    padding: 10px 0;
}

.controls-navbar .control-item {
    margin: 0 20px;
    color: black;
    font-size: 1rem;
}

.controls-navbar input[type="range"] {
    width: 150px;
}
/* ================================== */


.array-container{
    display: flex;
    justify-content: center;
    /* align-items: flex-end; */
    width: 95%;
    height: 300px; /* Adjust height as needed */
    /* border: 1px solid black; */
    margin: auto;
    /* flex-wrap: wrap; */
    position: relative;
}

.bar{
    width: 2rem; /* Width of each bar */
    /* margin-top: 5px; */
    margin-left: 5px;
    background-color: #5bc9b1;
    display: flex;
    justify-content: center;
    color: #f9f9f9;
    transition: transform 0.5s ease, background-color 0.3s ease; 
    /* Smooth movement and color change */
}

/* ================================================ */
.message{
    visibility: hidden;
}

@media only screen and (max-width:850px)   {    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        text-align: center;
        background-color: #f0f0f0;
        visibility: hidden;
    }

    .message {
        visibility: visible;
        font-size: 2rem;
        color: #333;
        background-color: rgba(255, 255, 255, 0.8);
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
        position: absolute;

    }

    /* You can add further styling to ensure content doesn't overlap or looks broken in portrait mode */
    .array-container {
        display: none; /* Hide the content when in portrait mode */
    }
}