@import url('https://fonts.cdnfonts.com/css/lucida-console');

/* ----class---- */
* {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

body {
    overflow: hidden;
}


.windowfigure {
    width: 300px;
    margin-left: 15px;
}

.listslika {
    width: 48px;
    display: block;
    margin-left: 24px;
}

.windowdetailslika {
    height: 24px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 4px;

    float: left;
}

.listslikainside {
    width: 48px;
    float: left;
    margin-left: 24px;
}



.filetekst,
.windowdetailime,
.explorertekst {
    color: rgb(255, 255, 255);
    text-shadow: 0.65px 0.65px 2px #000000;
    margin-top: 5px;
    font-size: 0.85em;
}

.windowdetailime {
    height: 24px;
    margin-top: 8px;
    display: inline-block;
}

.explorertekst {
    color: #000000;
    height: 48px;
    line-height: 48px;
}



.optionstext {
    text-shadow: 0px 0px;
}

.optionstext:hover {
    background-color: #00000054;
}

.window {
    background-image: url("slike/background.jpg");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    height: 98vh;

    box-shadow: 0px 0px 35px rgb(67, 136, 255);
}

.logonscreen {
    z-index: -1;
    width: 100%;
    height: 100vh;

    background-image: url("slike/logon.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;

    animation: fadeOut ease-in 1s;
    animation-direction: normal;
    opacity: 0;
}

/* --div class-- */
.pushdiv {
    display: block;
}

.filediv,
.optionstext {
    display: inline-block;
}


/* windows - za folder i opis */

.closebutton {
    float: right;
    height: 20px;
    padding: 4px;
    border-width: 1px;
    border-style: solid;
    border-radius: 6px;
    border-color: rgb(228, 228, 228);
    background-color: rgb(193, 49, 49);
}

.closebutton:hover {
    background-color: rgb(223, 40, 40);
}

.optionsdiv {
    border-top: solid rgb(0, 85, 228) 1px;

    background-color: #ECE9D8;
    width: 99.75%;
    height: 1.5em;
    padding-left: .25%;
}

.explorerdiv {
    width: 348px;
    flex: 35%;
    flex-direction: row;
    height: 48px;
    margin-top: 16px;
    margin-bottom: 16px;
    display: inline-block;
}

.windowtopdiv {
    background-image: linear-gradient(rgb(0, 85, 228), rgb(33, 107, 235), rgb(36, 117, 255));
    height: 32px;
}

.notepad {
    height: 390px;
    width: 100%;
    overflow-y: scroll;
}

.windowdiv {
    /* border-color: rgb(0,85,228); */
    border-image-source: linear-gradient(rgb(0, 85, 228), rgb(45, 113, 230), rgb(36, 117, 255));
    border-image-slice: 1;
    border-width: 3px;

    border-style: ridge;

    /*
    border-top-style: ridge;
    border-top-color: rgb(0, 87, 238);
    border-top-width: 25px;

    border-top-left-radius: 2.5px;
    border-top-right-radius: 2.5px;
    */

    background-color: rgb(255, 255, 255);

    display: none;
    margin: auto;
    width: 50%;
    height: 450px;
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
}

section {
    overflow: auto;
    height: calc(100% - 1.5em - 36px);
}

/* desktop */
.pushdiv,
.filediv {
    text-align: center;
    vertical-align: top;

    width: 96px;
    margin-left: 15px;
    margin-top: 25px
}

/* ----element---- */

/* main {
    background-image: url("slike/background.jpg");

    width: 1280px;
    height: 720px;
    margin: auto;
    box-shadow: 0px 0px 35px rgb(67, 136, 255);
}*/


p,
.explorertekst {


    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;

    letter-spacing: 0.025em;
    font-size: 0.75em;
    text-shadow: 0.65px 0.65px 2px rgba(0, 0, 0, 0.3);
}

body {
    background-color: #0e0e0e;
}

.writingLine {
    animation: flash step-start 1s infinite;
    font-weight: bold;
    font-size: 1em;
}

.ascii {
    font-family: 'Courier New', Courier, monospace;
}

.crt {
    background: linear-gradient(to top, #000000d5, #000000af, #33333300, #3333333a);
    background-size: cover;
    background-size: 100% 3px;
    opacity: 0.15;

    pointer-events: none;
    width: 100%;
    height: 720px;
    position: absolute;
}

@keyframes fadeOut {
    from {
        opacity: 1;
        z-index: 3;
    }

    to {
        opacity: 0;
    }
}



@keyframes flash {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media screen {
    .crt {
        animation: scanlines infinite 15s linear;
    }
}

@keyframes scanlines {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 0 -25px;
    }
}

@media (max-width:650px) {
    .windowdiv {
        width: 90%;
    }
}