@import "tailwindcss";
/* npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch */

html {
    font-size:64%;
    color: #fff8d4;
}

* {
    box-sizing: border-box;
}

.startBtn {
    max-width: 100px;
}

.stopBtn {
    max-width: 100px;
}

.Btn {
    max-width: 200px;
    transition: all 0.3s ease-in;
}

dialog {
    border: 4px solid #40E0D0;
    border-radius: 16px;
    padding: 4rem;
    background: #2B2B2B;
    color: white;
    width: 90vw;
    max-width: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.8);
}

.dialog-content {
    padding: 2rem;
}

.dialog-content .flex-1 {
    border: 4px solid #40E0D0;
    border-radius: 0.75rem;
    padding: 2rem;
}

/* Remove border from the middle flex container that has the image */
.dialog-content .flex-1.flex.justify-center {
    border: none;
    padding: 0;
}

button {
    border: 4px solid #40E0D0;
    border-radius: 0.5rem;
}

button:hover {
    background-color: rgba(64, 224, 208, 0.2);
}

.workout-option {
    border: 4px solid #40E0D0;
    border-radius: 16px;
    padding: 2rem;
    background: #1a1a1a;
}

.workout-option:hover {
    background: #363636;
}


@layer components {

    .tester {
        @apply text-7xl font-bold underline;
    }

    .Btn.active {
        transform: scale(1.2);
        background-color: inherit;
        transition: all 0.3s ease;
        overflow: auto;
        opacity: 75%;
    }


    .speedUpBtn.active, .speedDownBtn.active, .startBtn.active, .stopBtn.active {
        transform: scale(1.2);
        border-color: white;
    }

    .height-god {
        height: 100vh;
    }

    .border-shadow {
        box-shadow: inset 0 0 40px #4E5153;
    }


}

/*@media screen and (min-device-width: 834px) and (max-device-width: 1366px) and (orientation: portrait),*/
/*        screen and (min-device-width: 834px) and (max-device-width: 1366px) and (orientation: landscape) {*/

/*    body {*/
/*        background-color: #1e1e1e;*/
/*    }*/

/*    .nav-bar {*/
/*        padding: 1rem 2rem;*/
/*        background-color: #222;*/
/*    }*/

/*    .workout-display {*/
/*        gap: 3rem;*/
/*    }*/

/*    .header-container {*/
/*        flex-direction: column;*/
/*    }*/

/*    .current-workout,*/
/*    .workout-display {*/
/*        width: 100%;*/
/*        border-right: none;*/
/*        border-bottom: 4px solid #40E0D0;*/
/*    }*/

/*    main {*/
/*        flex-direction: column;*/
/*    }*/

/*    .incline,*/
/*    .playModes,*/
/*    .speed {*/
/*        min-width: 100%;*/
/*        border: none;*/
/*        border-top: 4px solid #40E0D0;*/
/*        padding: 1rem 0;*/
/*    }*/

/*    .Btn {*/
/*        width: 6rem !important;*/
/*    }*/

/*    #running-track {*/
/*        width: 90%;*/
/*    }*/
/*}*/