z/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after{box-sizing: border-box;}
/* 2. Remove default margin */
* {margin: 0;}
body{
    /*3. Add accessible line-height*/
    line-height: 1.5;
    /*4. Improve text rendering*/
    -webkit-font-smoothing: antialiased;}
/*5. Improve media defaults*/
img, picture, video, canvas, svg {display: block; max-width: 100%;}
/*6. Inherit fonts for form controls*/
input, button, textarea, select{font: inherit;}
/*7. Avoid text overflows*/
p, h1, h2, h3, h4, h5, h6{overflow-wrap: break-word;}
/*8. Improve line wrapping*/
p{text-wrap: pretty;}
h1, h2, h3, h4, h5, h6{text-wrap: balance;}
/*9. Create a root stacking context*/
#root, #__next{isolation: isolate;}
/*CSS reset above this line*/

body{
  background-color: rgb(60, 0, 90); 
  color: bisque;
}
h1{color: bisque; 
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
aside, footer{
  display: block; 
  position: fixed;  
  background-color: orange; 
  color: bisque;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
aside{
  text-align: right; 
  width: 200px;
  right: 0px;
  padding: 5px;
  border-radius: 10px;
  top: 10%;
  background-image: linear-gradient(orange, orangered, purple);
}
footer{
  width: 100%; 
  bottom: 0; 
  left: 0; 
  text-align: center; 
  height: fit-content; 
  vertical-align: middle;
}
footer{
  display: block; 
  position: fixed;  
  background-color: orange; 
  color: bisque;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
article{
  text-align: left; 
  padding-right: 3px; 
  padding-left: 3px;
  margin-right: 40%; 
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
button{
  text-align: center;
  display: inline-block;
  border: none;
  width: 100%;
  cursor: pointer; 
  background-color: orange;
  color: bisque; 
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif
}
button:hover{
  background-color: purple;
  color: black;
}
.ss, .sb{
  border-top: 3px solid orange; 
  border-bottom: 3px solid orange;
}
.games{
    width: 100%;
}
img#blue{
  transition: background-color 3s;
}
#blue:hover {
  background-color: navy;
}
.games,.fun,.numb{
  transition: transform 2.5s;
}
.games:hover{  
  transform: rotate(360deg);
}
.fun:hover{  
  transform: rotate(360deg);
}
.numb:hover{  
  transform: rotate(360deg);
}
footer{
    z-index: 1;
}
audio{
    width: 100%;
}
aside{
    z-index: 1;
}
video, audio{
    transition: transform 2.5s;
}
video:hover, audio:hover{
    transform: rotate(360deg);
}
table,th,td{
  border: 3px solid rebeccapurple;
  text-align: center;
  border-radius: 10px;
}
.a{
  transform: rotate(180deg);
}
aside{
    transition: width 2s;
}
aside:hover{
    width: 400px
}
table:hover{
  width: 400px;
} 
.b{
  transform: skewY(20deg);
}
button{
  transition: background-color 2.5s;
}
.c{
  transform: scaleY(3);
}
@media only screen and (max-width: 600px) {
    aside{
      transform: rotate(0deg);
      right: 0px;
      position: absolute;
    }
}
footer.one{
  width: 100%;
  height: fit-content;
  animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
@keyframes myAnimation {
  0%   {background-color:orange; left:0px; bottom:0px; color: bisque;}
  25%  {background-color:blueviolet; left:0px; bottom:100px; color: rebeccapurple;}
  50% {background-color:black; left:0px; bottom:200px; color: white;}
  75% {background-color:blueviolet; left:0px; bottom:100px; color: rebeccapurple;}
  100% {background-color:orange; left:0px; bottom:0px; color: bisque;}
}
a{
  transition: color 2s;
  color: cornflowerblue;
}
a:hover{
  color: orange;
}
#bunbodies{
  border-radius: 10%;
}
.games{
  width: 70%;
  border-radius: 10%;
}