body {
  margin: 0;
  padding: 0;
  font-size: 1.25em;
}


a {
  color: #cc0000;
  text-decoration: none;
}

.image {
    width: 80%;
    height: auto;
    padding: 0.5em;
}


.header{
  background-image: radial-gradient(circle closest-side at 10% 45%, red 40%, black 41%,  black 100%,  #990000 400% );
  color: #FFFFFF;
  margin: 0;
  padding: 0.5em;
  height: 6.5em;
}

.hnav{
  height: 2.5em
  margin: 0;
  padding: 0;
  position: sticky;
  position: -webkit-sticky; 
  top: 0;
}

.hnav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #CC0000;
}

.hnav li {
  float: left;
}

.hnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 0.4em 0.4em;
  text-decoration: none;
}

.hnav li a:hover {
  background-color: #FF0000;
}

.active {
  background-color: #333333;
}

.vnav{
  width: 10em;
  float: left;
  background-color: #ffffff;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  display: block;
  position: sticky;
  position: -webkit-sticky; 
  top: 2.2em;
}

.vnav ul {
  list-style-type: none;
  margin: 0px;
  padding: 0;
}

.vnav li a {
  display: block;
  color: #000000;
  padding: 0.3em 0.3em;
  text-decoration: none;
}

.vnav li a:hover {
  background-color: #FF0000;
}
.vnavactive {
  background-color: #EEEEEE;
}

.content{
  background-color: #FFFFFF;
  margin-left: 11em;
  padding: 0.5em;
}
.content1{
  background-color: #FFFFFF;
  margin-left: 11em; 
  padding: 0.5em;
}

.footer{
  background-color: #000000;
  color: #FFFFFF;
  margin: 0;
  padding: 0.5em;
}

.footer a {
  color: #ffffff;
  text-decoration: none;
}

@media only screen and (max-width: 100000px) 
{
  .content{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 0.8em;
    height: max-height;
  }
  .content1{
    display: grid;
    grid-template-columns:auto;
    grid-column-gap: 0.8em;
    height: max-height;
  }
}


@media only screen and (max-width: 992px) 
{
  .content, .content1{
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 0.8em;
    height: max-height;
  }
}

@media only screen and (max-width: 680px)
{  
  .vnav{
  width: 100%;
  display: block;
  position: static;
  border-bottom: 1px solid #cccccc;
  }

  .content{
    display: relative;
    margin-left: 0em;
  }
  .content1{
    display: relative;
    margin-left: 0em;
  }
}

/* For mobile phones and Tablets */

@media only screen and (max-width: 992px) and (max-device-width : 992px)
{
  body{
    font-size: 1.25em;
  }
  .content{
    display: grid;
    grid-template-columns: auto;
    grid-column-gap: 0.5em;
  }
}

@media only screen and (max-width: 992px)  and (max-device-width : 992px) and (orientation: portrait)
{
  body{
    font-size: 1.25em;
  }
  .vnav{
  width: 100%;
  display: block;
  position: static;
  border-bottom: 1px solid #cccccc;
  }

  .content{
    display: relative;
    margin-left: 0em;
  }

}