* {
            margin: 0;
            padding: 0;
        }

        .red.circle {
            position: absolute;
            top: 0;
            left 0;
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            border: solid 2px white;
            margin: 20px;
            z-index: 1;

        }



        .green.circle {
            position: absolute;
            top: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: green;
            border-radius: 50%;
            border: solid 2px white;
            margin: 20px;
            z-index: 1;
        }

        .blue.circle {
            position: absolute;
            bottom: 0;
            left 0;
            width: 50px;
            height: 50px;
            background-color: blue;
            border-radius: 50%;
            border: solid 2px white;
            margin: 20px;
            z-index: 1;
        }

        .orange.circle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
            border: solid 2px white;
            margin: 20px;
            z-index: 1;
        }

        p {
            text-align: center;
            line-height: 100vh;
            position: absolute;
            width: 100%;
            height: 100%;

        }

        .red {
            background-color: red;
            z-index: -1;
        }

        .green {
            background-color: green;
            z-index: -1;

        }

        .blue {
            background-color: blue;
            z-index: -1;

        }

        .orange {
            background-color: orange;
            z-index: -1;

        }

        .bg {
            background-color: grey;
            width: 100vw;
            height: 100vh;
            z-index: 1;
        }





        .orange.circle:hover~.bg {
            background-color: transparent;

        }


        .red.circle:hover~.bg,
        .green.circle:hover~.bg,
        .blue.circle:hover~.bg,
        .orange.circle:hover~.bg {
            background-color: transparent;
        }