@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet"');
body { margin: 20px auto; width: 95%; 
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 200px;
  max-width: 1000px;
  overflow-x: scroll;
  overflow-y: scroll;
  background-color: #f5fbff;
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 350; }

.container{
  padding-block-end: 20px;
}


.card{
  width: 100%;
  margin-bottom: 20px;
  background-color: #ffffff;
  box-shadow: 0 40px 80px 0 rgba(0, 0, 0, 0.2), 0 10px 20px 0 rgba(0, 0, 0, 0.19);}
.card-text{
  padding: 5%;
  padding-bottom: 2%;
}


/* ### Text formatting ###*/
/* links */
a { text-decoration: none; color: #5948bd
; } /* #024583 #7357c1 #6b51b1*/
a:hover { text-decoration: underline; }
/* paragraphs, lists, tables */
p, ul, ol, table { color: #010412; font-family: "Roboto", san-serif; } /* #16181f*/
li {padding-bottom: 8px;}
ul {list-style: none}
/* navigation and footer */
nav ul, footer ul { font-size: 1.5em;  padding: 0px; list-style: none; font-weight: 350; }
nav ul li, footer ul li { display: inline; margin-right: 15px; }
nav {border-bottom: 1px solid #c7c7c7; }
footer { border-top: 1px solid #c7c7c7; font-size: 1.0em; }
footer a {text-decoration: none; color: #3e00a1;}
nav a {text-decoration: none; color: #3e00a1;}
button a {text-decoration: none; color:white;}
/* headings */
h1 { font-size: 2.0em; color: #015924; font-weight: 400 } /* 03639b*/
h2 { font-size: 1.5em; color: #3e00a1; font-weight: 350 }
h3 { font-size: 1.2em; color: #3e00a1; font-weight: 350 }
h4 { font-size: 1.0em; color: #3183b3; font-weight: 350 } 
h5 { font-size: 1.0em; font-style: italic; font-weight: 350; color: #3183b3 } 
/* Tables */
table#mytab td a {
  display: block ;
  width:100%;
  height:100%;
}
table#mytab td:hover {
  text-decoration: none;
  background-color: #e4e4e4;
}
table#mytab td a:hover {
  text-decoration: none;
  font-style: italic;
}
table#mytab {
  width: 100%; 
  background-color: #f7f7f7;
  /*border: 1px solid #c7c7c7;*/
  text-align:center;
}
table#mytab th {
  background-color: #f7f7f7;
  font-size: 1.0em; 
  color: #3183b3;
}
table#mytab th a {
  color: #3183b3;
  display: block ;
  width:100%;
  height:100%;
  min-height: 27px;
  position: center;
}
table#mytab th a:hover {
  position: center;
  text-decoration: none;
  font-style: italic;
  min-height: 27px;
  background-color: #e4e4e4;
}
.myjumpto {
  border-bottom: 1px solid #c7c7c7;
}
@media screen and (max-width: 450px) {
  table#mytab th {font-size: 0.8em;}}

/* ### Responsive Column Stacking ### */
* {
  box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.left{
  padding-right: 5px;
  width: 25%;
  min-width: 150px;
  max-width: 200px;
}
.middle{
  padding-right: 5px;
  padding-left: 5px;
  width:20%;
  min-width: 150px;
  max-width: 200px;
}
.right{
  padding-left: 5px;
  width:50%;
  min-width: 150px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 90%;
  }
}

.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* clearfix */

.clearfix {
  overflow: auto;
  position: relative;
  padding-top: 10px;
  padding-bottom: 15px;
}
.imgR{
  float: right;
}
.imgL{
  float: left;
}

.imgC {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.imgP {
  position: relative;
  width: 90%;
}
.imgP .imgPimage {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5%;
  backface-visibility: hidden;
}
.imgP .imgPmiddle {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.imgP:hover .imgPimage {
  opacity: 0.3;
}
.imgP:hover .imgPmiddle {
  opacity: 1;
}
.imgP .imgPtext {
  background-color: #3183b3;
  color: white;
  font-size: 12px;
  padding: 10px 10px;
}

/* ### Tool tips ### */
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  padding-top:40px;
  padding-left:20px;
  padding-bottom: 10px;
}
/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 60px;
  background-color: #a7b2c5;
  color: #ffffff;
  text-align: center;
  padding: 5px 0;
  margin-bottom: -40px;
  border-radius: 6px;
  /* Position the tooltip text */
  position: absolute;
  z-index: 2;
  bottom: 102%;
  left: 50%;
  -ms-transform: translateX(-40%);
  transform: translateX(-40%);
  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.1s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #a7b2c5 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
body, html {
  height: 90%;
}

/* ### Hero image/text ### */
/* The image */
.hero-image {
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url("bark.jpg");
  /* Set a specific height */
  width: 100%;
  /* Position and center the image to scale nicely on all screens */
  background-position: 100% 45%;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
  padding: 10px;
  position: relative;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}


/* ### Floating Back-To-Top Button ### */
/* make the button */
#myBtn {
  position: fixed;
  bottom: 10px;
  float: right;
  right: 5%;
  max-width: 50px;
  max-height: 50px;
  width: 100%;
  height: 100%;
  font-size: 18px;
  border-color: #3e00a1d2;
  background-color: #3e00a183;
  padding: .5px;
  border-radius: 50%;
  z-index: 1;
  color: white;
}
/*on hover changes*/
#myBtn:hover {
  background-color: #35018ad2;
  text-decoration: none;
  cursor: pointer;
}