* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: #323136;
            /* background: linear-gradient(to bottom right, #7c3aed, #4f46e5); */
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding: 2rem;
            color: #ff8300;
        }

        .container {
            background: #3c3c3c;
            border-radius: 1rem;
            box-shadow: 0 0px 29px rgb(288 131 0);
            padding: 2rem;
            width: 28vw;
            max-width: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            text-align: center;
            color: #ff8300;
            margin-bottom: 1.5rem;
            font-size: 2rem;
            font-weight: 800;
        }

        .input-group {
            /* width: 71vw; */
            display: flex;
            justify-content: center;
            flex-direction: column;
            gap: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .input-group input {
            flex: 1;
            padding: 0.75rem;
            border: 2px solid #ff8300;
            border-radius: 0.5rem;
            font-size: 1rem;
            background-color: transparent;
            color: #ff8300;
        }

        .input-group input:focus {
            outline: none;
            border: 2px solid #ff8300;
        }

        .input-group button {
            padding: 0.75rem 1rem;
            background: #ff8300;
            color: white;
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
            font-weight: bold;
        }

        .todo-list .todo {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background: #f9f9f9;
            padding: 0.75rem 1rem;
            margin-bottom: 0.75rem;
            border-radius: 0.5rem;
        }

        .todo span {
            flex: 1;
            margin-left: 0.75rem;
            font-size: 1rem;
        }

        .todo-list {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .btn_container {
            transform-style: preserve-3d;
            margin: auto;
        }

        .pane {
            outline: 2px solid #ff8300;
            /* box-shadow: 0 0 10px #4f46e5, inset 0 0 10px #4f46e5; */
            height: 1cm;
            width: 4.5cm;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            transition: 0.7s ease;
        }

        .input {
            display: none;
        }

        .label {
            height: 1cm;
            width: 1.5cm;
            float: left;
            font-weight: 600;
            letter-spacing: -1px;
            font-size: 14px;
            padding: 0px;
            position: relative;
            z-index: 1;
            color: #ff8300;
            text-align: center;
            padding-top: 10px;
        }

        .selection {
            display: none;
            position: absolute;
            height: 1cm;
            width: calc(4.5cm / 3);
            z-index: 0;
            left: 0;
            top: 0;
            /* box-shadow: 0 0 10px #4f46e5; */
            transition: .15s ease;
        }

        .label:has(input:checked) {
            color: #ffffff;
        }

        .pane:has(.label:nth-child(1):hover) {
            transform: rotateY(-30deg);
        }

        .pane:has(.label:nth-child(3):hover) {
            transform: rotateY(35deg);
        }

        .label:has(input:checked)~.selection {
            background-color: #ff8300;
            display: inline-block;
        }

        .label:nth-child(1):has(input:checked)~.selection {
            transform: translateX(calc(4.5cm * 0/3));
        }

        .label:nth-child(2):has(input:checked)~.selection {
            transform: translateX(calc(4.5cm * 1/3));
        }

        .label:nth-child(3):has(input:checked)~.selection {
            transform: translateX(calc(4.5cm * 2/3));
        }

        @media (max-width: 320px) {
            .input-group input {
                width: 50vw;
            }

            .input-group {
                display: flex;
                align-items: center;
                /* justify-content: center; */
                margin: 0;
            }

            #show {
                font-size: 12px;
            }
        }

        @media (max-width: 225px) {
            #show {
                font-size: 10px;
            }
        }

        @media (max-width: 885px) {
            .container {
                width: 100%;
            }
        }

         @media (max-width: 640px) {
            .input-group {
                width: 71vw;
            }
        }