/* ///////////////////header///////////////////// */

@media (max-width:1200px) {
    .contain-shape .left-shape {
        width: 45%;
    }
    .step:nth-of-type(odd) {
        right: 17.4%;
    }
    .step:nth-of-type(even) {
        left: 17.4%;
    }
}
@media (max-width:992px) {
    .landing{
        flex-direction: column-reverse;
        justify-content: space-around;
    }
    .landing .image-landing {
        width: 70%;
    }
    /* ///////////////////////////////////// */
    .editor-code .css-code pre code {
        font-size: 16px;
        padding: 0px 9px;
    }
    .editor-code .html-code pre code {
        font-size: 16px;
    }
    .editor-code .html-code p {
        font-size: 14px;
    }    
    .editor-code .css-code p, .editor-code .html-code p {
        padding: 0px 7px 0px 7px;
        font-size: 13.6px;
    }
    .contain-shape .left-shape {
        display: none;
    }
    .contain-shape .left-shape-md {
        display: block;
    }
    .right-shape {
        width: 100%;
        padding: 5px;
    }
    .popup {
        font-size: 14px;
        padding: 11px;
    }
    .popup button {
        font-size: 13px;
    }
    button.buttun-section{
        display: grid;
    }
    /* /////////////////////////////////////////////////// */
    .contain-code{
        width: 70%;
    }
    .step:nth-of-type(odd) {
        right: 16.4%;
    }
    .step:nth-of-type(even) {
        left: 16.4%;
    }
}

