/* FULLSCREENISH HEADER */
header {
  min-height: 100%;
  font-family: 'Audiowide';
  font-weight: bold;
  color: #028090;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #028090;
  -webkit-text-fill-color: transparent;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 6px 10px 0 rgba(0, 0, 0, 0.19) inset;
}
header span {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #e5e5e5;
}
header .w3-display-middle {
  width: 80%;
}
/* header background image */
.bgimg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  filter: grayscale(75%) blur(2px);
}
.no-webp .bgimg, .no-js .bgimg {
  background-image: url("../images/mac2.jpg");
}
.webp .bgimg {
  background-image: url("../images/mac2.webp");
}

/* SPINNING AND CHANGING 'ENJOY' TEXT*/
.antiClock{
	display: inline;
	text-indent: 4px;
}
.antiClock span{
	animation: anti 12.5s linear infinite 0s;
	-ms-animation: anti 12.5s linear infinite 0s;
	-webkit-animation: anti 12.5s linear infinite 0s;
	opacity: 0;
	overflow: hidden;
	position: absolute;
}
.antiClock span:nth-child(2){
	animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-webkit-animation-delay: 2.5s;
}
.antiClock span:nth-child(3){
	animation-delay: 5s;
	-ms-animation-delay: 5s;
	-webkit-animation-delay: 5s;
}
.antiClock span:nth-child(4){
	animation-delay: 7.5s;
	-ms-animation-delay: 7.5s;
	-webkit-animation-delay: 7.5s;
}
.antiClock span:nth-child(5){
	animation-delay: 10s;
	-ms-animation-delay: 10s;
	-webkit-animation-delay: 10s;
}
/* spinning animation */
@-moz-keyframes anti{
	0% { opacity: 0; }
	5% { opacity: 0; -moz-transform: rotateX(180deg); }
	10% { opacity: 1; -moz-transform: translateY(0px); }
	25% { opacity: 1; -moz-transform: translateY(0px); }
	30% { opacity: 0; -moz-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0;}
}
@-webkit-keyframes anti{
	0% { opacity: 0; }
	5% { opacity: 0; -webkit-transform: rotate(180deg); }
	10% { opacity: 1; -webkit-transform: translateY(0px); }
	25% { opacity: 1; -webkit-transform: translateY(0px); }
	30% { opacity: 0; -webkit-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}
@-ms-keyframes anti{
	0% { opacity: 0; }
	5% { opacity: 0; -ms-transform: rotate(180deg); }
	10% { opacity: 1; -ms-transform: translateY(0px); }
	25% { opacity: 1; -ms-transform: translateY(0px); }
	30% { opacity: 0; -ms-transform: translateY(0px); }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

/* ARROWS POINTING DOWN INVITING SCROLLING */
.scroll_invite {
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 8%;
  font-family: 'Audiowide';
  font-size: 15px;
  color: #333533;
  background: #e5e5e5;
  padding: 10px;
  margin-left: 1%;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* for smaller screens */
.scroll_invite_small {
  position: fixed;
  right: 0px;
  bottom: 0px;
  font-family: 'Audiowide';
  font-size: 15px;
  color: #333533;
  background: #e5e5e5;
  padding: 10px;
  border-radius: 15px 0 0 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* MY PROJECTS CAROUSELS DISPLAY */
.projects_header {
  font-family: 'Audiowide';
  font-weight: bold;
  font-size: 40px;
  padding: 64px 16px;
  padding-bottom: 0px;
  color: #028090;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #028090;
  -webkit-text-fill-color: transparent;
  border-bottom: 2px solid #028090;
}
.projects_container {
  background: #242423;
}
.projects_container_header {
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: 'Audiowide';
  font-weight: bold;
  color: #e5e5e5;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #e5e5e5;
  -webkit-text-fill-color: transparent;
  border-bottom: 2px solid #e5e5e5;
}
.project_links_container {
  padding-left: 0px;
  padding-right: 0px;
  overflow: visible;
}
/* the carousel cells */
.carouselCell {
  padding: 8px;
  -webkit-transition: -webkit-transform .2s ease-in-out;
          transition:         transform .2s ease-in-out;
}
.carouselCell:hover {
  -webkit-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
.carousel_cell_large {
  width: 33%;
}
.carousel_cell_medium {
  width: 50%;
}
.carousel_cell_small {
  width: 100%;
}
/* links inside carousel cells */
.project_link {
  position: relative;
  display: inline-block;
  width: 90%;
  height: 200px;
  padding: 0px;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.2), 0 -6px 20px 0 rgba(0, 0, 0, 0.19);
}
.project_link .text {
  background: #028090;
  height: 200px;
  padding: 10px;
  font-family: 'Audiowide';
  color: #e5e5e5;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.project_link:hover .text {
  background: #242423;
  color: #028090;
}

/* flickity specific button styling */
.flickity-button {
  background: #242423 !important;
}
.flickity-prev-next-button {
  margin-left: -15px !important;
  margin-right: -15px !important;
  width: 35px !important;
  height: 100px !important;
  border-radius: 5px !important;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.flickity-button-icon {
  fill: #028090 !important;
}


/* ABOUT ME PAGE LINK/INVITE */
.more_about {
  background: #242423;
  padding: 64px 16px;
}
.more_about > a {
  display: inline-block;
  font-family: 'Audiowide';
  font-weight: bold;
  color: #e5e5e5;
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: #e5e5e5;
  text-decoration: none;
  width: auto;
}
.more_about > a:hover {
  background: #333533;
  color: #028090;
  -webkit-text-stroke-color: #028090;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}