/* 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." */

@font-face {
  font-family: cardboard-font; /* set name */
  src: url(CardboardCutout.woff); /* url of the font */
}

@font-face {
  font-family: cardboard-cat-font; /* set name */
  src: url(CardboardCat-Bold.otf); /* url of the font */
}

body {
  background-color: #5C7056;
  color: #64F042;
  font-family: cardboard-font;
  font-size: 2vw;
}

h1 {
  margin-top: -2vw;
  margin-bottom: -5vw;
  text-align: center;
  font-family: cardboard-cat-font;
  font-size: 9vw
}

p {
  font-size: 2vw;
  border: 2px solid #6CB05B;
}

a {
  color: #64F042;
  
}

a:hover {
  color: #F041CA;
}

#art img {
  border: 1px solid #ddd; /* Gray border */
  border-radius: 4px;  /* Rounded border */
  padding: 5px; /* Some padding */
  width: 150px; /* Set a small width */
}

/* Add a hover effect (blue shadow) */
#art img:hover {
  box-shadow: 0 0 8px 1px #F041CA;
  
}

#menubar ul {
  list-style: none;
  font-size: 4vw;
  text-align: center;
  margin-bottom: -1vw;
}

#menubar li{
  display: inLine;
}

/* CSS for slideshow stuff */
* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
  max-width:100%; 
  max-height:100%;
  
}


/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 70%;
  width: auto;
  padding: 16px;
  /*margin-top: -100px;*/
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-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(0, 0, 0, 0.8);
}

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

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

div.scroll-container {
  background-color: #333;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  padding: 10px;
}

.scroll-container div {
   width: 10%;
   background-color: #eee;
   float: none;
   height: 20%;
   margin: 0 0.25%;
   display: inline-block;
    zoom: 1;
}