@font-face {
    font-family: "Chewy";
    src: url("Chewy-Regular.ttf");
}

@font-face {
    font-family: "Computer Modern";
    src: url("cmunsl.ttf");
}

:root {
    --white1: rgb(240, 244, 247);
    --white2: rgb(251, 252, 253);
    --white3: rgb(216, 227, 238);

    --blue1: rgb(43, 118, 224);
    --blue2: rgb(91, 159, 255);

    --black1: rgb(3, 19, 41);
    --black2: rgb(65, 65, 85);

    --gray1: rgb(154, 154, 161);
    --gray2: rgb(224, 224, 229);
}

a, a:active, a:hover {
    text-decoration: none;
    color: inherit;
}

body {
    font-family: "Chewy";
    margin: 0px;
    background-color: var(--white2);
}
button {
    font: inherit;
    border: 0px solid var(--blue1);
    background-color: var(--blue1);
    color:var(--white1);
    padding: 17px;
    border-radius: 17px;
    transition: background-color 0.3s ease-in;
} button:hover {
    cursor: pointer;
    background-color: var(--blue2);
}

h1 {
    margin: 0px;
    font-size: 52px;
    color: var(--black1);
}
h2 {
    color: var(--black1);
}
p, a, li {
    margin: 0px;
    font-size: 19px;
    color: var(--black2);
}

textarea {
    resize: vertical;
    margin-top: 40px;
    padding: 15px;
    border-radius: 15px;
} textarea:focus, textarea:active {
    outline: none;
}

input {
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--gray2);
    color: var(--black1);
    width: 200px;
    font-family: "Chewy";
} input:focus, input:active {
    outline: none;
}

expression {
    font-family: "Computer Modern";
    margin: 6px;
    margin-left: 20px;
    display: inline-block;
    width: auto;
    background-color: var(--white3);
    font-size: 23px;
    padding: 10px;
    border-radius: 5px;
}


/* MAIN PAGE */

.mainPage {
    #IntroductionDiv {
        background-color: var(--white1);
        display: grid;
        grid-template: "a b" auto;
        grid-template-columns: 50% 50%;
    }

    #IntroductionDivLeft {
        grid-area: "a";
        padding: 30px;
        display: grid;
        grid-template: "a" 300px "b" 60px "c" 40px;
        gap: 20px;
        padding-bottom: 50px;
    }

    #IntroductionDivRight {
        grid-area: "b";
        background-image: url("stock-images/pudu.png");
        background-size: cover;
        background-position: center;
    }

    #descp {
        grid-area: "a";
        place-self: center;
        font-size: 24px;
        color: var(--black1);
    }

    #descbutton {
        grid-area: "c";
        place-self: center;
    }

    #infoDiv {
        padding: 100px;
    }
}

.learnTab {
    #mainContentDiv {
        padding: 100px;
        padding-top: 70px;
    }
}

.writeTab {
    #mainContentDiv {
        padding: 100px;
        padding-top: 70px;
    }
    #writeTextarea {
        margin: 0px;
        width: 700;
        height: 320;
        background-color: var(--black1);
        color: var(--white1);
    }
    #textDiv {
        margin:20px;
        background-color: var(--white3);
        border-radius: 15px;
        display: inline-block;
    }
    #textareaOptionsDiv {
        padding: 15px;
    }
    .textareaOptionButton {
        background-color: var(--gray1);
    }
}

.pageHeader {
    li {
        list-style: none;
        font-size: 15px;
        padding: 5px;
        border-radius: 5px;
        transition: 0.3s;
    } li:hover {
        background-color: var(--white3);
        cursor: pointer;
    }

    ul {
        padding-left: 0px;
        margin: 0px;
    }

    #headerDiv {
        display: flex;
        padding: 18.5px;
        border-bottom: 1px solid var(--gray1);
        position: relative;
    }
    #userOptionsDiv {
        display: none;
        position: absolute;
        right: 17px;
        top: 60px;
        background-color: var(--white1);
        border: 1px solid var(--gray1);
        border-radius: 10px;
        padding: 10px;
    }
}

.signInDiv {
    margin-left: auto;
}

#signedDiv {
    display: none;
}

#signInButton {
    padding-top: 7px;
    padding-bottom: 7px;
}

.signinTab {
    text-align: center;
    padding: 400px;
    padding-top: 100px;
    padding-bottom: 0px;

    label {
        margin-left: 10px;
        color: var(--black1)
    }

    #mainGridDiv {
        display: grid;
        grid-template-rows: 200px auto auto;
        gap: 20px;
    }

    #signinForm {
        margin-left: auto;
        margin-right: auto;
    }
}

.learnwayBody {
    display: none;

    #contentDiv {
        padding: 100px;
    }

    #sectionsDiv {
        margin-left: 20%;
        margin-right: 20%;
    }

    .section { 
        padding-top: 90px;
        padding-bottom: 90px;
        border-bottom: 3px solid var(--gray2);
        border-radius: 2px;

        #sectionDesc {
            padding: 30px;
            border-radius: 20px;
            transition: 0.3s;
            
            .sectionpart {
                color: var(--white1);
            }
        } #sectionDesc:hover {
            cursor: pointer;
        }

        #sectionGroup {
            padding: 40px;
            display: grid;
            grid-template-columns: auto auto auto auto;
            gap: 40px;
            padding-left: 30px;

            div {
                color: var(--white1);
                border-radius: 40%;
                padding: 40px;
                transition: 0.3s;

                img {
                    width: 60px;
                    height: 60px;
                }
            } div:hover {
                cursor: pointer;
            }
        }

        #sectionQuiz {
            text-align: center;
            color: var(--white1);
            padding: 20px;
            border-radius: 20px;
            font-size: 25px;
            transition: 0.3s;
        }
    }
}

.lessonBody {
    #contentDiv {
        padding: 100px;

        #lessonElements {
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            display: grid;
            gap: 50px;
            transition: 0.3s;

            textarea {
                margin-top: 0;
                width: 100%;
                height: 100px;
                resize: none;
            }

            #upperbar {
                display: flex;

                .progressUnit {
                    margin: 2px;
                    width: 10%;
                    border-radius: 6px;
                    height: 20px;
                    background-color: var(--gray1);
                    transition: 0.2s;
                }
            }

            #information {
                color: var(--black1);
                font-size: 21px;
            }

            #information, #instantLessonForm {
                transition: 0.3s;
            }
        }

        #lessonCompleted {
            opacity: 0;
            width: 600px;
            margin-left: auto;
            margin-right: auto;
            display: none;
            gap: 20px;
            text-align: center;
            transition: opacity 0.3s;
        }
    }
}

.clickableText:hover {
    cursor: pointer;
    user-select: none;
}