.parallax {
  /* The image used */
  background-image: url("https://codehs.com/uploads/e967dbe7aa2fe9bc13cf6464ce2803c0");

    /* Set a specific height */
  min-height: 600px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
   margin: 0;
  padding: 0;
  box-sizing: border-box; /* Including this ensures padding and border are included in element's total width and height */
}


@media (min-width: 769px) {
  .parallax {
    .min-height:1440px; {
    background-attachment: fixed;
    }
  }


.navbar-nav {
  width: 100%;
  display: flex;
  justify-content: space-between; /* spread links across */
  padding-left: 0;   /* remove left padding */
  padding-right: 0;  /* remove right padding */
}

.regBG {
  /* The image used */
  background-color: black;

    /* Set a specific height */
  min-height: 1440px;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.contentBox{
    /*code for my white rounded rectangle*/
    background: gray;
    border: 30px white;  /* white border*/
    border-radius: 25px;
    position: center;
    padding: 40px;
    /*max-width: 800px;*/
    width: 100%; /*makes it responsive*/
    
}
/*.navbar-toggler:focus:not(:hover) {
  outline: none;
  box-shadow: none;*/

.header{
   
    /*background-color: Bisque;
    margin-bottom:100px;*/
}

@keyframes example {
  from {background-color: yellow;}
  to {background-color: red;}
}

body{
    /*background-color: #BFA78F;
     width: 100%;
    height: 100px;
    animation-name: example;
    animation-duration: 0.1s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    color: blue;
    font-size: 20px;
    */
  
}
/*.myArea{
     
     background-color: green;
}

p {
  border: 5px solid red;
}*/

img{
    padding: 5%;
    width: 45%;
}


footer{
    color:white;
    /*background-color: #BFA78F;*/
    text-decoration: none;
    padding-bottom: 500px;
    margin-bottom:100px;
    /*background-image:url("https://codehs.com/uploads/58f5bc004b4e65a67e0be23665de90d1");*/
}
footer a{
    color:white;
    text-decoration: none;
    transition: font-size 20s ease-in-out;
}


/* Home is commented out because we are on the homepage and do not want it to turn orange when the background is highlighted in orange */
/*
.home a:hover{
    color:orange;
   
}
*/
/*.home a:hover{
    color:red;
}
.bio a:hover{
    color:red;
   
}
.projects a:hover{
    color:red;
   
}
.todo a:hover{
    color:red;
   
}
.webapp a:hover{
    color:red;
   
}
.chatroom a:hover{
    color:red;
   
}
.firebase a:hover{
    color:red;
   
}
a:hover{
    color:red;
   
}*/
/* style.css */
/* Non-active links: default text color (normal) */
.navbar .nav-link:not(.active) {
  color: #ccc; /* or whatever your default link color is */
  background: none;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
  transition: all 0.5s;
}

/* Non-active links: rainbow animation on hover */
.navbar .nav-link:not(.active):hover {
  background: linear-gradient(270deg, red, orange, yellow, green, blue, indigo, violet, red);
  background-size: 600% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbowFlow 3s linear infinite;
}


/* Rainbow animation keyframes */
@keyframes rainbowFlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}



/*hide text if screen is <1000px*/

}



.container-fluid {
    /*background-color: #DECBBA;*/
}
.highlight{
    background-color: gray;
}
body {
  opacity: 0;
  transition: opacity 0.8s;
}
body.loaded {
  opacity: 1;
}
.navbar-toggler-icon {
  width: 30px;   /* default is 30px */
  height: 32px;  /* default is 30px */
}
.navbar-toggler {
  display: flex;
  align-items: center; /* vertically center icon + text */
}

.navbar-brand {
    margin-bottom: 8px;
}
.center{
    text-align:center;
}
.buttonArea{
    text-align: center;
    margin: 10px;
}
.spacer{
   height: 10px;
}

h1{
    margin: 10px;
}