/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
* {
    margin: 0;
    padding: 0;
}
/* removes default margins also * applys to every single thing ever*/

.tab { text-indent:5%;
line-height: 2;}

body {
  background-color: #FFFFFF;
  color: #000000;
  font-family: Georgia;
}

h1 {
  text-align: center;
  color: rgb(100,30,100);
  font-size: 30px;
  font-family: Verdana;
}

h2 {
  text-align: center;
  color: rgb(100,30,100);
  font-size: 25px;
  font-family: Verdana;
  padding: 20px;
}

.nav{
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  height: 60px;
  top: 0;
  width: 100%;
  text-align: center;
  border-bottom: 2px solid rgb(100,30,100);
  overflow: hidden;
  z-index: 2;
}
/* z-index says whsich elemnet is on top of each other. This ius so the slideshow carousel doesnt go througb the header*/

li{
float: left;
width:16.66667%
}

li a {
  display: block;
  padding: 8px;
  min-height: 44px;
  border-right: 2px solid rgb(100,30,100);
  background-color: rgb(200,40,100); 
  color: #FFFFFF;
  text-decoration: none;
}

li:last-child {
  border-right: none;
}

.active {
  background-color: rgb(220,110,40);
}

li a:hover:not(.active) {
 background-color: rgb(220,60,120);
}

.head{
  vertical-align: middle;
  line-height: normal;
}

.fit{
 max-width: 90%;
 justify-content: center;
}


/* Slideshow container */
.myslides {
  box-sizing: border-box;
  display: none;
}

.myslides1 {
  box-sizing: border-box;
  display: none;
}

.myslides2 {
  box-sizing: border-box;
  display: none;
}

/* Slideshow container */
.slideshow-container {
  box-sizing: border-box;
  max-width: 90%;
  position: relative;
  z-index: 1;
}

/* Next & previous buttons */
.prev, .next {
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(100,30,100,0.8);
}

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