.restaurant{
    color:magenta;
}
.restaurant::selection{
    font-size:20px;
    background-color:orange;
}
.restaurant:active::before {
    content: "I chose ";
}
.book{
    color:#9933CC;
}
.book:active::before {
    content: "I chose ";
}
.book::selection{
    font-size:20px;
    background-color:#66FF66;
}
.tv{
    color:#003399;
}
.tv:active::before {
    content: "I chose ";
}
.tv::selection{
    font-size:20px;
    background-color:#CC0000;
}
.drinks{
    color:#990000;
}
.drinks:active::before {
    content: "I chose ";
}
.drinks::selection{
    font-size:20px;
    background-color:#FF00CC;
}
.words {
    background-color:blue;
    color:turquoise;
}
.hover-paragraph{
    color:black;
    cursor:pointer;
}
.hover-paragraph:hover{
    color:#007acc;
}
.hover-paragraph:hover + .appear {
    visibility:visible;
    opacity:1;
    float:left;
}
.appear{
    visibility:hidden;
    opacity:0;
    float:left;
}
.choice{
    color:#9900FF;
}

body{
  background-image: linear-gradient(to right, yellow, skyblue);
}

.blue{
    background-color:skyblue;
}
.green {
    background-color:yellowgreen;
}

.head {
    font-weight:bold;
    font-size:30px;
}
.container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: dodgerblue;
  padding: 10px;
  border: 1px solid black;
}

.container > div {
  border: 1px solid black;
  padding: 20px;
  font-size: 15px;
  text-align: center;
}
.title {
            text-align: center; 
            background-color: #d999ed;
            color:purple;
            font-style:italic;
            }
            p {
                color:dodgerblue;
            }
            #basket {
                color: slateblue;
            }
            #swim {
                color: tomato;
            }
            #volley {
                color:green;
            }
            #clarinet {
                color:MediumSeaGreen;
            }
            #piano {
                color:Crimson;
            }@keyframes rotate-pColor {
    from{
        color:green;
    }
    to {
        color:navy;
        background-color:beige;
    }
}
p.filtered-paragraph {
    animation:rotate-pColor 3s forwards;
}
            img {
                height:210px;
                width:190px;
            }
            @keyframes grayscale-filter-animation{
                from {
                    filter:grayscale(100%);
                }
                to {
                    filter:grayscale(0%);
                }
            }
            img.filtered-image{
                animation:grayscale-filter-animation 5s forwards;
                height:350px;
                width:300px;
            }
            .gray:hover {
                filter:grayscale(90%);
                height:270px;
                width:210px;
            }
            .hue:hover{
                filter:hue-rotate(90deg);
                height:270px;
                width:210px;
            }
            .brighter:hover{
                filter:brightness(150%);
                height:270px;
                width:210px;
            }