body {
    display:flex;
    flex-direction:column;
    height:100%;
    margin:0;
    text-align:center;
    background:#022b1b;
    font-family:verdana;
    font-size:20px;
    color:white;
    button{
        font-size:18px;
        color:white;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        display:inline-block;
        cursor:pointer;
    }
    button:disabled{
        cursor:not-allowed;
        background-color: rgba(0, 0, 0, 0.2);
    }
    h1{
        font-size:35px;
        margin:10px;
    }
    h2{
        font-size:27px;
        margin:10px
    }
    p{
        font-size:23px;
    }
    a{
        color:white;
        text-decoration:none;
    }
    a:hover{
        text-decoration:underline;
    }
    textarea{
        width:100%;
        text-align:center;
        background-color: #022b1b;
        color:white;
        border-color:#01130c;
        font-size:17px;
        resize:none;
        border-radius: 10px;
        margin:5px
    }
    .clear {
        clear: both;
    }
    .hamburger{
        margin:5px;
        display:none;
        float:left;
        .line{
            height:6px;
            width:35px;
            background-color:#0ec07c9f;
            mix-blend-mode: difference;
            border-radius:3px;
            margin-top:2px;
            margin-bottom:2px;
            display:block;
        }
    }
    @media(max-width: 1100px){
        .hamburger.show{
            display:inline-block;
        }
    }


    .explode{
        position:absolute;
        width:100vw;
        height:100vh;
        margin:0;
        left:0;
        top:0;
        pointer-events:none;
        z-index:5000;
    }


    header{
        background-color: #099e65;
        text-align:left;
        padding:10px;
        margin:0px;
        h1{
            display:inline;
        }
        p{
            font-size:15px;
            margin:0;
        }
        .right {
            float: right;
            text-align:right;
        }
    }



    .home{
        .hidden{
            display:none;
        }
        flex-grow:1;
        overflow:auto;
        .big{
            h1 {
                font-size:75px;
                @media(max-width: 600px) {
                    font-size:50px;
                }
            }
            h2{
                font-size:45px;
                @media(max-width: 600px) {
                    font-size:30px;
                }
            }
            p{
                font-size:15px;
                @media(max-width: 600px) {
                    font-size:12px;
                }
            }
            .importing{
                font-size:18px;
                display:none;
                color:tomato;
            }
        }
        button{
            vertical-align:top;
            padding:0;
            width:24%;
            @media(max-width: 900px) {
                width:85%;
                margin-bottom:20px;
            }
            overflow:hidden;
            margin-left:4%;
            margin-right:4%;
        }
        button:hover{
            h1{
                font-size:38px;
            }
            h2{
                font-size:29px;
            }
            p{
                font-size:25px;
            }
            width:26%;
            @media(max-width: 900px) {
                width:87%;
            }
            margin-left:3%;
            margin-right:3%;
        }
    }



    .edit{
        flex-grow:1;
        overflow:hidden;
        .view{
            height:calc(100% - 20px);
            overflow-y: auto;
            float:right;
            margin:0px;
            padding:10px;
            background-color: #0e5238;
            width:100%;
            max-width:700px;
            .editMetaData{
                float:right;
            }
            .refresh{
                float:left;
                margin-left:5px;
            }
            h1{
                font-size:45px;
            }
            h2{
                font-size:27px;
            }
            .question{
                border-radius: 10px;
                margin:25px;
                padding:5px;
                padding-bottom:10px;
                background-color:#098555;
                h1{
                    font-size:23px;
                }
                h2{
                    font-size:20px;
                }
                button{
                    border-radius: 5px;
                }
                .delete{
                    float:left;
                }
                .edit{
                    float:right;
                }
                img{
                    width:60%;
                    height:fit-content;
                }
            }
            .addQuestion{
                float:right;
            }
        }
        .sideBar{
            float:left;
            height:100%;
            overflow-y: auto;
            background-color:#021f13;
            text-align:left;
            width:calc(100% - 720px);
        }
        @media(max-width: 1100px){
            .sideBar{
                display:none;
                position:absolute;
                top:0;
                left:0;
                width:400px;
                max-width:85%;
                z-index:100;

                flex-direction:column;
                align-items:flex-start;
                .back{
                    order:99;
                    margin-top:35px;
                }
            }
            .sideBar.show{
                display:flex;
            }
            .sideBarBack{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                z-index:90;
                background-color: #000000b2;
                display:none;
            }
            .sideBarBack.show{
                display:block;
            }
        }
    }

    .modalBackground, .metaModalBackground, .importExport{
        position: absolute;
        left: 0;
        top: 0;
        width:100%;
        height:100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index:1000;
        display:flex;
        align-items:center;
        justify-content: center;
        overflow:hidden;
        .next{
            margin:0;
            padding:0;
            width:100%;
        }
        .modal{
            background-color:#0a8355;
            padding: 20px;
            border: 1px solid #a8ffdd;
            width: 80%;
            border-radius: 5px;
            overflow-y:auto;
            max-height:80vh;
            .cancelButton{
                background-color:rgba(0, 0, 0, 0);
                border:none;
                font-size:25px;
                float:right;
            }
            h2{
                margin-left:0;
                margin-right:0;
                textarea{
                    font-size:27px;
                }
            }
            input[type='radio'] {
                transform: scale(1.5);
                vertical-align:top;
                margin-top:11px;
                display:inline;
            }
            input[type='checkbox'] {
                transform: scale(1.3);
                margin-right:9px;
            }
            textarea{
                vertical-align:top;
            }
            .radioText{
                vertical-align:top;
                margin-top:5px;
                display:inline-block;
            }
            .qTime{
                width:25%;
                margin-left:20px;
            }
            .qAnswer{
                width:75%;
            }
            .answerChoice{
                display:flex;
                align-items:center;
                justify-content: center;
            }
            select{
                transform:scale(1.5); 
                option{
                    font-size:15px;
                }
                margin-left:45px;
                margin-right:45px;
                padding:0px;
                margin-bottom:15px;
                margin-top:10px;
            }
            .fileInput{
                transform:scale(1.5);
                padding:15px;
                margin-bottom:25px;
                background-color:#0e5238;
                border-radius:15px;
            }
            img{
                width:100%;
            }
        }
    }

    .play{
        height:100%;
        display:flex;
        flex-direction:column; 
        .top{
            .playExit{
                float:left;
                display:inline;
            }
        }
        img:not(.big){
            cursor:zoom-in;
            float:right;
            @media(min-width: 500px) {
                margin:15px;
                height:150px;
                width:fit-content;
            }
            @media(max-width: 500px) {
                width:100%;
                height:fit-content;
            }
        }
        .content{
            width:100%;
            flex-grow:1;
            display:flex;
            flex-direction:column;
            .practice{
                height:0;
                display:none;
            }
            .flashcards{
                width:100%;
                flex-grow:1;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:center;
                .card{
                    display:flex;
                    /*//TODO - figure this out*/
                    @media(max-width: 750px){
                        flex-direction:column;
                        img{
                            max-width:90%;
                            max-height:fit-content;
                        }
                    }
                    align-items:center;
                    height:75%;
                    background-color:#0e5238;
                    width:75%;
                    border-radius:15px;
                    cursor:pointer;
                    justify-content:center;
                }
                .fcardOptions{
                    button{
                        padding:10px;
                    }
                }
            }
        }
        .question{
            flex-grow:1;
            display:flex;
            flex-direction:column;
            .answers{
                display:flex;
                flex-wrap: wrap;
                flex-grow:1;
                align-items:stretch;
                .answer{
                    min-height:50px;
                    min-width:300px;
                    flex-basis:calc(50% - 10px);
                    flex-wrap: wrap;
                    flex-grow:1;
                    align-items:stretch;
                }
                .openEnded{
                    width:100%;
                    textarea{
                        margin:10px;
                        width:calc(100% - 20px);
                        background-color: #064d31;
                        color:white;
                        font-size:25px;
                    }
                    textarea::placeholder {
                        color: rgb(163, 163, 163);
                    }
                }
            }

        }
    }
}