@font-face {
    font-family: helloPizza;
    src: url(../fonts/Press_Start_2P/PressStart2P-Regular.ttf);
}

* {    font-family: HelloPizza;   
cursor: url(../imgs/cursor2_pink.png), auto;}
body { 
    background-color: black;
    color: white;
}
#container { 
    margin-top: 3em;
    margin-left: 4em;
    margin-right: 4em;

    /* border:1px green solid;  */
    height: 900px;
}
#header {
    /* border:1px orange solid;  */
    height: 100px;

    h1 {
        margin-left: 20px;
        color: red;
    }
    p {
        color: rgb(124, 124, 124);
        font-size: 6px;
    }
    button {
        border: 0px;
        background-color: rgb(22, 22, 22);
        color: black;
        
        width: 100px;
        height: 25px;

        position:absolute;
        right: 100px;

        font-size: 60%;
    }
    button:hover {
        background-color: rgb(80, 80, 80);
        color: black;
    }
}
#main {
    /* border:1px red solid;  */
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    
}

/* _____________________________________ right part _____________________________________ */

#right { 
    /* border:1px pink solid;  */
    width: 60%;
    height: 800px;
    overflow: hidden;
    font-size: 80%;
}
    #navBar { 
        /* border:1px lightblue solid;  */
        height: 50px;
        button {
            height: 50px;
            width: 50%;
            float: left;
            border: 2px rgb(0, 0, 0) solid;
            background-color: rgb(39, 39, 39);
            color: white;
        }
        button:hover {
            /* background-color: rgb(78, 78, 78);
            color: rgb(255, 255, 255); */
            color: rgb(242, 206, 252);
            border: 3px rgb(151, 41, 173) solid;
        }
    }
    #Right_yapyap1, #Right_yapyap2 {
        /* border:1px rgba(217, 255, 0,0.3) solid;  */
        width: 98%;
        height: 700px;
        margin: auto;
        margin-top: 15px;
        
    }
    #Right_yapyap1 {
        overflow: auto;
        line-height: 25px;

        color: rgb(218, 208, 255);
        h1 {color: white;}
        h3 {color:aquamarine;}
        em {color: gray; font-size: 70%;}
        
        
        cool {
            animation-name: rainbow;
            animation-duration: 5s;
            animation-iteration-count: infinite; 
            color: rgb(255, 66, 19);
        }
    }

    #Right_yapyap2 {
        display: none;

        img {
            margin-top: 20px;
            margin-bottom: 10px;

            -webkit-filter: drop-shadow(10px 5px 5px #ffffff);
            filter: drop-shadow(2px 2px 1px rgb(255, 255, 255));

            width: 110px;
            height: 80px;
        }
        a:link { color: rgb(238, 36, 187); text-decoration: none; margin-left: 50px;}
        a:visited { color: rgb(235, 84, 177); }
        a:hover { color: white; }
        a:hover:after {
            content: "<";
            color: rgb(253, 194, 0);
        }
        a:active { color: white; }
        
    }
    .contentBtn {
        border-left: 4px solid orange;
        border-bottom: 2px solid orange;
        border-top: 2px black solid;
        border-right: 2px black solid;

        width: 25%;
        padding: 2px;
        margin-bottom: 3px;
        /* -webkit-user-select: none; Safari */
        /*-ms-user-select: none;  IE 10 and IE 11 */
        user-select: none; /* Standard syntax */

        color: rgb(255, 153, 0);
    }
    .contentBtn:hover {
        /* background-color: rgba(255, 206, 214, 0.3); */
        border: 2px solid rgb(255, 126, 148);
        border-left: 6px solid rgb(255, 126, 148);
    }

/* _____________________________________ left part _____________________________________ */

#left { 
    clear: both;
    /* border:1px purple solid;  */
    width: 40%;
    height: 800px;
}
    #contentHeader {
        /* border:1px rgba(217, 255, 0,0.3) solid;  */
        width: 98%;
        height: 40px;
        
        margin: auto;
        margin-top: 10px;
        
        text-align: right;

        /* title */
        #tit {
            color: rgb(32, 241, 161);
            /* border:1px rgba(217, 255, 0,0.3) solid;  */
            padding-top: 10px;
            height: 30px;
            width: 70%;
            text-align: left;

            float: left
        }
        /* close button */
        button {
            display: none;

            border-radius: 0px;
            border: 3px solid rgb(49, 49, 49);
            background-color: rgb(209, 209, 209);
            color: rgb(0, 0, 0);
            height: 100%;
            width: 50px;
            font-size: large;
        }
        button:hover {
            border: 3px solid rgb(87, 59, 22);
            background-color: rgb(255, 174, 81);
            color: rgb(255, 255, 255);
        }
    }
    #leftYap {
        /* border:1px rgba(217, 255, 0,0.3) solid;  */
        width: 90%;
        height: 700px;
        margin: auto;
        margin-top: 24px;
        font-size: 14px;
        text-align: justify;
        overflow: auto;
        line-height: 30px;
        scrollbar-width: thin;


    }
        #test3 {
            text-decoration: underline;
            text-decoration-color: rgb(168, 5, 5);
            text-decoration-thickness: 2px;
        }
        #test4 {
            text-decoration: underline;
            text-decoration-color: rgb(92, 168, 5);
            text-decoration-thickness: 2px;
        }
        #test5 {
            text-decoration: underline;
            text-decoration-color: rgb(5, 168, 168);
            text-decoration-thickness: 2px;
        }
        #test6 {
            text-decoration: underline;
            text-decoration-color: rgb(168, 5, 127);
            text-decoration-thickness: 2px;

            a { color: white; text-decoration: none;}
            a:hover { color: rgb(226, 189, 255); }
            a:hover:before {
                content: "> ";
                color: rgb(253, 194, 0);
            }
            a:hover:after {
                content: " - youtube ";
                color: rgb(18, 187, 253);
            }
            span{ 
                text-decoration: none;
                color: gray;
                font-size: 80%;
            }
        }
        

    .content {
        display: none;
    }


@keyframes rainbow {
    0%{color: orange;}  
    10%{color: purple;} 
    20%{color: red;}
    30%{color: CadetBlue;}
    40%{color: yellow;}
    50%{color: coral;}
    60%{color: green;}
    70%{color: cyan;}
    80%{color: DeepPink;}
    90%{color: DodgerBlue;}
    100%{color: orange;}
}