style.css

html, body {
    height: 100%;
    /*width: 100%;*/
    font-family: Arial, Helvetica, sans-serif;
    /*margin: 0px;*/
    background-color: whitesmoke; /* #F7EBFF;*/
}
svg {width:100%; height:100%}
#watermark {
  color: rgba(128, 128, 128, 0.3);
  height: 100%;
  left: 0;
  line-height: 10;
  margin: 0;
  position: fixed;
  top: 0;
  transform: rotate(-30deg);
  transform-origin: 0 100%;
  width: 100%;
  word-spacing: 50px;
  z-index: -1;
  pointer-events: none; /* Ensure it doesn’t interfere with user interaction */
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

h1{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    /*font-size: 0px;*/
    display: inline;
    text-align: center;
}

a:visited { text-decoration: none; color:blue; }

#heading{
    
    text-align: center;
    margin: 20px;
    /*display: block;*/
    /*font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;*/
}

/*overflow: hidden;*/

#topnav {
    width: 100%;
    display : flex;
    align-items: center;
    justify-content: space-between;
    background-color:#010302; 
    position: sticky;
    top: 0px;
}
  
#topnav a {
    float: left;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 20px;
}
  
#topnav a:hover {
    background-color: #ddd;
    color: black;
}



/* The side navigation menu */
/* On screens that are less than 700px wide, make the sidebar into a topbar */
@media screen and (max-width: 700px) {

    #topnav {
        margin: 0;
        padding: 0;
        width: 200px;
        background-color:#010302;
        position: fixed;
        height: 100%;
        overflow: auto;
        display: inline;
        width: 0;
        top: 0;
        left: 0;
        overflow-x: hidden;
        z-index: 1;
        transition: 0.5s;
        padding-top: 60px;
      }
      
      #topnav a {
        display: block;
        color: #f2f2f2;
        padding: 8px ;
        text-decoration: none;
        float: none;
        transition: 0.3s;
        margin: 0px;
      }
       
      #topnav a.active {
        color: white;
      }
      
      #topnav a:hover:not(.active) {
        background-color: #555;
        color: white;
      }
      #topnav a:hover {
        color: #f1f1f1;
      }
      
      #topnav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 26px;
        /*margin-left: 50px;*/
      }
      
      
     
  }
  
  /* On screens that are less than 400px, display the bar vertically, instead of horizontally */
  /*
  @media screen and (max-width: 400px) {
    #topnav a {
      text-align: center;
      float: none;
    }
    #topnav {padding-top: 15px;}
    #topnav a {font-size: 18px;}
  }*/

#home{
    height : 500px;
    /*border-bottom: 1px solid;*/
}

#projects{
    height : 500px;
    /*border-bottom: 1px solid;*/
}


#about{
    /*height : 100px;*/
    /*border-top: 1px solid;*/
    margin-top: 20px;
    padding-top: 10px;
    background-color: #dddddd;
    display: block;
    overflow: auto;
    /*width: 100%;*/
    margin-bottom: 20px;
    padding-bottom: 20px;
}

#about1{float:left;}
#about2{float:right;}
#about3{margin:0 auto;display: inline-block;}


/*#about *{
  text-align: center;
}*/

#contact_buts{
    display: flex;
    align-items: center;
    justify-content: center;
    /*margin-left: 40px;
    margin-right: 40px;*/
}

#homepage_body
{
    margin-left: 2%;
    margin-right: 2%;
    margin-top : 1%;
    margin-bottom : 1%;
    /*width: 70%;
    height: 30%;
    align-items: center;
    display: block;
    */
}
.columns {
    float: left; 
    width:50%;
}

#collections_table {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 35%;
    font-size: 18px;
    margin-right: 30px;
    /*background-color: chocolate;*/
    max-width:100%;
    white-space:nowrap;
}
#collections_table td, #collections_table th {
    border: 1px solid #ddd;
    padding: 8px;
}
#collections_table th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    /*background-color: #04AA6D;*/
    color: white;
}   

#columns_div::after{
    content: "";
    display: table;
    clear: both;
}


#state_dropdown{
  /*height: 10%;
    font-size: 100%;*/
  background-color: #A9A9A9;
  border-radius: 0;
  border: #A9A9A9;
  font-size: 18px;
  color: black;;
}
@media only screen and (max-width: 720px) {
  /* #navpoint{border: 3px solid #563c5c; padding: 0px}*/
  #state_dropdown{width: 60%; padding: 0%; font-size: 16px;}
}
@media only screen and (max-width: 480px) {
  /* #navpoint{border: 3px solid #563c5c; padding: 0px}*/
  #state_dropdown{width: 60%; padding: 0%; font-size: 16px;}
}


/* ***slideshow css*** */
* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  /*max-width: 1000px;*/
  position: relative;
  /*margin: auto;*/
  float: center;
  width: 70%;
  height: 400px;
  max-width: 70%;
  max-height: 400px;
  /*align-items: center;*/
  display: block;
  margin-left: 5%;
  margin-right: 5%;
  /*overflow: hidden;*/
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  align-items: center;
  text-align: center;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/*div.content {
        margin-left: 200px;
        padding: 1px 16px;
        height: 1000px;
      }*/
      

      /*
    #topnav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        transition: 0.5s;
        padding-top: 60px;
      }
      
      #topnav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
        transition: 0.3s;
      }
      
      #topnav a:hover {
        color: #f1f1f1;
      }
      
      #topnav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
      }
      */