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

/* z-index (above) refers to layer order with larger numbers overlapping smaller numbers. this should put the header over anything else that might take up the same area. */


body {
  background-color: black;
  color: pink;
  font-family: Georgia;
  margin: 0;
  background-image: var(--body-bg-image);
  box-sizing: border-box;
}

body {
  
 --header-image: url('cos/fearne/02.png');
 --body-bg-image: url('/decor/pinmouse.gif');
 --content: lightblue;
 --border-color: white;
}
 
#thumbnails img {
  /* CSS for if we want a drop shadow: box-shadow: 2px 2px 10px 5px #b8b8b8; */
  border-radius: 50px;
}

* {
  transition: all 0.5s ease;
}

#thumbnails {
  text-align: center;
}
#thumbnails img {
  width: 70px;
  height: 70px;
  /* options for how images fit in whatever box is created: contain, cover, fill, none, scale-down */
  object-fit: cover;
  margin: 10px;
  cursor: pointer;
}
@media only screen and (max-width: 480px) {
  #thumbnails img {
    width: 50px;
    height: 50px;
  }
}
#thumbnails img:hover {
  transform: scale(1.05);
}

#main {
  width: 50%;
  height: 800px;
  object-fit: contain;
  display: block;
  margin: 20px auto;
}
@media only screen and (max-width: 480px) {
  #main {
    width: 100%;
  }
}b

.hidden {
  opacity: 0;
}


.fit-picture {
 width: 100px;
}


.top
{
  display: flex;
  width: 80vw;
  height: 80vh;
  margin-top: 10vh;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10vh;
}
.top ul
{
  list-style: none;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-sizing: border-box;
}
.top ul li
{
  position: relative;
  float: left;
  width: 25%;
  height: 25%;
  overflow: hidden;
}

.top ul li::before
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  content: '';
  color: white;
  opacity: 0.4;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}
.top ul li:hover::before
{
  opacity: 0;
  background-color: rgba(0,0,0,0.90);
}
.top ul li img
{
  width: 100%;
  height: auto;
  overflow: hidden;
}



#container {
 max-width: 900px;
 margin: 0 auto;
 color: navy;
 font-weight: bold;
}

#header { 
  height: var(--header-height);
  background-image: var(--header-img);
  background-size: var(--header-bg-size);
  background-position: var(--header-bg-position);
  background-repeat: var(--header-bg-repeat);
  position: relative;
  z-index: 99;
}

#flex {
  display: flex;
}

    main {
     background-color: white;
     flex: 1;
     padding: 20px;
     order: 2;
     border: 1px solid var(--border-color);
    }