html {
  font-size: 62.5%;
}
body {
  font-size: 1.5em;
  line-height: 1.6;
  font-weight: 400;
  font-family: "Roboto", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #ffffff;
}

p {
  margin: 0 auto 1.5em auto;
}

.device {
  float:left;
  @media (max-width:700px)
  {
    float: none;
  }
}

#projects
{
  display: flex;
  flex-wrap: wrap;

  @media (max-width:700px)
  {
    max-width: 400px;
  }
}

header, #content, footer { 
  padding:25px;
  color:#FFFFFF; 
}

ul.main-menu {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  list-style: none;
}
ul.main-menu li a {
  margin-right:20px;
  font-size:2.0rem;
  border-bottom: solid transparent 3px;
  color:#7d0073;
}

ul.main-menu li a:hover {
  color:#FFFFFF;
}
ul.main-menu li a.active {
  color:#FFFFFF;
  border-bottom-color:#EF6D3D;
}

ul.social
{
  list-style-type: none;
  display: flex;
}

ul.social li {
  margin-right: 10px;
}

.photo {
  border-radius: 50%;
}

.project
{
  font-size: 14px;
  max-width: 300px;
  padding: 5%;
}

#scroll-container {
background: rgba(0,0,0); 
height: 100%;
width: 100%;
overflow: hidden;
z-index: -1;
position: fixed;
}

.scroll-text-1 {
height: 100%;
text-align: left;
background-color: transparent;
color: rgb(26, 128, 0);
font-size: 12px;
transform: translateY(-50%);
animation: my-animation 10s linear infinite;
}

.scroll-text-2 {
  height: 100%;
  text-align: left;
  background-color: transparent;
  color: rgb(0, 128, 64);
  z-index: -2;
  font-size: 10px;
  transform: translateY(-50%);
  animation: my-animation 14s linear infinite;
  }

.scroll-text-3 {
  height: 100%;
  text-align: left;
  background-color: transparent;
  font-size: 8px;
  color: rgb(2, 66, 7);
  z-index: -3;
  transform: translateY(-50%);
  animation: my-animation 18s linear infinite;
  }

.project-images
{
  width: 200px;
  height: 200px;
}

@keyframes my-animation {
  from {
    transform: translateY(-50%);
  }
  to {
    transform: translateY(200%);
  }
}