@keyframes colorchange
    {
      0%   {background: #5F1BC9;}
      25%  {background: #3769F1;}
      45%  {background: #272931;}
      65%  {background: #F33A64;}
      80% {background: #32BD6E;}
      100% {background: #5F1BC9;}
    }

@-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
    {
      0%   {background: #5F1BC9;}
      25%  {background: #3769F1;}
      45%  {background: #272931;}
      65%  {background: #F33A64;}
      80% {background: #32BD6E;}
      100% {background: #5F1BC9;}
    }

body{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: #5F1BC9;
  color: #FFF;
  font-family: "soleil",sans-serif;

  animation: colorchange 50s; 

  /* animation-name followed by duration in seconds*/
  /* you could also use milliseconds (ms) or something like 2.5s */
  -webkit-animation: colorchange 50s; 
  /* Chrome and Safari */
}

#body {
  color: #fff;
  background-color: #7154ee;
  -webkit-animation: colorchange 20s infinite;
  -moz-animation: colorchange 20s infinite;
  -ms-animation: colorchange 20s infinite;
  animation: colorchange 20s infinite;
}

header{
  display: flex;
  flex: none;
}

header .container{
  display: flex;
  align-items: left;
  justify-content: left;
  width:100%
}

header .container .content{
  margin: 4vh 8vh 0;
  width:100%
}

header .container .content a.personal{float: left;}
header .container .content a.personal img{width: 55px;}
header .container .content a.blackops{float: right;}
header .container .content a.blackops img{width: 55px;}

main{
  display: flex;
  flex: 1;
}

main .container{
  display: flex;
  align-items: center;
  justify-content: left;
  width:100%
}

main .container .content{
  margin: 0 8vh;
  width:85%
}

main .container .content h1{
  font-size: 3em;
  line-height: 1.5em;
  font-weight: 500;
}

/* iPhone 5 & 5S in landscape */
@media only screen and (max-width : 667px) {
  main .container .content h1{
    font-size: 1.75em;
    line-height: 1.5em;
    width: 100%
  }
}

main .container .content h1 a{
  color: #fff;
  text-decoration: underline;
  position: relative;
  /*
  background: #5f1bc9;
  background: -moz-linear-gradient(top,  #5f1bc9 0%, #5f1bc9 49%, #42128c 50%, #42128c 100%);
  background: -webkit-linear-gradient(top,  #5f1bc9 0%,#5f1bc9 49%,#42128c 50%,#42128c 100%);
  background: linear-gradient(to bottom,  #5f1bc9 0%,#5f1bc9 49%,#42128c 50%,#42128c 100%);
  */
}

main .container .content h1 a:hover {
  color: #000;
  text-decoration: underline;
  position: relative;
  /*
  background: #5f1bc9;
  background: -moz-linear-gradient(top,  #5f1bc9 0%, #5f1bc9 49%, #42128c 50%, #42128c 100%);
  background: -webkit-linear-gradient(top,  #5f1bc9 0%,#5f1bc9 49%,#42128c 50%,#42128c 100%);
  background: linear-gradient(to bottom,  #5f1bc9 0%,#5f1bc9 49%,#42128c 50%,#42128c 100%);
  */
}

footer{
  display: flex;
  flex: none;
  margin: 0 0 4vh;
}

footer .container{
  display: flex;
  align-items: left;
  justify-content: left;
  width:100%

}

footer .container .content{
  margin: 0 8vh 4vh;
  width:100%
}

/* Elements */

.button{
  display: inline-block;
  height: 50px;
  padding: 0 60px;
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  line-height: 43px;
  letter-spacing: .2rem;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 100px;
  border: 3px solid #fff;
  cursor: pointer;
  box-sizing: border-box;
  margin: 20px 20px 0 0;
}

.button:hover{
  background-color: #fff;
  border: 3px solid #fff;
  color: #333;
}

@media only screen and (max-width : 667px) {
  .button{width:100%}
}