@font-face {
    font-family: "regular";
    src: url("../typo/CaniculeDisplayv0.1-Light.otf") format("truetype");
}

@font-face {
    font-family: "light";
    src: url("../typo/Raleway-Regular.ttf") format("truetype");
}

.grid-project {
  display: grid;
  grid-template-columns: 20px repeat(6, 1fr 20px);
  overflow-x: hidden;
}



#count{
  font-family: "regular";
  font-size: 1.7em;
  grid-column: 10/span 3;
  text-align: right;
  margin-bottom: 5%;
}

#shdesktop{
  grid-column: 1/span 13;
  width: 100%;
}

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
  transition: all 0.5s ease-in-out;
}

#prev:visited, #prev:active, #prev:hover, #prev:after{
  transition: none;
 color: transparent;
}

#next:visited, #next:active, #next:hover, #next:after{
  transition: none;
 color: transparent;
}


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

.mySlides img{
 max-height: calc(100vh - 8em);
  max-width: 100%;
  object-fit: contain;
  vertical-align: middle;
}

/* Next & previous buttons */
#prev, #next {
  cursor: none;
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  color: var(--color-text);
  user-select: none;
}

/* Position the "next button" to the right */
#next {
  right: 0;
  text-align: right;
}

#cursor >h1,
#prev > h1,
#next > h1{
  font-size: 80px;
  width: 100%;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 0.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

#left{
  grid-column: 1/span 4;
}

#left div{
  margin-bottom: 1.45em;
}

#left a,
#right a{
  text-decoration: underline;
}

#right{
  grid-column: 6/span 7;
}

#right p{
  text-indent: 40px;
}

/* cursor */
#cursor {
  width: 200px;
  height: 200px;
  position: absolute;
  z-index: 101;
  font-family: "regular";
  color :#4941ef;
}

#cursor-right,
#cursor-left{
  position: absolute;
  display: none;
  color: var(--color-text);
  cursor: none;
}