@media (max-width:768px) {
    nav.nav2{
        display: block;
        position: fixed;
        z-index: 20000;
        right: 0;
        top: 0px;
        background-color: #000000d9;
        height: 100%;
        width: 60%;
        border-left: 2px solid aliceblue;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        transform:translateX(105%);
        -webkit-transform:translateX(105%);
        -moz-transform:translateX(105%);
        -ms-transform:translateX(105%);
        -o-transform:translateX(105%);
    }
    nav.nav1{
        display: none;
    }
    nav .nav{
        display: flex;
        flex-direction: column;
        /* background-color: var(--primary-dark); */
        padding: 10px;
        width: 100%;
        padding-top: 136px;
        padding-right: 20px;
    }
    nav .nav li a{
        width: 100%;
        padding: 12px 15px;
        margin-bottom: 5px;
    }
    div.setting {
        display: none;
    }
    .nav li.hiden{
        display: inline-block;
    }
    nav .nav .effect-nav {
        display: none;
    }
    .btn-menu{
        display: flex;
    }
    header .container {
        justify-content: space-between;
    }
    .intro-svg {
        bottom: -50px;
    }
    .landing .title-landing h2 {
        font-size: 30px;
    }
    .landing .title-landing p {
        font-size: 12px;
        width: 100%;
    }
    .form-landing {
        padding: 10px;
    }
    .form-landing input{
        padding: 5px 14px;
        font-size: 12px;
    }
    .form-landing button {
        padding: 10px 28px;
        font-size: 12px;
    }
    .right-shape{
        flex-wrap: wrap;
    }
    .card-shape:not(:last-child){
        margin-bottom: 10px;
    }
    .sec-source .container .image-source {
        display: none;
    }
    .sec-source .container .left-source {
        width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }
    .contain-left .card-skills .image {
        flex: 45%;
    }
    .sec-roud .container {
        justify-content: center;
    }
    /* //////////////////////////////////// */
    footer .social-media a {
        font-size: 20px;
        width: 40px;
        height: 35px;
        margin-bottom: 10px;
    }
    footer .container {
        flex-wrap: wrap;
    }
    .social-media{
        margin-bottom: 20px;
    }
    /* /////////////////////////////////////////////// */
    .contain-code{
        width: 90%;
    }
    .title h1 {
        font-size: 1.5em;
        margin: 0.4em 0;
    }
    .title p{
        font-size: 14px;
    }
    /* /////////////////////////////////////////////////// */

    .tool-choice-color input[type='text'], .tool-choice-color-deg input[type='text'] {
        margin-top: 0;
        margin-bottom: auto;
        margin-bottom: 16px;
        border: 0;
        padding: 5px;
        text-align: center;
        display: block;
        width: 87%;
        height: 36px;
    }
    .tool-choice-color-deg input[name='text'] {
        display: none;
        border: 1px solid red;
        animation: inputAn .2s linear 1;
        -webkit-animation: inputAn .2s linear 1;
    }
    .main-color, .main-color-deg {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    .tool-choice-color .contain-color-tool, .tool-choice-color-deg .contain-color-tool-deg {
        padding: 20px;
        background-color: #f2f2f2;
        width: 100%;
        height: 100%;
        margin: auto;
        margin-top: 0;
        position: relative;
        display: flex;
        justify-content: center;
        flex-direction: column;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }
    .tool-choice-color, .tool-choice-color-deg {
        width: 100%;
        height: 157px;
        margin-bottom: 10px;
    }
    .choiced-color, .choiced-color-deg {
        width: 100%;
        padding: 10px;
        padding-top: 15px;
    }
    .tool-choice-color-deg h4{
        margin-bottom: 15px;
    }
    .tool-choice-color-deg {
        width: 100%;
        margin-bottom: 35px;
        height: fit-content;
    }
    /* /////////////////////////////////////////////////////////// */
    .section-note .container {
        display: flex;
        flex-direction: column-reverse;
    }
    .left-note {
        width: 100%;
        background-color: var(--white);
        padding: 15px;
        /* margin-bottom: 15px; */
    }
    .text-contain {
        padding: 15px;
        background-color: var(--white);
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding-top: 5px;
    }
    .menu-note h4 {
        padding: 14px 16px;
        font-size: 18px;
        padding-bottom: 3px;
        border-bottom: 3px solid var(--primary-dark);
        width: fit-content;
        padding-right: 0px;
        margin-right: 12px;
    }
    .menu-note {
        width: 100%;
    }
    .overlay-note .container-note {
        width: 75%;
    }
    /* ////////////////////////////////////////////////////////////////// */
    .section-write .container {
        flex-direction: column;
    }
    .menu-right-write {
        width: 100%;
        background-color: var(--white);
        padding: 10px;
        margin-left: 5px;
        display: flex;
        align-items: center;
        border-radius: 5px;
    }
    .menu-right-write > div {
        background-color: #f2f2f2;
        padding: 10px 20px;
        margin-left: 10px;
        font-size: 13px;

    }
    .menu-right-write div:not(:last-child){
        margin-bottom: 0px;
    }
    .menu-right-write div:nth-child(1),
    .menu-right-write div:nth-child(2){
        margin-bottom: 0px;
        font-size: 12px;
    }
    .menu-right-write {
        width: 100%;
        background-color: var(--white);
        padding: 10px;
        /* margin-left: 5px; */
        display: flex;
        align-content: center;
        align-items: center;
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .menu-right-write .btn-lea {
        font-size: 25px;
    }
   
    .menu-left-write {
        width: 100%;
        border-radius: 5px;
    }
    .overlay-logic .contain-logic {
        height: 100%;
        width: 100%;
        padding-top: 35px;
    }
    .overlay-note .close-note, .overlay-logic .close-logic {
        height: 29px;
        width: 35px;
        top: 0px;
        right: 0px;
        border-radius: 0%;
        -webkit-border-radius: 0%;
        -moz-border-radius: 0%;
        -ms-border-radius: 0%;
        -o-border-radius: 0%;
}
    .descibtion-logic {
        padding: 5px 10px;
        margin: 10px 0px;
        font-size: 15px;
        height: 22%;
    }
    .step {
        width: 40%;
    }
    .step:nth-of-type(odd) {
        right: 5.3%;
    }
    .step:nth-of-type(even) {
        left: 5.3%;
    }
        /*///////////////////////////////////////////////  */
        div.btn-letter-contain{
            height: 0px;
        overflow: hidden;
        position: absolute;
        left: 0;
        top: 57px;
        z-index: 100;
        opacity: 0;
        width: 164px;
        padding: 10px;
        }
        .btn-letter-contain.hide{
            height: 666px;
        } 
        .btn-letter-contain .contain-letter div {
            font-size: 11px;
            font-weight: 600;
            padding: 5px;
        }
        .contain-letter-skills h2 {
            font-size: 14px;
        }
}
@media (max-width:576px) {
    .btn-menu{
        margin-right: 15px;
    }
    nav.nav2{
        width: 70%;
    }
    .intro-svg {
        bottom: -26px;
    }
    .landing .title-landing{
        padding: 0px 15px;
        position: relative;
        bottom: 29px;
    }
    .form-landing input, .edit-shape input[type='text'] {
        width: 77%;
    }
    .form-landing button {
        padding: 10px 16px;
        font-size: 12px;
        margin-left: 0;
        width: calc(100% - 82%);
    }
    .landing .image-landing {
        width: 80%;
    }
    nav .nav li a {
        font-size: 12px;
    }
    section h2.title-sec {
        font-size: 17px;
    }
    .contain-left .card-skills .describtion h4 {
        font-size: 14px;
    }
    .contain-left .card-skills .describtion p {
        font-size: 11px;
    }
    .contain-left .card-skills .effect-radio {
        height: 22px;
        width: 22px !important;
    }
    .contain-left .card-skills .effect-radio::before {
        width: 10px;
        height: 10px;
    }
    .btn-up {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .sec-source .container .left-source {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(80px,1fr));
        gap: 10px;
    }
    .card-roud a {
        font-size: 13px;
        margin-bottom: 5px;
    }
    .card-roud span {
        padding: 7px 10px;
        font-size: 12px;
    }
    /* //////////////////////////////////////////////// */
    editor-code .html-code pre code {
        font-size: 15px;
    }
    editor-code .html-css pre code {
        font-size: 15px;
    }
    .close-code {
        width: 30px;
        height: 30px;
        font-size: 22px;
        top: 1px;
        line-height: 1.3;
        right: 2px;
        border-radius: 0px;
    }
    .contain-code .editor-code {
        height: 356px;
    }
    .side-menu .btn-side-menu {
        height: 30px;
        width: 34px;
        left: -36px;
        border-radius: 2px;
    }
    .side-menu .btn-side-menu span {
        width: 27px;
        height: 3px;
    }
    .side-menu .btn-side-menu span:nth-child(3).rotate2 {
        transform: rotate(-45deg) translate(3px,-3px);
        -webkit-transform: rotate(-45deg) translate(3px,-3px);
        -moz-transform: rotate(-45deg) translate(1px,-3px);
        -ms-transform: rotate(-45deg) translate(3px,-3px);
        -o-transform: rotate(-45deg) translate(3px,-3px);
    }
    .side-menu .btn-side-menu span:nth-child(1).rotate1 {
        transform: rotate(45deg) translate(-1px,1px);
        -webkit-transform: rotate(45deg) translate(-1px,1px);
        -moz-transform: rotate(45deg) translate(-1px,1px);
        -ms-transform: rotate(45deg) translate(-1px,1px);
        -o-transform: rotate(45deg) translate(-1px,1px);
    }
    .title {
        padding: 0px 19px;
    }
    .title h1 {
        font-size: 1.2em;
        margin: 0.4em 0;
    }
    .title p {
        font-size: 12px;
    }
    .section-sh {
        padding: 20px 10px;
        padding-bottom: 60px;
    }
    .contain-shapes .tab-menu div {
        padding: 10px 10px;
        font-size: 11px;
        text-align: center;
    }
    .contain-shapes .tab-menu div:not(:last-child) {
        margin-left: 0px;
    }
    .contain-shapes .tab-menu {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(82px,1fr));
        gap: 10px;
    }
    /* ////////////////////////////////////////////// */
    
    .contain-source .tab-menu div:not(:last-child) {
        margin-left: 0px;
    }
    
    .contain-source .tab-menu {
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
        gap: 10px;
    }
    
    .cards .card-sources h3 {
        font-size: 16px;
    }
    .contain-source .tab-menu div {
        padding: 10px 13px;
        font-size: 11px;
        text-align: center;
    }
    .cards .card-sources .word-source li a {
        font-size: 11px;
    }
    .shape-icon-source {
        padding: 10px;
        font-size: 25px;
    }
    .side-menu {
        width: 85px;
    }
    .main-source .side-menu.width-side-menu {
        transform: translateX(85px);
        -webkit-transform: translateX(85px);
        -moz-transform: translateX(85px);
        -ms-transform: translateX(85px);
        -o-transform: translateX(85px);
    }
    .menu-side-source .buttons-menu {
    padding-top: 20px;}
    .menu-side-source .buttons-menu .shape-icon-source:not(:last-child) {
        margin-bottom: 5px;
    }

    /* ////////////////////////////////////////////////////////// */
    .menu-color-generator {
        background-color: var(--white);
        width: 100%;
        padding: 15px;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(80px,1fr));
        gap: 10px;
        align-content: flex-start;
        margin-bottom: 20px;
        border-radius: 5px;
    }
    .menu-color-generator div i {
        font-size: 22px;
    }
    .menu-color-generator div span {
        font-size: 11px;
    }
    .menu-color-generator div {
        display: flex;
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 10px 5px;
        background-color: #f2f2f2;
        cursor: pointer;
        transition: .3s;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        height: 65px;
        font-size: 15px;
    }
    .section-color .container {
        display: flex;
        flex-direction: column;
    }
    .tool-choice-color .contain-color-tool, .tool-choice-color-deg .contain-color-tool-deg {
        padding: 35px 20px;
    }
    /* /////////////////////////////////////////////////////// */
    .section-note .container {
        display: flex;
        flex-direction: column-reverse;
    }
    .form button {
        padding: 12px 30px;
        font-size: 12px;
    }
    .form textarea {
        width: 100%;
        height: 74%;
        font-size: 13px;
    }
    .menu-note h4 {
        padding: 14px 16px;
        font-size: 16px;
        padding-bottom: 5px;
        padding-right: 5px;
        margin-right: 7px;
    }
    .list .list-text {
        font-size: 14px;
    }
    .list {
        margin-bottom: 2px;
    }
    .edit {
        font-size: 15px;
    }
    .delete {
        font-size: 21px;
    }
    .form {
        margin: auto;
        height: 275px;
    }
    .buttons-menu {
        padding-top: 160px;
    }
    .tooltip {
        font-size: 14px;
    }
    .shape-icon-source:not(:last-child) {
        margin-bottom: 31px;
    }
    .left-note {
        width: 100%;
        background-color: var(--white);
        padding: 5px;
    }
    .text-contain {
        padding: 9px;
    }
    .overlay-note .container-note {
        width: 95%;
        height: 95%;
        padding-top: 31px;
    }
    .overlay-note .close-note, .overlay-logic .close-logic {
        height: 30px;
        width: 30px;
top: 3px;
    right: 4px;
        border-radius:  0%;
        -webkit-border-radius:  0%;
        -moz-border-radius:  0%;
        -ms-border-radius:  0%;
        -o-border-radius:  0%; 
    }
    .overlay-note .container-note h4 {
        padding: 10px 5px;
        border-bottom: 2px solid var(--primary-dark);
        padding-bottom: 5px;
        margin-bottom: 10px;
    }
    /* //////////////////////////////////////////////////////////////////// */
    .form-game h2 {
        font-size: 15px;
    }
    .lang label {
        font-size: 12px;
    }
    .lang select {
        font-size: 12px;
    }
    .time p {
        font-size: 14px;
    }
    .form-game button {
        font-size: 13px;
    }
    .contain-words, .result-word {
        padding: 10px;
        font-size: 13px;
    }
    .show {
        display: block;
        font-size: 12px;
    }
    .menu-right-write div {
        font-size: 11px;
        font-weight: 700;
    }
    /* /////////////////////////////////////////////////////////////// */
    .section-logic .container {
        background-color: var(--white);
        padding: 10px;
    }
    .section-logic .container h3 {
        font-size: 16px;
    }
    .logic-cards .card-logic .name-card-logic p {
        font-size: 13px;
        letter-spacing: 1px;
    }
    .logic-cards .card-logic .diffecult progress {
        width: 95px;
    }
    .logic-cards .card-logic span {
        font-size: 30px;
    }
    .menu-top-logic div {
        font-size: 11px;
    }
    .menu-top-logic div i {
        font-size: 14px;
    }
    .descibtion-logic {
        font-size: 12px;
    }
    .btn-logic {
        font-size: 12px;
    }
    .btn-logic i {
        font-size: 15px;
    }
    .side-menu .btn-side-menu span:nth-child(3).rotate2 {
        transform: rotate(-45deg) translate(1px,-3px);
        -webkit-transform: rotate(-45deg) translate(1px,-3px);
        -moz-transform: rotate(-45deg) translate(1px,-3px);
        -ms-transform: rotate(-45deg) translate(1px,-3px);
        -o-transform: rotate(-45deg) translate(1px,-3px);
    }
    .form .btn-edit{
        display: none;
    }
    .contain-solor {
        margin-right: 0px;
    }
    .menu-shape-side{
        width: 250px;
    }
    .contain-code {
        width: 100%;
        height: 100%;
        padding-top: 35px;
    }
    .step {
        width: 42%;
        font-size: 11px;
    }
    .step:nth-of-type(odd) {
        right: 2.5%;
    }
    .step:nth-of-type(even) {
        left: 2.5%;
    }
    .step h4 {
        margin-bottom: 5px;
        font-size: 13px;
    }
    .middle-map {
        width: 6px;
    } 
    .step::before, .step::before {
        width: 22px;
        height: 22px;
        font-size: 15px;
    }
    .keyboard > div > div {
        height: 40px;
        font-size: 10px;
    }
}
@media (max-width:400px) {
    .step:nth-of-type(odd) {
        right: 0%;
    }
    .step:nth-of-type(even) {
        left: 0%;
    }
    .keyboard > div > div {
        height: 32px;
        font-size: 10px;
        padding: 0px;
    }
    .keyboard > div > div span:first-child {
        position: absolute;
        top: 1px;
    }
    .menu-right-write div:nth-child(1), .menu-right-write div:nth-child(2) {
        margin-bottom: 0px;
        font-size: 10px;
    }
    .menu-right-write .btn-lea {
        font-size: 23px;
    }
}