/* Starts here*/


.messagebox {
    width: 300px;
    height: 200px;
    background-color: black;
    color: white;
    border: 2px solid #000000;
    border-radius: 25px;
    box-shadow: 0px 0px 40px darkgrey;
    padding: 20px;
    margin: 20px;
    left: 520px;
    font-size: 220%;
    position: fixed;
    font-family: "Alfa Slab One", serif;
}

    .messagebox1 {
        width: 300px;
        height: 500px;
        background-color: black;
        color: white;
        border: 2px solid #000000;
        border-radius: 25px;
        box-shadow: 10px 5px 5px darkgrey;
        padding: 20px;
        margin: 20px;
        left: 900px;
        font-size: 220%;
        position: fixed;
        font-family: "Alfa Slab One", serif;
    }

.messagebox2 {
    width: 300px;
    height: 100px;
    background-color: black;
    border: 2px solid #000000;
    border-radius: 25px;
    box-shadow: 5px 10px 10px darkgrey;
    padding: 20px;
    margin: 20px;
    left: 520px;
    top: 280px;
    font-size: 220%;
    position: fixed;
    font-family: "Alfa Slab One", serif;
    text-align: center;
}

.messagebox2 a{
    color:white;
    text-align: center;
    text-decoration: none;

}
/* For message box for phone users */

#PHONE {
    display: none;
    
}

    /*Traffic Light Code*/

    .Lights {
        width: 250px;
        height: 500px;
        border: 15px solid #000000;
        background-color: dimgray;
        margin-left: 20px;
        border-radius: 25px;
    }
    /*a way to make text blink*/

    @keyframes redblink {
        0% {
            background-color: darkred
        }

        50% {
            background-color: red
        }

        100% {
            background-color: darkred;
        }
    }
    /*Lights Coding*/
    #red {
        background-color: red;
        animation: redblink 3s ease-in-out infinite; /* <--- move this one for blinking animation */
        width: 50px;
        height: 100px;
        border-radius: 125px;
        border: 20px solid #808080;
        position: absolute;
        top: 40px;
        left: 115px;
    }

    #yellow {
        background-color: darkgoldenrod;
        width: 50px;
        height: 100px;
        border-radius: 125px;
        border: 20px solid #808080;
        position: absolute;
        top: 200px;
        left: 115px;
    }

    #green {
        background-color: darkgreen;
        width: 50px;
        height: 100px;
        border-radius: 125px;
        border: 20px solid #808080;
        position: absolute;
        top: 360px;
        left: 115px;
    }
  



    /*For phone, might not work ok but trying out*/
@media (max-width: 800px) {
    .messagebox {
        left: 30%;
        width: 20%;
        height: auto;
        margin: 20px;
        font-size: 125%;
    }

    .messagebox1 {
        left: 60%;
        width: 25%;
        height: auto;
        font-size: 125%;
    }

    .messagebox2 {
        left: 30%;
        width: 20%;
        height: auto;
        margin: 20px;
        font-size: 125%;
        top: 190px;
        box-shadow: none;
    }

        /* phone users only */
        .messagebox2 a {
            color: red;
            text-align: center;
            text-decoration: none;
        }

    #PHONE {
        display: block;
        width: auto;
        height: auto;
        font-size: 80%;
        word-wrap: break-word;
        color: white
    }

    /* LIGHTS id */
    .Lights {
        width: 100px;
        height: 250px;
        font-size: 125%;
    }

    /* lights class */
    #red {
        width: 15px;
        height: 35px;
        left: 80px;
        border: 5px solid #808080;
    }

    #yellow {
        width: 15px;
        height: 35px;
        left: 80px;
        border: 5px solid #808080;
        top: 105px;
    }

    #green {
        width: 15px;
        height: 35px;
        left: 80px;
        border: 5px solid #808080;
        top: 180px;
    }

    #Object1 {
        width: 15px;
        height: 125px;
        left: 90px;
        top: 280px
    }
}