:root {
  --global-txt-color: #00ff00; /* lime */
  --global-bg-color: #000000; /* black */
  --global-border-color: #00ff00; /* lime */
  --global-hover-txt-color: #000000; /* black */
  --global-hover-bg-color: #009900; /* 30% dark green */
  --global-hover-border-color: #00ff00; /* lime */

  --active-txt-color: #000000; /* black */
  --active-bg-color: #00ff00; /* lime */

  --popUps-txt-color: #ffffff; /* white */
  --popUps-bg-color: #ff0000; /* red */
  --popUps-hover-color: #555555; /* 33% black */

  --global-border-radius: 4px;
}

*,*:before,*:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  overflow-y: scroll;
  scroll-behavior: smooth;
  font-size: 14px;
}

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  #font-family: Comic-Mono, Comic-Mono-Bold;
  color: var(--global-txt-color);
  background-color: var(--global-bg-color);
  /* margin-top: 16px; */
}

.topnav {
  /* Top Aligned */
  position: fixed;
  max-width: 90%;
  margin: auto;
  z-index: 1;
  top: 0;
  /* Centered */
  left: 0;
  right: 0;
  text-align: center;
  /* Bordered */
  /* border: 1px solid; */
  padding: 6px 0px 20px 0px;
  background-color: var(--global-bg-color);
}

.navmenu {
  width: auto;
  overflow: hidden;
  display: inline-block;
  padding: 6px 6px;
  /* border: 1px solid; */
}

/* textarea:focus, input:focus { */
*:focus {
  outline: none;
}

/* Google Search Bar */
.gsearch_bar {
  width: 98%;
  overflow: hidden;
  display: inline-block;
  padding: 6px 6px;
  /* border: 1px solid; */
}
form.gsearch input[type=search] {
  padding: 8px;
  font-size: 14px;
  float: left;
  width: 80%;
  color: var(--global-txt-color);
  background-color: var(--global-bg-color);
  border: 1px solid;
  border-color: var(--global-hover-bg-color);
  border-radius: 0px;
  transition-duration: 0.4s;
 }
form.gsearch .resetBtn {
  float: left;
  width: 10%;
  padding: 8px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  color: var(--active-txt-color);
  background-color: var(--global-hover-bg-color);
  border: 1px solid;
  border-color: var(--global-hover-bg-color);
  border-top-left-radius: var(--global-border-radius);
  border-bottom-left-radius: var(--global-border-radius);
  transition-duration: 0.4s;
}
form.gsearch .searchBtn {
  float: right;
  width: 10%;
  padding: 8px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  color: var(--active-txt-color);
  background-color: var(--global-hover-bg-color);
  border: 1px solid;
  border-color: var(--global-hover-bg-color);
  border-top-right-radius: var(--global-border-radius);
  border-bottom-right-radius: var(--global-border-radius);
  transition-duration: 0.4s;
}
form.gsearch button:hover {
  color: var(--global-hover-txt-color);
  background-color: var(--active-bg-color);
}
form.gsearch input:hover {
  border-color: var(--global-hover-border-color);
}
form.gsearch input:focus {
  border-color: var(--global-hover-border-color);
  outline: none;
  -moz-appearance: none;
  -webkit-appearance: none;
}
form.gsearch::after {
  content: "";
  clear: both;
  display: table;
}

.menuitem {
  padding: 8px 16px;
  float: left;
  width: auto;
  /* border: none; */
  border: 1px solid;
  display: block;
  outline: 0;
  white-space: normal;
  font-weight: bold;
  cursor: pointer;
}

.firstbutton {
  border-top-left-radius: var(--global-border-radius);
  border-bottom-left-radius: var(--global-border-radius);
}
.lastbutton {
  border-top-right-radius: var(--global-border-radius);
  border-bottom-right-radius: var(--global-border-radius);
}
a.menuitem.active {
  color: var(--active-txt-color);
  background-color: var(--active-bg-color);
  border-color: var(--global-hover-border-color);
}
a.menuitem:hover {
  color: var(--global-hover-txt-color);
  background-color: var(--global-hover-bg-color);
  border-color: var(--global-hover-border-color);
  transition-duration: 0.4s;
}

.card {
  box-shadow: 0 4px 8px 0 lime;
  transition: 0.3s;
  width: 20%;
  margin: auto;
  left: 0;
  right: 0;
  /* height: 30px; */
  border-radius: 5px;
  padding: 10px;
}
.card:hover {
  box-shadow: 0 8px 16px 0 lime;
}
.card img {
  margin: auto;
  left: 0;
  right: 0;
  text-align: center;
  border-radius: 5px 5px 0 0;
  width: 50%;
}
/* #Cisco { */
    /* padding-top: 150px; */
    /* margin-top: -50px; */
/* } */

.main_content {
  /* position: fixed; */
  /* top: 130px; */
  /* overflow: scroll; */
  /* height: 100%; */

  /* margin-top: 120px; */
  margin-left: auto;
  margin-right: auto;
  /* max-width: 980px; */
  /* max-width: 1140px; */
  /* border: 1px solid; */
  /* padding: 120px 0px 50px 0px; */
  padding: 150px 0px 50px 0px;
  max-width: 40%;

  /* top: 130px; */
  /* bottom: 50px; */
  /* position: fixed; */
  /* overflow-y: auto; */
  /* overflow-x: hidden; */
}

.main_content ul::before {
  display: block;
  content: " ";
  margin-top: -145px;
  height: 145px;
  visibility: hidden;
  pointer-events: none;
}
.main_content ul {
  /* margin-top: 1.33em; */
  /* margin-bottom: 1.33em; */
  /* margin-left: 0; */
  /* margin-right: 0; */
  font-weight: bold;
  list-style-type: none;
  margin: 20px 0px 8px 0px;
  padding: 0;
  /* max-width: 30%; */
  letter-spacing: 2px;
  /* line-height: 1; */
  text-decoration: underline;
  color: var(--global-txt-color);
}
.main_content h4 {
  /* max-width: 30%; */
  letter-spacing: 4px;
  /* line-height: 1; */
  text-decoration: underline;
}
.main_content li {
  list-style-type: none;
  margin: 0;
  padding: 30;
  /* line-height: 1; */
}
.main_content a {
  margin-left: 30px;
  /* line-height: 1; */
}
/* .main_content p:last-child { */
  /* background: red; */
  /* padding-bottom: 40px; */
/* } */

/* unvisited link */
.main_content a:link {
  text-decoration: none;
  /* color: var(--global-hover-bg-color); */
  color: var(--global-txt-color);
}
/* visited link */
.main_content a:visited {
  color: var(--global-txt-color);
}
/* mouse over link */
.main_content a:hover {
  color: var(--global-hover-txt-color);
  background-color: var(--global-hover-bg-color);
  border-radius: var(--global-border-radius);
  padding: 1px 5px;
}
/* selected link */
.main_content a:active {
  color: var(--global-txt-color);
}

/* 'Go to top' button properties */
#totopBtn {
  display: none;
  position: fixed;
  bottom: 25px;
  left: 20%;
  z-index: 1;
  font-size: 18px;
  font-weight: bold;
  border: none;
  border-radius: var(--global-border-radius);
  outline: none;
  color: var(--popUps-txt-color);
  background-color: var(--popUps-bg-color);
  cursor: pointer;
  padding: 15px;
  opacity: 90%;
}
#totopBtn:hover {
  background-color: var(--popUps-hover-color);
}

/* @media (max-width:600px) { */
  /* display: block; */
  /* width: 100%; */
  /* text-align: center; */
/* } */