h1 {text-shadow:2px 2px 2px #7A0A7A; 
  box-shadow:5px 5px 5px;
}
h1:before,
h1:after {content:"🦎";
}
p {text-align: center;
  box-shadow:10px 10px 10px;
border-radius: 100%;
}


#main img { 
  box-shadow:1px 1px 1px;
  border-radius:20%;
}
#main {background: #22C1C3;
background: linear-gradient(0deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
}
#circle {
 width: 50px;
 height: 50px;
 border-radius:100%;
  box-shadow:5px 5px 5px;
 background-color: black;
  position: relative;
  animation-name: color-change;
  animation-duration: 5s; 
  animation-iteration-count: infinite;}
@keyframes color-change {
0% {background-color: black; left: 0; top: 0;}
  25% {background-color: purple; left: 175px; top: 25px;}
  50% {background-color: red; left: 330px; top: 0;}
  75% {background-color: orange; left: 175px; top: 25px;}
  100% {background-color: green; left: 0; top: 0;}
  
}

/*
Pseudoclass Selectors
selector:pseduoclass-name

:link
:visited
:hover
:active

:before
:after
:focus
*/

a:link {
color: #0000C4; 
}

a:visited {
color: #4A0038;}

a:hover {
color:#4C0000; }

a:active {
color:#00145C; }