body  {
    background-color: rgb(113, 113, 113);
    margin: 0;
    height: 100vh;
    overflow: hidden;
}
/*Style for all buttons*/
.button-style {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30vw;
    padding: 1vw;
    background-color: rgb(159, 158, 158);
    border: 0.3em solid rgb(128, 128, 128);
    font-family: sans-serif;
    font-size: 2vw;
    img {
        max-width: 15vw;
        height: auto;
    }
    &:hover {
        background-color: rgb(193, 192, 192);
        transform: scale(1.05);
    }
    &.is-active {
        background-color: rgb(161, 160, 160);
        transform: scale(0.95);
    }
    &.sidebar-button {
        background-color: rgb(130, 130, 130);
        border: 0.3em solid rgb(118, 118, 118);
        font-size: 1vw;
        &:hover {
            background-color: rgb(140, 140, 140);
            transform: scale(1.05);
        }
        &.is-active {
            background-color: rgb(125, 125, 125);
            transform: scale(0.95);
        }
    }
}

/*Our environments*/
.environments {
    width: 100vw;
    height: 150vh;
    position: relative;

    /*Main screen*/
    .environment-main {
        position: absolute;
        width: 100%;
        height: 100%;
        transform: translateX(0);
        transition: transform 0.5s ease-in-out;
        .main-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            place-items: center;
            height: 100vh;
        }
    }

    /*Selftest page environmment*/
    .environment-selftest {
        width: 100%;
        height: 100%;
        position: absolute;
        transform: translateX(-100%);
        transition: transform 0.5s ease-in-out;
        /*The grid FOR the selftest page*/
        .selftest-grid {
            display: grid;
            grid-template-columns: 20% 80%;
            height: 150vh;
            /*SIDEBAR*/
            .sidebar-grid {
                font-size: 1.5vw;
                background-color: rgb(85, 85, 85);
                position: sticky;
                top: 0;
                z-index: 1000;
                height: 95vh;
                display: grid;
                grid-auto-rows: auto;
                align-content: space-between;
                padding: 2vw;
                .button-style {
                    justify-self: center;
                    align-self: end;
                    justify-content: center;
                    height: 5vh;
                    width: 15vw;
                    font-size: 1vw;
                }
                .header-style {
                    font-size: 2vw;
                    justify-self: center;
                    align-self: start;
                }
            }
            /*Main page, this is where the category grid exists*/
            .main-testpage {
                overflow-y: scroll;
                height: 90%;
                /*Category class*/
                .selftest-category {   
                    display: grid;
                    row-gap: 3vw;
                    padding: 1vw;
                    grid-auto-rows: auto;
                    .header-style {
                        font-size: 2.5vw;
                        align-self: start;
                    }
                    /*Self tests themselves*/
                    .selftests-grid {
                        display: grid;
                        border:0.4vw rgb(92, 92, 92) solid;
                        background-color: rgb(105, 105, 105);
                        align-content: center;
                        justify-content: space-between;
                        height: 90%;
                        width: 90%;
                        padding: 0.5vw;
                        grid-auto-flow: column;
                        .button-style {
                            height: 5vh;
                            width: 15vw;
                            font-size: 1vw;
                            place-content: center;
                            border-color: rgb(74, 74, 74);
                        }
                    }
                }
                
            }
        }
    }

    /*Results page*/
    .environment-results {
        transform: translateX(100%);
        width: 100%;
        height: 100%;
        position: absolute;
        transition: transform 0.5s ease-in-out;
        /*Main grid*/
        .results-grid {
            height: fit-content;
            display: grid;
            grid-auto-rows: auto;  
            align-content: space-between;
            justify-content: center;
            gap: 1vh;
            /*For the header*/
            .header-style {
                font-size: 3vw;
                align-self: center;
                justify-self: center;
            }
            /*Back button at the end of the page*/
            .button-style {
                width: 15vw;
                height: 7vw;
                align-self: end;
                justify-self: center;
                place-content: center;
                font-size: 2vw;
                margin-top: 10vh;
            }
            /*The results grid itself*/
            &.results {
                display: flex;
                align-self: start;
                justify-self: start;
                place-content: center;
                gap: 2vw;
                column-gap: 15vw;
                &.result {
                    display: grid;
                    grid-auto-rows: auto;
                    border: 0.3vw solid rgb(73, 73, 73);
                    justify-content: start;
                    padding: 0.5vw;
                    font-size: 1.2vw;;
                    width: 15vw;
                }
            }
            &.result-headers {
                font-size: 1.5vw;
                align-self: end
            }
        }
    }
    /*Slide animations*/
    &.show-selftest {
        .environment-main {
            transform: translateX(100%);
        }
        .environment-selftest {
            transform: translateX(0);
        }
        .environment-results {
            transform: translateX(100%);
        }
    }
    &.show-main {
        .environment-main {
            transform: translateX(0);
        }
        .environment-selftest {
            transform: translateX(-100%);
        }
        .environment-results {
            transform: translateX(100%);
        }
    }
    &.show-results {
        .environment-main {
            transform: translateX(-100%);
        }
        .environment-selftest {
            transform: translateX(-100%);
        }
        .environment-results {
            transform: translateX(0);
        }
    }
}