@font-face {
    font-family: 'raileway';
    font-weight: bold;
    font-size: medium;
    src: url("fonts/raileway/Raleway-Bold.ttf");
}
@font-face {
    font-family: 'raileway';
    font-weight: 500;
    font-size: medium;
    src: url("fonts/raileway/Raleway-Medium.ttf");
}
@font-face {
    font-family: 'raileway';
    font-weight: 700;
    font-size: medium;
    src: url("fonts/raileway/Raleway-SemiBold.ttf");
}

.table{
    margin: 2rem 1rem;
}

*{
    box-sizing: border-box;
    font-size: 1.5rem;
}
tr,td,th{
    font-size: 1.9rem !important;
}
.link_custom{
    margin: 4rem 1rem;
}

html{
    font-size: 10px !important;
    scroll-behavior: smooth;
}
.copyright{
    color: #6d6d6d;
}
.copyright > p>a{
    text-decoration: none;
}
.totalCont{
    display: grid;
    grid-template-columns: [slide-start] 28rem [slide-end main-start] 1fr;
    grid-template-rows: 40rem  auto;
    grid-gap: 0 2%;
}


.intro{
    position: relative;
    overflow: hidden;
    grid-row: 0/1;
    grid-column: 1 / -1;
    background: rgb(110,244,91);
    background: linear-gradient(142deg, rgba(110,244,91,1) 0%, rgba(0,212,255,1) 100%);    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-main{
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.logo-main-img{
    width: 13rem;
    height: 13rem;
}

.header-main{
    font-family: raileway;
    font-weight: bold;
    text-transform: uppercase;
    color: #353535;
    font-size: 2.5rem;
    margin-top: 2.5rem;
}

.third_section{
    margin-left: 1.5rem;
    width: 87%;
    position: relative;
}
.fourth_head{
    font-size: 2.2rem;
    margin: .5rem 0;
}


.sidebar{
    grid-column: slide-start / slide-end;
    position: relative;
    border-right: 1px solid #efefef;
    padding: 0 1.5rem;
}
.accordion-button:focus{
    border-color: unset !important;
    box-shadow: unset !important;
}
.accordion{
    position: sticky;
    top: 2rem;
    left: 0;
    font-size: 1.7rem;
}
.accordion-item{
    border: unset !important;
}

.accordion-button:not(.collapsed) {
    color: #00e3ff;
    background-color: unset !important;
    box-shadow: unset !important;
    font-weight: 700;
}

 .accordion-button{
     font-size: 2rem;
 }

.main{
    grid-column: main-start / -1;
    min-height: 100vh;
    padding: 2rem;
}

.main-text{
    font-size: 1.5rem;
}

.secondary_section{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 2rem;
}
.about_text{
    font-weight: 100;
    font-size: 2.5rem;
}

.third-head{
    font-size: 3.5rem;
    margin: 1.5rem 0;
}


.liSideCl{
    list-style: none;
    position: relative;
    font-size: 1.2rem;
    transition: all .3s;

}

.liSideCl::before{
    content: '';
    position: absolute;
    left: -1%;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
    width: .2rem;
    background: #e7e7e7;
}
.btn{
    font-size: 1.5rem !important;

}

.linkSideCl{
    transition: all .2s !important;
}

.active_link{
    color: #00e3ff;
}

.active_li::before{
    background: #00e3ff !important;
}
.btn-check:focus+.btn, .btn:focus{
    box-shadow: unset !important;
}

.accordion-button{
    position: relative;
    margin-left: 1rem;
}
.accordion-button::before{
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: .7rem;
    height: .7rem;
    background: #00e3ff;
    border-radius: 100%;
}
.drag_elem{
    width:20rem;
    height: 50rem;
    background: aquamarine;
    /*border-radius: 1rem;*/
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25);
}

.slideAnim{
    transition: all .5s;
    position: absolute;
    width: 8rem;
    height: 21rem;
    background: #00e3ff;
    border-radius: 0 .5rem .5rem 0;
    left: 0;
    box-shadow: 0 2px 3px #0000001f;
    animation: slide-in 3.7s ease-out infinite;
}

.freeAnim{
    clip-path: polygon(49% 51%, 100% 0, 0 0, 44% 45%, 100% 100%, 0 100%);
    width: 8rem;
    height: 9rem;
    background: #c2ff71;
    right: 5rem;
    position: absolute;
    transform: rotate(
            90deg
    );
    animation: freeMove 15s linear infinite;
}
.mouse{
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 8rem;
    animation: mouseFreeMove 15s linear infinite;

}
#button_to_slide{
    position: absolute;
    bottom: 0;
    background: #c1c1c1;
    color: #101010;
    text-decoration: none;
    font-size: 1.3rem;
    padding: 1rem;
    border-radius: .5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);

}

.example_elem_free{
    width: 10rem;
    height: 10rem;
    background: aquamarine;
    position: relative;
    left: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.example_elem_slide{
    width: 10rem;
    height: 20rem;
    background: aquamarine;
    position: relative;
    left: 5rem;
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.language-html{
    cursor: text;
}
.example_cont{
    width: 100%;
    min-height: 40rem;
}

.language-html{
    font-size: 1.5rem}
.linkB{
    color: #006ee0;
    text-decoration: none;
}
.codeB{
    color: #171717;
    text-decoration: none;
}
.linkR{
    color: #d73038;
    font-size: 1.5rem;
}
.linkG{
    color: #0c6100;
}
.highlight{
    position: relative;
    padding: 1rem;
    background: rgba(0 ,0 ,0 , .05);
    margin: 2rem 0;
    border-radius: .4rem;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    width: 100%;
    overflow-x: auto;
}
.copyC{
    position: absolute;
    top: 62%;
    transform: translateY(-50%);
    right: 2rem;
    width: 3rem;
    height: 3.5rem;
    padding: .2rem;
    z-index: 111;
    transition: all .3s;
    border-radius: .31rem;
}
.copy_first{
    top: 55% !important;
}
.section{
    width: 100%;
}

.totalCont{
    width: 100vw;
}
.copyC:hover{
    background: #c1c1c15c;
}

.alertify-notifier.ajs-right{
    font-size: 1.5rem !important;
}
.downloadS{
    font-size: 2rem !important;
    margin: 2rem 1rem;
}

.clipboardImg{
    width: 100%;
    height: 100%;
}

@keyframes slide-in {
    0%{
        transform: translateX(-200px);
    }

    50%{
        transform: translateX(0);
    }

    100%{
        transform: translateX(-200px);
    }
}

@keyframes mouseFreeMove {
    25%{
        transform: translate(-15rem ,-140px)
    }

    50%{

        transform: translate(-25rem ,20px)
    }

    75%{
        transform: translate(-7rem ,99px)
    }

    100%{
        transform: translate(0 ,0)
    }

}

@keyframes freeMove {
    0%{

    }

    25%{
        transform: translate(-15rem ,-140px) rotate(
                140deg
        );
    }

    50%{

        transform: translate(-25rem ,20px) rotate(
                200deg
        );
    }

    75%{
        transform: translate(-7rem ,99px) rotate(
                250deg
        );
    }

    100%{
        transform: translate(0 ,0) rotate(
                90deg
        );
    }
}