Help me solve this task.  Insert the following declarations to the style rule for the square class selector. For each declaration, you must first include a declaration with the -webkit- prefix, followed by the standard declaration. Animation name property that specifies the name of the @keyframes rule animation. Animation duration property with a value of 5 seconds. MY CSS  /* CSS reset */ body, header, main, section, footer, h1, h2 {     margin: 0;     padding: 0;     border: 0; } /* Style rule for body */ body {   background-color: #f0d8d1; } /* Style rules for header */ header {   padding: 3%;   text-align: center;   font-size: 1.5em;   font-weight: bold; } /* Style rules for main content area  */ main {   font-family: Verdana, Arial, sans-serif;   font-size: 1em;   margin: 0 2%;   padding: 1em;   background-color: #fff;   border: 5px double #33091b;      padding: 2%; } h2 {     padding-bottom: 1%; } section {     margin-bottom: 3%; } button {     height: 3em;     font-size: 1em; } .square {     width: 200px;     height: 200px;     background-color: #33091b;     margin-left: 6%;     -webkit-animation-name: text-animation,color;      animation-name: text-animation,color;      -webkit-animation-duration: 5s;      animation-duration: 5s;      -webkit-animation-iteration-count: infinite;      animation-iteration-count: infinite;  } @-webkit-keyframes text-animation {   0%{font-size: 1em;}   50%{font-size: 2em;}   100%{font-size: 1.35em;} } @keyframes text-animation {   0%{font-size: 1em;}   50%{font-size: 2em;}   100%{font-size: 1.35em;} } /* Animation */     @-webkit-keyframes color {      from { background-color: #fbdae9; }          to { background-color: #660b32; } }      @keyframes color {     from { background-color: #fbdae9; }     to { background-color: #660b32; } } /* Style rules for the footer */ footer {   font-size: .90em;   text-align: center;   margin-top: 2em; }

Please help me with this. I am not understanding what to do. So the code below is supposed to display images when  the checkboxed are clicked and display nothing when they are unclicked,. Dont worry about the css code JS function p01Func() {  document.getElementById("description").innerHTML = "<p>A mother joins an underground band of vigilantes to try to rescue her daughter from a state-run institution.</p>";   document.getElementById("poster").src = "images/night_raiders_poster.jpg";   document.getElementById("poster").style.display = "block";   document.getElementById("director").src = "images/night_raiders_director.jpg";   document.getElementById("director").style.display = "none";   document.getElementById("actors").src = "images/night_raiders_actors.jpg";   document.getElementById("actors").style.display = "none";   document.getElementById("check1").checked = false;  document.getElementById("check2").checked = false;  document.getElementById("check3").checked = false;}…

I'm trying to learn CSS and it isn't easy. Can someone help me with this problem? Modify or add one CSS rule for each requirement below to change the text color property as specified. By color name: change the text color for byname class elements from black to blue. By RGB values: change the text color for byrgb class elements from black (rgb(0, 0, 0)) to green by modifying the second number to be 255. By HSL values: change the text color for byhsl class elements from black (hsl(0, 0%, 0%)) to cyan by modifying the first number to be 200, the second number to 100%, and the third number to 50%. Code: <p class="byname">The text is blue</p> <p class="byrgb">The text is green</p> <p class="byhsl">The text is cyan</p>

5- Complete the following javascript function to display the style property of the document using DOM body { background-color: yellow; color: red; } Click the button to display the style properties of this document. Try it function myFunction() { }

Add the appropriate punctuation to select a group of elements based on their CSS class. var nameElements = $('___name');

Please rewrite this animation code below so that it performs the same functions in a java file instead of the files .css,.js, and .html in visual studios. You would need to import javaFX and include your images for creature.png,forestbackground.png,human.png, and human2.png. Also attach a screenshot of the running animation in java.  script.js const dialogue = [     { character: 'Narrator', text: "In the dead of night, beneath a moon veiled by misty clouds, a lone figure trudged along a desolate forest path." },     { character: 'Narrator', text: "Unknown to her, she was not alone." },     { character: 'Human', text: "Who's there? Show yourself!" },     { character: 'Creature', text: "You venture into realms unknown, mortal. What brings you to these woods?" },     { character: 'Human', text: "I seek passage to the village beyond. I mean no harm." },     { character: 'Creature', text: "Harm is but a shadow in these woods, mortal." },     { character: 'Human', text: "What do you mean?…