/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: magenta;
  color: black;
  font-family: Times;
  align-items: flex-start;
  justify-content: flex-start;

}
  #todd {
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1;
  margin: 0 10%;
  
  animation-name: todd;
  animation-duration: 10000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes todd {
  0% {transform: translate(1000px,370px);}
  10% {transform: translate(-470px,480px);}
  20% {transform: translate(-440px,-330px);}
  30% {transform: translate(560px,-220px);}
  40% {transform: translate(850px,500px);}
  50% {transform: translate(890px,230px);}
  60% {transform: translate(143px,-890px);}
  70% {transform: translate(-304px,483px);}
  80% {transform: translate(-474px,234px);}
  90% {transform: translate(503px,277px);}
  100% {transform: translate(1000px,0px);}

}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#hometext {
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1;
  margin: 0 0%;
  
  animation-name: hometext;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}

@keyframes hometext{
  0%   {background-color:orange; left:0px; top:0px;}
  50%  {background-color:red; left:0px; top:0px;}
  100%  {background-color:orange; left:0px; top:0px;}

}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

#test {
  filter: blur(6px)
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

h1 {
  text-shadow:2px 2px red;
  font-size:40px;
  text-align:center
}

d {
  font-family: Courier;
  font-weight: bold;
  align-items: flex-start;
  justify-content: flex-start;
}

li {
  font-family: times;
  align-items: flex-start;
  justify-content: flex-start;
  color:black;
}

/*----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

swagmusictext{
  font-family: Times;
  font-size:20px;
  
  animation-name: swagmusictext;
  animation-duration: 750ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}

@keyframes swagmusictext{
  0%   {background-color:orange; left:0px; top:0px;}
  50%  {background-color:red; left:0px; top:0px;}
  100%  {background-color:orange; left:0px; top:0px;}
}

swagmusic {
  transform: translate(0px,0px);
  animation-name: swagmusic;
  animation-duration: 750ms;
  animation-iteration-count: infinite;
  animation-timing-function: step-start;
}

@keyframes swagmusic{
  0%   {filter: invert(70%); left:0px; top:0px;}
  50%  {filter: invert(0%); left:0px; top:0px;}
  100%  {filter: invert(70%); left:0px; top:0px;}
}



.container {
  width: 100%;
  display: grid;
  grid-template-areas: "sidebar space main";
  grid-template-columns: 200px 20px auto;
  grid-template-rows: 200px;
}

.sidebar {
  grid-area: sidebar;
  height: 75vw;
  background-color: lightpink;
}

.main {
  grid-area: main;
  height: 75vw;
  background-color: magenta;
}