/* © Anton Kalyuta 2022 - 2026 */
* {
    user-select: none;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#frame {
    /*background: url(/img/background) no-repeat center;*/
    /*background-size: 205% 1100vh;*/
    flex: 1 0 auto;
    margin-top: 0;
}

.pageName {
    color: white;
}

@media (max-device-width: 1400px) {
    #frame {
        background: #efefef57;
        background-size: revert;
    }
}

html.dark #frame {
    background: #404040;
}

@media (min-device-width: 481px) {
    /*.linkButton:focus {*/
    /*    border: 5px solid #05c3d7 !important;*/
    /*}*/
    /**/
    /*.linkButton:hover {*/
    /*    border: 5px solid #05c3d7 !important;*/
    /*}*/
}

@media (max-device-width: 480px) {
    .linkButton:focus .taskName, .linkButton:hover .taskName {
        font-size: 55px;
    }

    .linkButton:focus svg, .linkButton:hover svg {
        width: 100px;
        height: 100px;
    }
}

.linkButton {
    /*color: #5f5c5c;*/
    font-size: 25px;
    /*border: 5px solid white;*/
    background: linear-gradient(45deg, #50c9d58c, #ffffff70);
    border-radius: 44px;
    padding: 40px;
    width: 720px;
    min-height: 50px;
    margin-top: 90px;
    /*box-shadow: -4px 1px 10px 4px #e3e3e3;*/
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

@media (max-device-width: 480px) {
    body {
        background: none;
    }

    .linkButton {
        border: revert;
        /* border-radius: 24px; */
        width: 80%;
        border: 1px solid #dbdbdb;
        /* max-width: 100%; */
        height: 285px;
        /* box-shadow: -4px 19px 10px 4px #9f9f9f52; */
        box-shadow: none;
        flex-direction: row;
        margin-top: 50px;
        cursor: pointer;
        background: none;
        border-radius: 64px;
    }

    div.taskName {
        font-size: 55px;
        color: #50565e;
    }

    .taskName {
        color: inherit;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 22px;
        letter-spacing: 0.5px;
    }
}

html.dark div.taskName {
    color: white;
}

html.dark .linkButton {
    background: #404040;
    box-shadow: -4px 19px 10px 4px #303030;
    border: 5px solid #b1b1b1 !important;
}

.linkButton svg:not(.back svg, .next svg) {
    padding: 10px;
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

@media (max-device-width: 480px) {
    .linkButton svg:not(.back svg, .next svg) {
        width: 100px;
        height: 100px;
        display: none;
    }
}

.taskName {
    color: inherit;
    position: absolute;
    left: 50%;
    transform: translateX(-60%);
    font-size: 22px;
    color: white;
}

.firstRow > :first-child {
    display: none;
}

#magic-squares {
    color: #52798d;
}

.linkButton svg:not(.back svg, .next svg) {
    padding: 5px;
    border: 5px solid #00cdba;
}

#mental-arithmetic {
    color: #00cdba;
}

/*#mentalArithmetic svg {*/
/*    padding: 5px;*/
/*    border: 5px solid #00cdba;*/
/*}*/
/**/
#running-line {
    color: #05c3d7;
}

/*#running-line svg {*/
/*    background: #05c3d7;*/
/*}*/
/**/
#rotating-symbols {
    color: #8bc34a;
}

/*#rotating-symbols svg {*/
/*    background: #8bc34a;*/
/*}*/
/**/
#missing-characters {
    color: #ff0763b3;
}

/*#missing-characters svg {*/
/*    background: #ff0763b3;*/
/*}*/
/**/
#flipped-text {
    color: #2196f3d1;
}

/*#flipped-text svg {*/
/*    background: #2196f3d1;*/
/*}*/
/**/
#reading-without-spaces {
    color: #1abc9c;
}

/*#reading-without-spaces svg {*/
/*    background: #1abc9c;*/
/*}*/

#missing-vowels {
    color: #e14168;
}

/*#missing-vowels svg {*/
/*    background: #e14168;*/
/*}*/

#rearranged-characters {
    color: #9b59b6;
}

/*#rearranged-characters svg {*/
/*    background: #9b59b6;*/
/*}*/

#torn-text {
    color: #5f5c5c;
}

/*#torn-text svg {*/
/*    background: #5f5c5c;*/
/*}*/

a {
    text-decoration: none;
    font-family: "Open Sans", sans-serif;
}

div {
    font-size: 25px;
    font-family: "Open Sans", sans-serif;
}

#menu {
    width: max-content;
    position: absolute;
    margin-left: 40px;
    margin-top: 40px;
    display: none;
}

.menu-item {
    color: rgba(71, 80, 77, 100);
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.menu-item:hover .menu-item-name, .f-menu-item .menu-item-name {
    color: #05c3d7;
}

.pageName {
    font-size: 27px;
    width: 100%;
    margin-top: 100px;
    /* color: #05c3d7; */
}

.slogan {
    font-size: 30px;
    color: #baf8ff !important;
    font-weight: bold;
}

.goToTraining {
    width: 530px;
    border-radius: 40px !important;
    /*display: block;*/
    background: linear-gradient(45deg, #05c3d7, #05c3d757);
    box-shadow: -5px 3px 14px 2px #6db3cf;
    display: none;
}

.firstRow {
    color: revert;
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: row;
    align-items: center;
    height: 50px;
    position: relative;
}

@media (min-device-width: 481px) {
    #linkButtons {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
}

@media (max-device-width: 480px) {
    .slogan {
        font-size: 50px;
        color: #05c3d7 !important;
    }

    .pageName {
        color: #05c3d7;
    }

    .goToTraining, .slider {
        display: none;
    }
}