* {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    margin: 0;
    padding: 0;
}

/* Header */

.head {
    height: 80px;
    top: 0;
    left: 0;
    background: #fff;
}

.head__res {
    align-items: center;
}

.grid {
    width: 1140px;
    max-width: 100%;
    margin: 0 auto;
}
.head__headers > div {
    display: flex;
}

.head__logo img {
    margin-top: 22px;
    width: 108px;
    height: 35px;
}

#logodark {
    display: none;
}

.head__menu {
    margin: 0 auto;
    justify-content: space-between;
}

.head__menu-picture {
    position: relative;
    font-size: 14px;
    line-height: 16px;
    display: flex;
    align-items: center;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 22px;
}

.head__menu-subtool {
    position: absolute;
    width: 258px;
    height: 480px;
    top: 30px;
    left: -20px;
    background: #FAFAFA;
    display: none;
    z-index: 2;
}

.head__menu-subtool-grid {
    flex-direction: column;
    width: 220px;
    height: 440px;
    margin: 20px 20px;
    padding: 1.25rem 1rem;
    font-weight: 300;
    font-size: 13px;
    line-height: 40px;
}

.dropitem:hover,
.dropitemnav:hover {
    color: #EA4544;
}

.a:hover p {
    color: #EA4544 !important;
}

.dropitemnav {
    padding: 0.2rem 1rem;

}
.head__menu-overlay {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0 , 0, 0, 0);
    display: none;
    z-index: 1;
}


.head__menu-subservice {
    position: absolute;
    flex-direction: column;
    width: 123px;
    height: 320px;
    top: 50px;
    left: 0px;
    background: #FAFAFA;
    display: none;
    z-index: 2;
}

.head__menu-subservice-grid {
    width: 200px;
    height: 320px;
    align-self: center;
    font-weight: 300;
    font-size: 13px;
    line-height: 40px;
    padding: 1.25rem 1rem;
}



.test-menu a {
    text-decoration: none;
    color: #000;
}

#head__menu-subtool a,
#head__menu-subservice a {
    color: #000;
}


.head__menu-tool, .head__menu-blog, .head__menu-service {
    padding: 12px 23px;
    cursor: pointer;
}

.head__menu-G {
    color: #FFFFFF;
    background: #EA4544;
    padding: 12px 23px;
}

.head__menu-picture span {
    padding-left: 10px;
}

.head__menu-picture:hover {
    background: #EA4544;
}

.head__menu-picture:hover a {
    color: #fff;
}

#head__menu-creat:hover ,
#head__menu-blog:hover ,
#head__menu-tool:hover ,
#head__menu-service:hover {
    color: #FFFFFF !important;
}
/* Body */

#lightmode {
    background-color: #E5E5E5;
    animation-name: opacityLightmode;
    animation-duration: 1s;

}

@keyframes opacityLightmode {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

.elip {
    width: 40px;
    height: 40px;
    background: #EA4544;
    border-radius: 50px;
    cursor: pointer;   
    box-sizing: border-box;    
    display: flex; 
    align-items: center;
    justify-content: center;
}

.elip i {
    width: 14px;
    height: 16px;
    color: #FFFFFF;
}

.frame5 {
    margin: 0 auto;
    width: 945px;
    height: 423px;
    background: #FFFFFF;
    border-radius: 3px;
}

.frame5-text p{
    box-sizing: border-box;
    padding: 20px 20px 21px 20px;
    height: 382px;
}

.content-dark {
    font-size: 100%;
    margin: 0 auto;
    color: #E5E5E5;
    background: #1f1f1f;
    padding: 20px;
    overflow-y: auto;
    resize: none;
    width: 100%;
    height: 100%;
    min-height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    outline: 0;
    font-family: sans-serif;
    font-size: medium;
}

#changetext p{
    font-family: 'Roboto Mono', monospace;
}

#changetext1 {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 13px;
    line-height: 26px;
    display: none;
}

.frame5 input {
    display: none;
}

.frame6 {
    margin: 0 auto;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-top: 50px;
    display: flex;
    width: 360px;
    height: 40px;
    left: 540px;
    top: 130px;
}

.frame4 {
    margin: 0 auto;
    padding-top: 20px;
    padding-bottom: 50px;
    width: 570px;
    height: 75px;
}

.frame4-text {
    text-align: center;
    font-size: 13px;
    line-height: 15px;
}

.frame3 {
    position: relative;
    z-index: 1;
    height: 50px;
    margin-top: 10px;
    background: #FFFFFF;
    border-radius: 1000px;
    cursor: pointer;
}

#post-shortlink {
    display: block;
    z-index: -1;
}

