Applied Accessibility

Applied Accessibility
    <style>
      h4 {
        
      }
      p {
        text-align: right;
      }
      .links {
        margin-right: 20px;
        
      }
      .fullCard {
        border: 1px solid #ccc;
        border-radius: 5px;
    <style>
      h4 {
        text-align: center;
      }
      p {
        text-align: justify;
      }
      .links {
        margin-right: 20px;
        text-align: left;
      }
      .fullCard {
        
        border: 1px solid #ccc;
    <style>
      h4 {
        text-align: center;
        
      }
      p {
        text-align: justify;
      }
      .links {
        margin-right: 20px;
        text-align: left;
      }
      .fullCard {
        width: 245px;
    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        margin-right: 20px;
        text-align: left;
      }
      .fullCard {
        width: 245px;
    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        margin-right: 20px;
        text-align: left;
      }
      .fullCard {
        width: 245px;
    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        margin-right: 20px;
        text-align: left;
      }
      .fullCard {
        width: 245px;
    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
    <style>
      h4 {
        text-align: center;
        height: 25px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
        width: 245px;
    <style>
      h4 {
        text-align: center;
        height: 25px;
        background-color: rgba(45, 45, 45, 0.1);
        
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
    <style>
      h4 {
        text-align: center;
        background-color: rgba(45, 45, 45, 0.1);
        padding: 10px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
      .fullCard {
    <style>
      h4 {
        text-align: center;
        background-color: rgba(45, 45, 45, 0.1);
        padding: 10px;
        font-size: 27px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
      }
    <style>
      h4 {
        text-align: center;
        background-color: rgba(45, 45, 45, 0.1);
        padding: 10px;
        font-size: 27px;
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
        opacity: 0.7;
    <style>
      h4 {
        text-align: center;
        background-color: rgba(45, 45, 45, 0.1);
        padding: 10px;
        font-size: 27px;
        
      }
      p {
        text-align: justify;
      }
      .links {
        text-align: left;
        color: black;
    <style>
      p {
        font-size: 16px;
        line-height-: 25px;
        
      }
    </style>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    </p>
    <style>
      p {
        font-size: 10px;
      }
    </style>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
    </p>
    <style>
      h1 {
        font-size: 68px;
        
      }
      h2 {
        font-size: 52px;
        
      }
      h3 {
        font-size: 40px;
        
      }
      h4 {
    <style>
     h1 {
       font-size: 68px;
     } 
     h2 {
       font-size: 52px;
     } 
     h3 {
       font-size: 40px;
     } 
     h4 {
       font-size: 32px;
     } 
     h5 {
    <style>
      a {
        color: #000;
      }
      a:hover {
        color: blue;
      }
      
      
    </style>
    <a href="http://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
    <style>
      h2 {
        position: relative;
        righ: 30px;
      }
    </style>
    <body>
      <h1>On Being Well-Positioned</h1>
      <h2>Move me!</h2>
      <p>I still think the h2 is where it normally sits.</p>
    </body>
    <head>
    <style>
      h2 {
        position: relative;
        
        
      }
    </style>
    </head>
    <body>
      <h1>On Being Well-Positioned</h1>
      <h2>Move me!</h2>
      <p>I still think the h2 is where it normally sits.</p>
    </body>
    <style>
      #searchbar {
        position: absolute;
        top: 50px;
        right: 50px;
      }
      section {
        position: relative;
      }
    </style>
    <body>
      <h1>Welcome!</h1>
      <section>
        <form id="searchbar">
    <style>
      #navbar {
        position: fixed;
        top: 0px;
        left: 0px;
        
        width: 100%;
        background-color: #767676;
      }
      nav ul {
        margin: 0px;
        padding: 5px 0px 5px 30px;
      }
      nav li {
    <head>
      <style>
      #left {
        
        width: 50%;
      }
      #right {
        
        width: 40%;
      }
      aside, section {
        padding: 2px;
        background-color: #ccc;
      }
    <style>
      div {
        width: 60%;
        height: 200px;
        margin-top: 20px;
      }
      
      .first {
        background-color: red;
        position: absolute;
        z-index: 2;
      }
      .second {
        background-color: blue;
    <style>
      div {
        background-color: blue;
        height: 100px;
        width: 100px;
        
      }
    </style>
    <div></div>
    <style>
      body {
        background-color: #FFFFFF;
      }
      .blue {
        background-color: blue;
      }
      .yellow {
        background-color: yellow;
      }
      div {
        display: inline-block;
        height: 100px;
        width: 100px;
    <style>
      body {
        background-color: #FFFFFF;
      }
      
      .orange {
        background-color: #FF7D00;
      }
      
      .cyan {
        background-color: #00FFFF;
      }
      
      .raspberry {
    <style>
      body {
        background-color: white;
      }
      header {
        background-color: #09A7A1;
        color: white;
        padding: 0.25em;
      }
      h2 {
        color: black;
      }  
      button {
        background-color: white;
    <style>
      body {
        background-color: #FFFFFF;
      }
      
      .green {
        background-color: hsl(120, 100%, 50%);
      }
      
      .cyan {
        background-color: hsl(180, 100%, 50%);
      }
      
      .blue {
    <style>
      header {
        background-color: hsl(180, 90%, 35%);
        color: #FFFFFF;
      }
      
      nav {
       
      }
      
      h1 {
        text-indent: 10px;
        padding-top: 10px;
      }
    <style>
    
      div{ 
        border-radius: 20px;
        width: 70%;
        height: 400px;
        margin: 50px auto;
        background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
      }
    
    </style>
    
    <div></div>
    <style>
    
      div{ 
        border-radius: 20px;
        width: 70%;
        height: 400px;
        margin:  50 auto;
        background: repeating-linear-gradient(
          90deg,
          yellow 0px,
          blue 40px,
          green 40px,
          red 80px
        );
    <style>
      .ball { 
        width: 40px;
        height: 40px;
        margin: 50 auto;
        position: fixed;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        border-radius: 50%;
      }
      #ball1 {
    <style>
      div { 
        width: 70%;
        height: 100px;
        margin:  50px auto;
        background: linear-gradient(
          53deg,
          #ccfffc,
          #ffcccf
        );
      }
      
      div:ho
      
    <style>
      div { 
        width: 70%;
        height: 100px;
        margin:  50px auto;
      }
      #top {
        background-color: red;
      }
      #bottom {
        background-color: blue;
        
      }
    </style>
    <style>
      div { 
        width: 70%;
        height: 100px;
        margin:  50px auto;
      }
      #top {
        background-color: red;
        transform: skewY(-10deg);
      }
      #bottom {
        background-color: blue;
        transform: skewX(24deg);
      }
    <style>
    .center
    {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100px;
      height: 100px;
      
      background-color: blue;
      border-radius: 0px;
    <style>
    .heart {
      position: absolute;
      margin: auto;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: pink;
      height: 50px;
      width: 50px;
      transform: ;
    }
    .heart:after {
    <style>
      div {
        height: 40px;
        width: 70%;
        background: black;
        margin: 50px auto;
        border-radius: 5px;
      }
    
      #rect {
        animation-name: rainbow;
        animation-duration: 4s;
      }
      @keyframes rainbow {
    <style>
      button {
        border-radius: 5px;
        color: white;
        background-color: #0F5897;
        padding: 5px 10px 8px 10px;
      }
      
      button:hover {
        animation-name: background-color;
        animation-duration: 500ms;
      }
      
      
    <style>
      button {
        border-radius: 5px;
        color: white;
        background-color: #0F5897;
        padding: 5px 10px 8px 10px;
      }
      button:hover {
        animation-name: background-color;
        animation-duration: 500ms;
        /* add your code below this line */
        animation-fill-mode: forwards;
        /* add your code above this line */
      }
    <style>
      div {
        height: 40px;
        width: 70%;
        background: black;
        margin: 50px auto;
        border-radius: 5px;
        position: relative;
      }
    
    #rect {
      animation-name: rainbow;
      animation-duration: 4s;
    }
    <style>
    
      #ball {
        width: 70px;
        height: 70px;
        margin: 50px auto;
        position: fixed;
        left: 20%;
        border-radius: 50%;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
    <style>
    
      #ball {
        width: 100px;
        height: 100px;
        margin: 50px auto;
        position: relative;
        border-radius: 50%;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        animation-name: bounce;
    <style>
      .back {
        position: fixed;
        padding: 0;
        margin: 0;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: white;
        animation-name: backdiv;
        animation-duration: 1s; 
        animation-iteration-count: infinite;
      }
    <style>
      .stars {
        background-color: white;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        animation-iteration-count: infinite;
      }
    
      .star-1 {
        margin-top: 15%; 
        margin-left: 60%;
        animation-name: twinkle-1;
        animation-duration: 1s;
    <style>
      .stars {
        background-color: white;
        height: 30px;
        width: 30px;
        border-radius: 50%;
        animation-iteration-count: infinite;
      }
    
      .star-1 {
        margin-top: 15%; 
        margin-left: 60%;
        animation-duration: 1s;
        animation-name: twinkle;
    <style>
    
      .balls {
        border-radius: 50%;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        position: fixed;  
        width: 50px;
        height: 50px;
        margin-top: 50px;
        animation-name: bounce;
    <style>
    
      .balls{
        border-radius: 50%;
        background: linear-gradient(
          35deg,
          #ccffff,
          #ffcccc
        );
        position: fixed;  
        width: 50px;
        height: 50px;
        margin-top: 50px;
        animation-name: bounce;
    <style>
      .balls{
        border-radius: 50%;
        position: fixed;
        width: 50px;
        height: 50px;
        margin-top: 50px;
        animation-name: bounce;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      #red {
        background: red;
        left: 27%;
    <style>
      .balls {
        border-radius: 50%;
        top: 249px;
        position: fixed;  
        width: 50px;
        height: 50px;
        top: 60%;
        animation-name: jump;
        animation-duration: 2s;
        animation-iteration-count: infinite;
      }
      #red {
        background: red;