* {
    outline: none; scroll-behavior: smooth;
}

body {
    margin: 0px;
    font-family: 'Luckiest Guy', cursive;
}


a {
    text-decoration: none;
}

nav {
    position: fixed;
    top: 0px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #0066ff;
}




.bk_2_TOP {
    position: fixed;
    top: 5px;
    right: 5px;
}

.jsSectionBtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    border-bottom: gray solid 5px;
    border-radius: 10px;
    padding: 2px;
    /* color: white; */
    background-color: silver;

}

.homeBtn {
    /* position: fixed; */
    width: 100%;
}

a {
    text-decoration: none;
}


.orderedList {
    background-color: black;
    color: silver;
}

.topLi {
    border: none;
    border-top: 2px orange;
}



    ul{
        padding: 0;
        list-style: none;
        background: #f2f2f2;
    }
    ul li{
        display: inline-block;
        position: relative;
        line-height: 21px;
        text-align: left;
    }
    ul li a{
        display: block;
        padding: 8px 25px;
        color: #333;
        text-decoration: none;
    }
    ul li a:hover{
        color: #fff;
        background: #939393;
    }
    ul li ul.dropdown{
        min-width: 100%; /* Set width of the dropdown */
        background: #f2f2f2;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
    }
    ul li:hover ul.dropdown{
        display: block; /* Display the dropdown */
    }
    ul li ul.dropdown li{
        display: block;
    }

/* SELECT */
    select {
        background-color: black;
        color: silver;        
    }

    .option1 {
        border: none;
        border-top: 2px orange;
    }

    /* WEATHER  */

    .weatherAndLogCont {
        display: flex;
        flex-direction: row;
    }

    .forcastWidget {
        background-color: black;
        padding: 20px;
        border: yellow solid 2px;
    }


    /* JS CODE */

    #divColor {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: 72px;
        width: 500px;
        height: 300px;
        border: solid 2px dodgerblue;
        border-radius: 20px;
        font-family: "cooper black";
        background-size: 100%;
        background-repeat: no-repeat;
        
    }


    .jsContainer {
        width: 550px;
        height: 350px;
    }

    .fa-check-circle {
        color: green;
    }


    #blueCouch978ID {
        display: none;
        background-color: #0066ff;
        width: 154px;
        padding: 10px;
        border-radius: 5px;
    }
    
    .blueCouch978 {
        border-radius: 50%;
        border: navy solid 2px;
    }

    .codePenLogo {
        height: 40px;
        border-radius: 10px;
    }

    .pirpleLogo {
        width: 90%;
    }

    .pirpleBtn {
        border: none;
        border-bottom: 10px #722caf solid;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .prplPctBtn {
        color: #fff01e;
        background-color: #501775;
        border: solid 2px #fff01e+;
        border-radius: 5px;
        height: 40px;
        font-family: 'Acme', sans-serif;
    }

    /* audio {
        position: inherit;
        z-index: -10;
    } */




/****  MEDIA QUERY  ************************************************************************* */

@media only screen and (max-width: 640px) {

    nav {
        display: flex;
        flex-direction: column;
    }


    button, .codePenLogo {
        width: 150px;
        
    }

    .codePenLogo {
        border-radius: 0px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }


    #divColor, .jsContainer {
        width: 100%;
    }

    .homeBtn {
        display: flex;
        flex-direction: column;
        align-content: center;
        background-color: rgb(0, 0, 0, 0.1);
        /* width: 95%; */
        /* border: solid; */

    }

    .divColorCont {
        align-items: center;
        display: flex;
        flex-direction: column;
        /* border: solid red 2px; */
    }
    
    .divColorBtn {
        width: 70%;
        height: 30px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }

    iframe {
        width: 100%;
    }

    .googleIMG {
        width: 100%;
    }

    




}