.frame3-link {
    font-size: 14px;
    line-height: 16px;
    text-align: center;
    color: #808080;
    width: 570px;
    height: 50px;
    border: none;
    outline: none;
}

#frame3-hidden {
    font-size: 14px;
    background: #EA4544;
    color: #fff;
    margin-top: -50px;
    display: none;
}

#frame3-hidden p {
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
}

#frame3__copy {
    margin-top: -50px;
    background: #EA4544;
    color: white;
    display: none;
    border-radius: 1000px;
    z-index: 1;
}

.frame3__copy p {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#copy__overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0 , 0, 0, 0);
    display: none;
    z-index: 2;
}



#frame3__copy p {
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
}

.frame3:hover {
    background: #EA4544;
    transition: background 0.5s;
    color: white;
}


.frame3:hover #frame3-hidden {
    display: block;
}

.head__menu-picture input {
    display: none;
}

.frame4-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0 , 0, 0, 0);
    display: none;
}

/* .frame4 input {
    display: none;
} */

.frame6 {
    width: 360px;
    height: 40px;
}

#change__text1, #change__icon1 {
    display: none;
}

#change__text1 {
    margin-top: -20px;
    font-weight: 300;
    font-size: 11px;
    line-height: 13px;
}

.button1__hover,
.button1__hover-darkmode,
.button2__hover,
.button3__hover,
.button4__hover,
.button4__hover-darkmode,
.button5__hover {
    width: 75px;
    height: 13px;
    font-weight: 300;
    font-size: 11px;
    line-height: 13px;
    display: none;
    position: absolute;
    width: 150px;
    height: 30px;
    background: #FFFFFF;
    border-radius: 45px;
    margin: -35px -55px;
}

.button1__hover p,
.button1__hover-darkmode p,
.button2__hover div,
.button3__hover p,
.button4__hover p,
.button4__hover-darkmode p,
.button5__hover p{
    height: 13px;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

#dark {
    display: none;
}

.body__button-1:hover .button1__hover,
.body__button-1-darkmode:hover .button1__hover-darkmode,
.body__button-2:hover .button2__hover,
.body__button-3:hover .button3__hover,
.body__button-4:hover .button4__hover,
.body__button-4-darkmode:hover .button4__hover-darkmode,
.body__button-5:hover .button5__hover {
    display: block;
}

#button4__check {
    display: none;
}

#button4__check-darkmode {
    display: none;
}

.button4__overlay {
    position: fixed;
    z-index: 2;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0 , 0, 0, 0.4);
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

.button4__overlay-darkmode {
    position: fixed;
    z-index: 2;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0 , 0, 0, 0.4);
    display: none;
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

.inputpass {
    width: 298px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 45px;
}

.inputpass i {
    color: #EA4544;
}

.inputpass input {
    border: none;
}

.inputpass-darkmode {
    width: 298px;
    height: 40px;
    background: #FFFFFF;
    border-radius: 45px;
}

.inputpass-darkmode i {
    color: #1F1F1F;
}

.inputpass-darkmode input {
    border: none;
}

#inputpw {
    width: 255px;
    height: 20px;
    margin-top: 10px;
    margin-left: 10px;
}

#inputpw-darkmode {
    width: 255px;
    height: 20px;
    margin-top: 10px;
    margin-left: 10px;
}

#button4__check:checked ~ .button4__overlay {
    display: block;
    display: flex;
}

#button4__check-darkmode:checked ~ .button4__overlay-darkmode {
    display: block;
    display: flex;
}

/* Foot */

.foot {
    height: 100px;
    background: #FFFFFF;
}

.footer {
    display: flex;
}

.frame7 img {
    width: 62.24px;
    height: 53.19px;
    margin-top: 23px;
}

#frame7dark {
    display: none;
}

.foot__text {
    display: flex;
}

.foot__text-1 {
    width: 555px;
    height: 45px;
    margin-top: 28px;
    margin-left: 48.24px;
    font-size: 14px;
    line-height: 22px;
}

.foot__text-1 span {
    color: #EA4544;
}

.foot__text-2 {
    width: 475px;
    height: 45px;
    text-align: right;
    margin-top: 28px;
    font-size: 14px;
    line-height: 22px;
}

.foot__text-1-2 p {
    font-size: 11.5px;   
}

.foot__text-2-2 p{
    font-style: italic;
    font-size: 11.5px;
}

.head__menu-creat a {
    padding: 12px 23px;
}



.head__menu-tool {
    padding: 12px 23px;
}





.head__menu .active {
    background: #EA4544;
    border-radius: 3px;
    color: #ffffff !important;
}