/*the text body class*/
.bodyint{
   text-shadow: h-shadow; color:black;
   color:black;
   margin: 0px;
   background-color:white;
   padding-top: 0px;
   padding-right: 20px;
   padding-bottom: 50px;
   padding-left: 20px;
   font-family: 'Merriweather', serif ;
   border-top: 6px solid lightgray;
}

/*Class for submission form*/
.submit{
border-style: solid;
border-width: 0.5px;
border-color: gray;
background-image: url("images/shadowcity.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}

/*change text submission button color*/
.textsubmit{
background-color: rgba(255,255,255,0.7);
color: gray;
}

/*class to blur images / obj */
.blur{
-webkit-filter: blur(4px);
  filter: blur(4px);
}

/*class to create a gray dot on page*/
.ball{
height: 10px;
width: 10px;
background-color: #838383;
border-radius: 50%;
display: inline-block;
}

/*Description home tag*/
.desc{
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #838383
}

/*hyperlinks general properties*/
a{
color: gray;
}

/* green button class for submission form style*/
.button {
  background-color: rgba(0,255,50,0.2); 
  border: none;
  color: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

/* red button class for submission form style*/
.button2 {
  background-color: rgba(255,0,50,0.2); 
  border: none;
  color: none;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

/*body general properties*/
body{
background-color: #f6fef9;
}

/*h1 general properties*/
h1{
   color: gray;
   /*background-color: white; */
   padding-left: 40px;
   padding-right: 40px;
   text-align:center;
   font-family: 'Oxygen', serif;
   data-aos="fade-up"
   data-aos-delay="1200"
   data-aos-once="true"

}

#up{
  top: -43px;
  left: 410px;
}

/*Class to create a footer*/
.footer {
  position: static;
  left: 50%;
  bottom: 0;
  width: 100%;
  background-color: lightgray;
  color: white;
  text-align: center;
  border-top: 2px solid gray;
}

/*Correctly format body width and margins*/
body, html {
  height: 100%;
  margin: 0;
}

/*Headerimage at top of Screen*/
.headerimage{
position: fixed;
z-index: -1;
background-size: cover;
width: 100%;
height: auto;
}

/*Headerspacer creates space btwn image and elements*/
.headerfake{
width:80%; 
height:auto; 
visibility: hidden;
}



/* Style the navbar */
#navbar {
  overflow: hidden;
  width:100%;
  top:0;
  background-color: rgba(0,0,0,0.7);
  z-index: 5;
  position: fixed;
}

/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  padding-top: 5px;
  text-decoration: none;
}

/* Page content */
.content {
  padding: 16px;
}




/* Edit Font Sizes if Screen Bigger than Portrait */
@media screen and (min-width: 500px) {
  marquee {
    font-size:1.5vw;
  }
  .bodyint{
    font-size: 1.5vw

   text-shadow: h-shadow; color:black;
   color:black;
   /* Area Btwn the Box and the Edge of Screen*/
   left: 30%;
   right: 30%;
   
   /* Area btwn edge of box and text */
   padding-top: 5%;
   padding-right: 20%;
   padding-bottom: 5%;
   padding-left: 20%;
  }
  h1{
    font-size: 3.2vw;
  }
  p{
  font-size: 1.5vw;
  }
  h7{
    font-size: 1.5vw;
  }
  .hovertext{
     font-size: 3.3vw;
     top:50%;
     left: 50%;
  }
  .hovertext2{
    top: 30%;
    left: 50%;
   }
  .headerfake{
   width: 40%;
   height: auto;
  }
  .bodyint{
   padding-top: 0px;
   padding-right: 10%;
   padding-bottom: 10%;
   padding-left: 10%;
  }
  .desc{
   margin-right: 30%;
   margin-left: 30%;
   font-size: 5vw;
  }
}

/*Change website for dark mode support*/
@media (prefers-color-scheme: dark) {
    /* Overrides for Dark Mode. */
    body {
        background-color: black;
    }
    .bodyint{
        background-color:black;
        color: white;
        border-top: 6px solid darkgray;
     }
    .ball{
        background-color: springgreen;
    }
    a{
         color: #ADC1ED;
    }
    .footer{
         background-color: #191919;
         color: darkgray;
    }
    .desc{
          border-bottom-color:  springgreen;
    }
   .headerimage{
           -webkit-filter: brightness(0.30);
           filter: brightness(0.30);
    }
   .submit{
           -webkit-filter: brightness(0.50);
           filter: brightness(0.50);
    }
}

}