:root {
    --bg-color: #0D0D0D;
    --glow-color: #F2F2F2;
    --main-color: #0ABF04;
    --between-color: #078C03;
    --main-dark-color: #034001;
    --main-scale: calc(1rem + 4vw);
}

*,
*::after,
*::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: whitesmoke;
    font-size: var(--main-scale);
    margin: 0;
    padding: 0;
    font-family: monospace;
    margin-bottom: 4em;
    min-width: 306px;
}

#logo {
    animation: logo-rotate ease-in 1s forwards;
    background-color: whitesmoke;
    --glow-color: none;
    --main-color: black;
}

.navMneu {
    z-index: 9999;
}

.forhover {
    left: unset;
    margin-left: unset;
    margin-right: -0.25em;
    animation: logo-rigth ease-in 1s;
    right: 0;
}

.browser p {
    font-size: 1.3em;
    margin: .5em;
}

.myTopMenu {
    background-color: gainsboro;
    /* padding: .3em; */
    /* margin: 0; */
}

.sideBtn {
    width: 2.5em;
    height: 2.5em;
    /* border: 1px red solid; */
    padding: .3em;
    display: inline-block;
    /* margin: auto; */
}

.manuline {
    border: none;
    background-color: grey;
    height: 10%;
    width: 100%;
    margin: 16.66% 0;
}

.likeH1 {
    /* margin: 0 0 0 15px; */
    font-size: 1.8em;
    position: absolute;
    display: inline-block;
    /* border: 1px solid red; */
    /* height: 100%; */
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: rgb(88, 88, 88);
}

#toggle {
    display: none;
}

.chackBtn {
    width: 2.5em;
    height: 2.5em;
    padding: .3em;
    position: absolute;
    top: 0;
    left: 0;
}

.sideMenuLbl {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    border: none;
    height: 100%;
    opacity: .5;
    background-color: gray;
    display: none;
    opacity: 0;
}

#toggle:checked~.sideMenuLbl {
    display: unset;
    opacity: .5;
    animation: sideMenuBg ease-in-out .2s;
}

.sideMenu {
    width: 66%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: white;
    z-index: 2;
    border-right: solid 1px #0D0D0D;
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
    overflow: auto;
}

.sideMenu::-webkit-scrollbar {
    width: 0px;
}

#toggle:checked~.sideMenu {
    transform: translateX(0);
}

.sideMenu li {
    width: 100%;
    border-bottom: 1px solid rgba(128, 128, 128, 0.322);
    text-align: center;
    padding: .7em .3em;
    font-size: 1.5em;
}

.sideMenu a {
    text-decoration: none;
}

.xlScreen {
    display: none;
}


@media screen and (min-width:1000px) {
    :root {
        --main-scale: max(calc(2.5rem + calc(calc(100vw - 1240px) / 50)), 2.5rem)
    }

    body {
        background-color: whitesmoke;
        /* font-size: 4em; */
        font-family: monospace;
        margin: unset;
    }

    .browser {
        border: 1px grey solid;
        width: max(940px, 80%);
        height: 80%;
        margin-left: 7em;
        margin-top: 1.6em;
        border-radius: 7px;
        border-top-left-radius: 13px;
        border-top-right-radius: 13px;
    }

    #toggle {
        display: none;
    }

    #logo {
        animation: unset;
        background-color: var(--bg-color);
        --glow-color: unset;
        --main-color: unset;
    }

    .forhover {
        left: unset;
        margin-left: unset;
        animation: unset;
    }

    .sideBtn {
        display: none;
    }

    .likeH1 {
        display: none;
    }

    .folder .folderName {
        margin-top: .4em;
    }

    .chackBtn {
        display: none;
    }

    .myTopMenu {
        border-bottom: 1px solid black;
        height: 2.5em;
        border-top-left-radius: 13px;
        border-top-right-radius: 13px;
        display: block;
        text-align: center;
    }

    .sideMenu {
        transform: unset;
        height: calc(100% - 2.5em);
        width: 18%;
        position: relative;
        display: inline-block;
        animation: unset;
        background-color: white;
        border-bottom-left-radius: 7px;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;

    }

    .sideMenu li:hover {

        color: blue;
        border-left: blue 4px solid;
        transition-duration: 200ms;
    }

    .sideMenu li {
        padding: .7em .4em;
        height: unset;
        font-size: unset;
        list-style-type: none;
        color: rgb(0, 119, 255);
    }

    .bContent {
        display: inline;
        float: right;
        width: 80%;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    }

    .xlScreen {
        display: inline-block;
        /* border: 1px solid red; */
        width: 100%;
        height: 100%;
    }

    /*.backButton{
        !* border: 1px solid red; *!
        display: inline-block;
        transform: translateY(6px);
        padding: .4em;
        font-family: 'Courier New', Courier, monospace;
        font-weight: 550;
        font-size: 1.06em;
        margin: 0 .3em 0 .3em;
        color: rgb(121, 121, 121);
    }
    .backButton::after{
        content: '>';
        margin-left: .7em;
    }
    .backButton::before{
        content: '<';
    }*/
    .serchLine {
        background-color: white;
        width: 60%;
        padding: .2em .2em .2em .8em;
        transform: translateY(18%);
        display: block;
        border-radius: 7px;
        border: 2px solid grey;
        display: inline-block;
    }

    .serchButton {
        display: inline-block;
        border: 2px black solid;
        background-color: #086605;
        border-radius: 7px;
        text-align: center;
        transform: translateY(20%);
        height: 64%;
        color: white;
        width: 10%;
        box-shadow: inset 0px 0px 8px 0px white;
        margin-left: 1%;
    }

    .serchButton::before {
        content: ' 🔎 ';
    }

    /*.macbtn{
        border: 1px red solid;
        height: .9em;
        width: .9em;
        background-color: red;
        float: right;
        border-radius: 100%;
        transform: translateY(30%);
        margin-right: .5em;
    }
    .macbtn::after{
        content: '';
        border: 1px yellow solid;
        height: .9em;
        width: .9em;
        background-color: yellow;
        float: right;
        border-radius: 100%;
        margin-right: 1.5em;
        transform: translateY(-100%);
    }
    .macbtn::before{
        content: '';
        border: 1px rgb(30, 201, 30) solid;
        height: .9em;
        width: .9em;
        background-color: rgb(30, 201, 30);
        float: right;
        border-radius: 100%;
        margin-right: 3em;
    } */
}


@media screen and (max-height: 399px) {
    .dotFuckWhitMyWebSite {
        display: block;
        color: white;
    }

    .str::after {
        animation: doc steps(24) 4s,
            blink ease-out infinite 1s;
    }

    .folder {
        display: none;
    }

    .mainCmd {
        display: none;
    }

    .navMneu {
        display: none;
    }

    body {
        background-image: none;
    }

    .browser {
        display: none;
    }

    body {
        background-color: black;
    }
}









@keyframes logo-rotate {
    to {
        transform: rotate(110deg);
    }
}

@keyframes logo-rigth {
    from {
        transform: translateX(-3.85em);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes sideMenuBg {
    from {
        opacity: 0;
    }

    to {
        opacity: .5;
    }
}