/* ========================================================== */
/*                 LINKED HTML: INDEX, SITEMAP,               */
/*                                                            */
/* ========================================================== */
* { box-sizing: border-box; }/*also applies to all*/

body {margin: 0;}/* removes extra space around all content */
/* -- highlight/selection color--*/
::selection {
color: #213629;
background: #6bc3a1;
}

/* ========================================================== */
/*                          TEXT EDITS                        */
/* ========================================================== */
/* --- ▪▪▪ LINK COLOR ▪▪▪ ---  */
a {color: #0e85ec;
text-decoration:none;}/*removes hyperlink underline*/
a:hover {color:#f79839;}

/* --- ▪▪▪ HORIOZONTAL RULE / DIVIDER ▪▪▪ --- */
hr {border-style: dashed; 
border-width: 1px;
color:#000;}


/* ========================================================== */
/*                         CUSTOM FONTS                       */
/* ========================================================== */

/* --- ▪▪▪ ONLILIGHT ▪▪▪ --- */
@font-face {                  
font-family: 'utdr';
src: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/fonts/PixelOperatorMono-Bold.ttf);
font-weight: normal;
font-style: normal;
} 

@font-face {                  
font-family: 'texty';
src: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/fonts/OnliLight.ttf);
font-weight: normal;
font-style: normal;
} 

/* --- ▪▪▪ MAIKYTRETRO (username font) ▪▪▪ --- */
@font-face {                  
font-family: 'wackyland';
src: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/fonts/WackyLand-2vj6l.ttf);
font-weight: normal;
font-style: normal;
} 

/* --- ▪▪▪ OPEN DYSLEXIC ▪▪▪ --- */
@font-face {font-family:'dyslexia';
src: url(https://file.garden/Zdp-ila93Ho4OeVL/%F0%9F%8F%99%EF%B8%8F%20neocities/fonts/OpenDyslexic-Regular.otf);
font-weight: normal;
font-style: normal;
}


/* ========================================================== */
/*                     ANIMATIONS & OVERLAYS                  */
/* ========================================================== */
 /* --- ▪▪▪ CRT OVERLAY ▪▪▪ --- */
.crt::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
z-index: 1001; /* layers crt effect over everything/navmenu */
background-size: 100% 2px, 3px 100%;
pointer-events: none;
} 

/* ---  ▪▪▪ LINK FLOAT ON HOVER ANIMATION ▪▪▪ --- */
.float {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.float:hover, .float:focus, .float:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
}

/* ---  ▪▪▪ FLOAT CONSISTENT ANIMATION ▪▪▪ --- */
/* --- ▪▪▪ TOOLTIP & WELCOME FLOAT ANIMATION ▪▪▪ --- */
.tooltip, .float2 {
position: relative;
animation: float 3s ease-in-out infinite;
}

@keyframes float {
 0% {transform: translateY(0);}
50% {transform: translateY(-2px);}
100% {transform: translateY(0);}
}

/* --- ▪▪▪ "WELCOME TO MY WEBSITE" ANIMATION ▪▪▪ --- */
.typewriter {
	width: 21ch;/*how far text cursor will go*/
	white-space: nowrap;
	overflow: hidden;
	border-right: 4px solid #212121;
	animation: cursor 1s step-start infinite, 
    text 4s steps(18) alternate infinite;/*text [number]s is speed*/
}
@keyframes cursor {
	0%, 100% { 
    border-color: #808080; /*text cursor color*/
  }
}
@keyframes text {
	0% { 
    width: 0; 
  }
	100% { 
    width: 21ch; /*how far text cursor will go*/
  }
}

/* ========================================================== */
/*                     EZGALLERY / LIGHTBOX                   */
/* ========================================================== */
/***
EZ Gallery by netfriend - https://netfriend.neocities.org/ez-gallery/
Released under the Unlicense - https://unlicense.org/
***/
.ezgallery.montage { 
  display: flex;
  flex-flow: row wrap;
  align-items: left;
  justify-content: left; /* this changes the alignment of images */
  padding-left:15px; /* remove if you dont want any padding */
  width: 100%;
  height:auto;
}

.ezgallery.montage img {
  flex: auto;
  margin: 0 5px 5px 0;
  object-fit: contain;
  object-position: bottom;
}

.ezgallery.horizontal { 
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-auto-rows: minmax(100px, auto);
}

.ezgallery.horizontal a {
  text-align: center;
}

.ezgallery.horizontal img {
  text-align: center;
  vertical-align: middle;
  margin: 0 5px 5px 0;
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  object-position: bottom;
}