/* =========================
   صفحه
========================= */

body {
    background-image: url('../../assets/coding.jpg');
    background-repeat: no-repeat;
    background-size: 150% 150%;
    animation: backgroundIMG 1.5s linear;
}

@keyframes backgroundIMG {
    0% {
        background-position: 150% 150%;
    }

    100% {
        background-position: 0% 0%;
    }
}


/* =========================
   ادیتور
========================= */

.con {
    position: relative;
    width: 80%;
    height: 80vh;
}


/* =========================
   لایه های ادیتور
========================= */

#highlight,
#code {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    margin: 0;
    padding: 10px;

    font-family: monospace;
    font-size: 15px;
    line-height: 1.5;

    white-space: pre-wrap;

    overflow: auto;
}


/* =========================
   متن هایلایت شده
========================= */

#highlight {
    background: rgb(21, 13, 55);
    color: white;

    pointer-events: none;
    z-index: 1;
}


/* =========================
   Textarea
========================= */

#code {
    background: transparent;

    /*
    متن واقعی textarea نامرئی است
    تا متن رنگی پشت آن دیده شود
    */

    color: transparent;

    caret-color: white;

    border: none;
    outline: none;

    resize: none;
    z-index: 2;
}


/* =========================
   رنگ تگ HTML
========================= */

.tag {
    color: #569cd6;
}


/* =========================
   پیشنهادها
========================= */

#suggestions {
    position: absolute;

    top: 100%;
    left: 0;

    width: 80%;

    margin-top: 5px;

    z-index: 10;
}


.suggestion {
    padding: 10px;

    background: black;
    color: white;

    cursor: pointer;
}


.suggestion:hover {
    background: gray;
}


/* =========================
   دکمه نتیجه
========================= */

.result {
    background: linear-gradient(
        90deg,
        red,
        pink,
        blue,
        aqua,
        green,
        blueviolet,
        tomato
    );

    background-position: 100% 50%;
    background-size: 400% 200%;

    font-family:
        'Franklin Gothic Medium',
        'Arial Narrow',
        Arial,
        sans-serif;

    font-size: 50px;

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

    animation: result 1s linear infinite alternate;

    cursor: pointer;
}


@keyframes result {

    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }

}


.result:hover {
    animation: result 10s linear infinite alternate;
}
.attribute {
    color: #ff9d00;
}

.value {
    color: #6a9955;
}
.value {
    color: #6a9955;
}

.comment {
    color: #6a9955;
}

.doctype {
    color: #c586c0;
}