: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: #0D0D0D;
    font-size: var(--main-scale);
    margin: 0;
    padding: 0;
    font-family: monospace;
    margin-bottom: 4em;
    min-width: 306px;
}

.dotFuckWhitMyWebSite {
    display: none;
}

.mainCmd .likeBefore {
    display: none;
}

.menu {
    border: 1px rgb(119, 119, 119) solid;
    position: fixed;
    bottom: 5.3em;
    background-color: black;
    color: white;
    max-width: 500px;
    max-height: 370px;
    font-size: 0.7em;
    width: 100%;
    padding-bottom: 1em;
    left: 50%;
    margin-left: -50%;
    opacity: 0;
}

.activeLink {
    pointer-events: none;
    color: var(--main-dark-color) !important;
    cursor: default;
}

.forhover {
    /*  border: 1px red solid; */
    position: absolute;
    width: 4em;
    left: 50%;
    margin-left: -2em;
    bottom: 0;
    height: 4em;
}

.forhover:hover .menu {
    transform: scale(1);
    transition-duration: 300ms;
    /* animation: scale-right ease-in-out 100ms forwards; */
    opacity: 1;
}

.forhover:not(:hover) .menu {
    transform: scale(0);
    transition-duration: 300ms;
    opacity: 0;
}

.menu a {
    text-decoration: none;
    color: white;
}

.menu a:hover {
    color: var(--main-color);
}

.menu hr {
    width: 90%;
    margin: .5em 0;
}

.likeBefore {
    height: 1.3em;
    background-color: rgb(41, 41, 41);
    width: 100%;
    color: rgb(121, 121, 121);
    font-size: 0.5em;
    margin-bottom: 1em;
}

.likeBefore img {
    height: 1.1em;
    margin-left: 4px;
}

#logo {
    font-size: .75em;
    background-color: var(--bg-color);
    border: var(--main-color) .1em solid;
    height: 3.75em;
    width: 3.75em;
    text-align: center;
    border-radius: 100%;
    white-space: nowrap;
    color: var(--main-color);
    position: relative;
    left: 50%;
    margin-left: -1.825em;
    padding-top: 1.25em;
    padding-left: .5em;
    padding-right: .5em;
    transform: rotate(-36deg);
    text-shadow: var(--glow-color) 0 0 .1em,
        var(--main-color) 0 0 .3em;
    box-shadow: var(--main-color) 0 0 .7em,
        var(--glow-color) 0 0 .35em,
        inset var(--main-color) 0 0 .3em,
        inset var(--glow-color) 0 0 .15em;
    margin-top: 1em;
}

.navMneu {
    height: 3.5em;
    /* border: red 2px solid; */
    position: fixed;
    width: 100%;
    bottom: 0;
}

.welcome {
    font-size: var(--main-scale);
    /* border: red 3px solid; */
    height: 1.3em;

}

.str {
    font-size: .8em;
    font-family: monospace;
    color: var(--main-color);
    font-style: inherit;
    font-weight: lighter;
    position: absolute;
    animation: slash step-end 500ms;
}

.str::after {
    content: '|';
    font-weight: bolder;
    height: 100%;
    width: 5%;
    background-color: var(--bg-color);
    position: absolute;
    right: 0;
    animation: doc steps(24) 4s,
        blink ease-out infinite 1s;
    margin-right: -5%;
    margin-left: 0;
    padding-left: 0;
}

.aboutWS_p {
    color: white;
    font-size: .5em;
    padding: .2em;
    /* border: 3px red solid; */
}

.aboutWS_div {
    /* opacity: 0; */
    opacity: 0;
    animation: apearse ease-in 500ms 4s forwards;
}

.aboutWS_p #aboutSpan {
    color: var(--between-color);
}

.note {
    opacity: 0;
    font-size: 0.35em;
    color: var(--main-dark-color);
    font-weight: bold;
    padding: 2em;
    animation: apearse ease-in 500ms 5s forwards;
}

.selfee {
    text-align: right;
}

.whoImInfo {
    /* border: 1px solid red; */
    opacity: 0;
    width: 100%;
    color: aquamarine;
    display: grid;
    grid-template-columns: auto auto auto;
    margin-top: 2em;
    animation: apearse ease-in 500ms 4500ms forwards;
}

.selfee img {
    width: 4em;
    border-radius: 100%;
    position: relative;
    padding: 0.3em;
    border: 1px white solid;
    margin: 0.2em;
}

.aboutMeInfo {
    /* border: 1px red solid; */
    font-size: 0.5em;
    padding-top: 1em;
}

.aboutMeInfo h3 {
    color: var(--between-color);
}

