/* 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." */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


blockquote {
  border-left: 4px solid pink;
  padding-left: 15px;
  margin: 20px 0;
}

h1 h2 {
  font-family: "Fira Code", monospace;
  font-weight: 700;
}


body {
  background-color: #efefef;
  color: black;
  font-family: "Work Sans", sans-serif;
  margin: 0;
}


.content {
  margin: 2%;
}

/*.hero-header {*/
/*  background-image: url('assets/banner.png');*/
/*  background-size: cover;*/
/*  background-position: center center;*/
/*  background-repeat: no-repeat;*/
/*}*/

/*.hero-header {*/
/*  object-fit: contain; */
/*  object-position: center;*/
/*  width: 100px;*/
/*  height: 100px; */

  /*overflow: hidden;*/
/*}*/

.heroHeader {
  width: 100%;
  height: auto;
  background-image: url("assets/bannersmall.png");
  background-size: contain;
  background-repeat: no-repeat;
 }

.heroHeader .heroHeader-image {
  display: block;
  visibility: hidden;
  height: auto;
  width: 100%;
 }

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  gap: 10px;
}

.media {
  max-width: 300px;
  max-height: 200px;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.media img {
  max-width: 100%;
  height: auto;
}

/*.lightbox-target {*/
/*  position: fixed;*/
/*  top: -100%;*/
/*  width: 100%;*/
/*  background: rgba(0, 0, 0, .7);*/
/*  width: 100%;*/
/*  opacity: 0;*/
/*  -webkit-transition: opacity .5s ease-in-out;*/
/*  -moz-transition: opacity .5s ease-in-out;*/
/*  -o-transition: opacity .5s ease-in-out;*/
/*  transition: opacity .5s ease-in-out;*/
/*  overflow: hidden;*/
/*}*/

/*.lightbox-target img {*/
/*  margin: auto;*/
/*  position: absolute;*/
/*  top: 0;*/
/*  left: 0;*/
/*  right: 0;*/
/*  bottom: 0;*/
/*  max-height: 0%;*/
/*  max-width: 0%;*/
/*  border: 3px solid white;*/
/*  box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);*/
/*  box-sizing: border-box;*/
/*  -webkit-transition: .5s ease-in-out;*/
/*  -moz-transition: .5s ease-in-out;*/
/*  -o-transition: .5s ease-in-out;*/
/*  transition: .5s ease-in-out;*/
/*}*/

/*a.lightbox-close {*/
/*  display: block;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  box-sizing: border-box;*/
/*  background: white;*/
/*  color: black;*/
/*  text-decoration: none;*/
/*  position: absolute;*/
/*  top: -80px;*/
/*  right: 0;*/
/*  -webkit-transition: .5s ease-in-out;*/
/*  -moz-transition: .5s ease-in-out;*/
/*  -o-transition: .5s ease-in-out;*/
/*  transition: .5s ease-in-out;*/
/*}*/

/*a.lightbox-close:before {*/
/*  content: "";*/
/*  display: block;*/
/*  height: 30px;*/
/*  width: 1px;*/
/*  background: black;*/
/*  position: absolute;*/
/*  left: 26px;*/
/*  top: 10px;*/
/*  -webkit-transform: rotate(45deg);*/
/*  -moz-transform: rotate(45deg);*/
/*  -o-transform: rotate(45deg);*/
/*  transform: rotate(45deg);*/
/*}*/

/*a.lightbox-close:after {*/
/*  content: "";*/
/*  display: block;*/
/*  height: 30px;*/
/*  width: 1px;*/
/*  background: black;*/
/*  position: absolute;*/
/*  left: 26px;*/
/*  top: 10px;*/
/*  -webkit-transform: rotate(-45deg);*/
/*  -moz-transform: rotate(-45deg);*/
/*  -o-transform: rotate(-45deg);*/
/*  transform: rotate(-45deg);*/
/*}*/

/*.lightbox-target:target {*/
/*  opacity: 1;*/
/*  top: 0;*/
/*  bottom: 0;*/
/*  overflow: scroll;*/
/*}*/

/*.lightbox-target:target img {*/
/*  max-height: 100%;*/
/*  max-width: 100%;*/
/*}*/

/*.lightbox-target:target a.lightbox-close {*/
/*  top: 0;*/
/*}*/

.layer {
  opacity: 0;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10px;
  height: 90%;
  background: #fff;
  color: #151e3f;
  transition: all 0.9s ease;
  
  .overlayText {
    transition: all 0.9s ease;
    transform: scale(0.1);
  }
}

.overlayText {
  text-align: center;
  font-size: 15px;
  letter-spacing: 1px;
}

.media:hover .layer {
  opacity: 0.8;
  width: 90%;
  transition: all 0.5s ease;
  
  .overlayText {
    transform: scale(1);
    transition: all 0.9s ease;
  }
}

.artFolder {
  display: block;
  margin: 5%;
  width: 215.15px;
  height: 163.02px;
  background-image: url('assets/artFolderClosed.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
  /*transition: background-image 0.3s ease-in-out;*/
}

.artFolder:hover {
  width: 252.88px;
  height: 162.42px;
  background-image: url('assets/artFolderOpen.svg');
}


.projectsFolder {
  display: block;
  /*margin-left: auto;*/
  /*margin-right: auto;*/
  margin: 5%;
  width: 215.15px;
  height: 163.02px;
  background-image: url('assets/projectsFolderClosed.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
  /*transition: background-image 0.3s ease-in-out;*/
}

.projectsFolder:hover {
  width: 252.88px;
  height: 162.42px;
  background-image: url('assets/projectsFolderOpen.svg');
}


.assignmentsFolder {
  display: block;
  /*margin-left: auto;*/
  /*margin-right: auto;*/
  margin: 5%;
  width: 215.15px;
  height: 163.02px;
  background-image: url('assets/assignmentsFolderClosed.svg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
  cursor: pointer;
  /*transition: background-image 0.3s ease-in-out;*/
}

.assignmentsFolder:hover {
  width: 252.88px;
  height: 162.42px;
  background-image: url('assets/assignmentsFolderOpen.svg');
}

/* Styles for screens smaller than 768px */
@media (max-width: 767px) {
    /* Mobile-specific styles */
}

/* Styles for screens between 768px and 1024px */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet-specific styles */
}

/* Styles for screens larger than 1024px */
@media (min-width: 1024px) {
    /* Desktop-specific styles */
}