html {
	scroll-behavior: smooth;
}

html { scroll-behavior: smooth; }

html, body { max-width: 100%; overflow-x: hidden; }

.highlight{
    background-color:#563d7c;
}

header {
    font-family:lexend;
    text-align:center;
    font-size:300%;
    padding-bottom:4px;
    padding-top:4px;
}

a {
    text-align:center;
}

header p{
    text-align:center;
    font-size:75%;
    font-family:lexend;
}

h4{
    text-align:center;
    font-size:24px;
    color:#6E576B;
    font-family:lexend;
}

h3{
    text-align:center;
    font-family:lexend;
}

h5 {
    margin:auto;
    text-align:center;
    font-family:lexend;
}

footer{
    color:white;
    text-align:center;
    height:0px;
    padding-top:0px;
    margin-top:0px;
    border-color:black;
    box-sizing:border-box;
    margin-bottom:0px;
    padding-bottom:0px;
    font-family:lexend;
}

footer a{
    color:white;
    text-decoration:none;
    text-align:center;
}

footer a:hover{
    color:orange;
    background-color:black;
}

navbar a:hover

.bigSection{
    background-image:url("https://codehs.com/uploads/fbb7d24ac3e12916ed8691c25bc65b5c");
    background-size:cover;
}

.parallax {
  background-image: url("https://codehs.com/uploads/fbb7d24ac3e12916ed8691c25bc65b5c");

  min-height: 500px;

  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align:center;
}

.section{
    background-color:#3b3b3b;
}

.leftHalf{
    margin-left:5px;
}

.rightHalf{
    margin-right:5px;
}

.slide-right {
  width: 100%;
  margin-left: 820px;
  max-width: 850px
}

.slide-right h1 {
    font-size:40px;
    font-family:lexend;
  animation: 5s slide-right 1s forwards infinite;
    transform:translateX(0%);
}

@keyframes slide-right {
  to {
    transform:translateX(5%);
  }
}

@media only screen and (max-width: 600px) {
  body {
    background-color: darkgray;
  }
}

.right-aligned {
    text-align:right;
}

.center-aligned{
    text-align:center;
}

h1 {
  margin-bottom: .5rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  font-family:lexend;
}

.slider{
  animation-name: colorChanger;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation: 5s slide-right 1s forwards infinite;
}

@keyframes colorChanger {
  from {background-color: pink;
       padding-left:0px
      animation: mymove 5s;
      
}

p {
    font-family:lexend;
    text-align:center;
    font-size:16px;
}

.projectHolder{
    border-style:solid;
    border-color:black;
}

.projectHolderEven{
    border-style:solid;
    border-color:black;
    text-align:right;
}

.buttonarea {
	text-align: center;
	background-color: red;
}

img {
        max-width: 100%;
        height: auto; /* Maintain aspect ratio */
}