.aboutMeInfo p {
    color: white;
}

.aboutMeInfo p a {
    text-decoration: none;
    color: var(--main-dark-color);
    font-weight: bold;
}

.folders {
    display: none;
}

.browser {
    /* border: 1px red solid; */
    color: black;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: .5em;
    height: 100%;
    background-color: whitesmoke;
}








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

    body {
        background-image: url(./img/backround.webp);
        background-repeat: no-repeat;
        background-size: 100vw 100vh;
    }

    .welcome {
        position: relative;
    }

    .aboutWS_p span span {
        display: none;
    }

    .aboutWS_p span::after {
        content: 'To look around hover the fmb logo or click desktop icon.';
        color: var(--between-color);
    }

    .likeBefore {
        position: sticky;
        margin-bottom: unset;
    }

    .mainCmd .likeBefore {
        display: block;
    }

    .mainCmd {
        --bg-color: black;
        min-width: 700px;
        min-height: 550px;
        max-width: 60%;
        max-height: 85vh;
        border: 1px rgb(119, 119, 119) solid;
        background-color: var(--bg-color);
        position: absolute;
        right: 17%;
        top: 6%;
    }

    .mCmdContent {
        display: block;
    }

    #logo {
        left: unset;
        margin-left: unset;
        position: fixed;
        right: .5em;
    }

    .forhover {
        /* border: red 1px solid; */
        left: unset;
        margin: unset;
        right: 0;
    }

    /* bureadan --------------- */
    .menu {
        left: unset;
        bottom: unset;
        margin-left: unset;
        transform: unset;
        /* display: hide; */
        max-width: 20em;
        /* right: 5em;
    bottom: 3em; */
        right: 0;
        bottom: 0;
    }

    .forhover:hover .menu {
        /* display: block; */
        /* animation: scale-right ease-in-out 300ms; */
        /* transform: scale(1); */
        right: 5em;
        bottom: 3em;
    }

    .forhover:not(:hover) .menu {
        right: 0;
        bottom: 0;
    }

    .forhover:hover {
        width: 5em;
    }

    .navMneu {
        /* border: red 1px solid; */
        height: 1px;
    }

    /* buraya kadar menü menü animasyonu altta bunun için keyframe var ondada bak
wondowstaki pencere kapanıp açılma animasyonunu istiyorum   */
    .folders {
        position: absolute;
        top: 0;
        left: 0;
        width: 3em;
        color: white;
        text-align: center;
        display: block;
    }

    .folder {
        width: 2.4em;
        margin: .5em;
        padding: .3em .3em;
        border: rgba(0, 140, 255, 0) 1px solid;
        background-color: rgba(0, 140, 255, 0);

    }

    .folder:hover {
        border: rgb(0, 140, 255) 1px solid;
        background-color: rgba(0, 140, 255, 0.404);
    }

    .folder .folderName {
        font-size: .4em;
        margin-top: -0.2em;
        padding-left: 1em;
    }

    .folder img {
        width: 1.5em;
    }

    .folders a {
        text-decoration: none;
        color: white;
    }



}

@media screen and (min-width: 830px) and (max-width: 999px) {

    /* .dotFuckWhitMyWebSite{
        display: block;
        color: white;
    } */
    body {
        margin-bottom: 0;
    }

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

    .folder {
        display: none;
    }

    .forhover {
        /* border: red 1px solid; */
        left: unset;
        margin: unset;
        right: 0;
    }

    .menu {
        left: unset;
        bottom: unset;
        margin-left: unset;
        /* display: unset; */
        transform: unset;
        font-size: .5em;
        max-width: 20em;
        right: 7em;
        bottom: 2em;
        /* transform: scale(0); */
    }

    /* .navMneu{
        display: none;
    } */
    body {
        background-image: none;
    }

    .note {
        animation: fateIn ease-in-out forwards 300ms 5s;
    }

    @keyframes fateIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

@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;
    }
}




@keyframes scale-right {
    from {
        /* opacity: 0;
        font-size: .01em;
        height: 1%;
        width: 1%;
        transform: translateX(4em)  translateY(2em) scale(1); */
        opacity: 0;
    }

    to {
        /* opacity: 1;
        transform: scale(1); */
        opacity: 1;
    }
}

@keyframes apearse {
    from {
        opacity: 0;
        transform: translateY(.5em);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slash {
    from {
        color: white;
    }

    to {
        color: var(--main-color);
    }
}

@keyframes doc {
    from {
        width: 100%;
        margin: 0;
    }

    to {
        width: 0;
        margin: 0;
    }
}

@keyframes blink {
    from {
        color: white;
    }

    to {
        color: var(--bg-color);
    }
}