*{
	margin: 0;
	padding: 0;
}
/* hide iframe scrollbars: https://dev.to/logrocket/how-to-use-css-to-hide-scrollbars-without-impacting-scrolling-2eba */
:root::-webkit-scrollbar{
  display: none;
}
:root {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@font-face {
    font-family: 'oiregular';
    src: url(../media/fonts/oi-regular-webfont.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dongle';
    src: url(../media/fonts/Dongle-Regular.woff2) format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dongle';
    src: url(../media/fonts/Dongle-Bold.woff2) format('woff2');
    font-weight: bold;
    font-style: normal;
}



/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////////////Home Page Section//////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/



body{
	background-color: transparent;
    display:flex;
    align-items: center;
	flex-direction: column;
    width: 100%;
	gap:10px;
	font-family: dongle;
	font-weight: normal;
	line-height: 1em;
}

h2{
	font-size: clamp(1.25rem, 6vw, 2.1875rem);
	margin: 0.3em 0.3em 0;
    font-family: dongle;
    font-weight: bold;
	filter: url(#wiggle-med);
	line-height:.5em;
}

#welcome p, #about-me p{
    font-family: dongle;
    font-weight: normal;
    font-size: 1.5em;
    margin-top: .5em;
	filter: url(#wiggle-sml);

}

section{
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes kalinamation {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}
#kalina-homeface{
    max-width: 75px;
    height:auto;
    
}
#kalina-homeface.is-animating{ /*the javascript runs the animation on hover*/
    animation: kalinamation 1s cubic-bezier(0.5, 0, 0.75, 0) 0s  1 reverse forwards;
}



/*///////////////////////////////////////////////////////////////////////////////////
/////////////////////////////Photography Page Styles////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#gallery{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#gallery #photos{
    display: flex;
    align-items: flex-start;
    gap: .5em;
    max-width: 100%;
    width: 100%;
    list-style: none;
}
#gallery #photos .photo-col{
    display: flex;
    flex-direction: column;
    gap: .5em;
    flex: 1 1 0;
    min-width: 0;
    list-style: none;
}
#gallery #photos .card{
    display: flex;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
}
 
#gallery #photos .card picture{
    display: block;
    line-height: 0;
}
#gallery #photos img{
    width: 100%;
    display: block;
    z-index: 2;
    position: relative;
}
#gallery #loadmore{
    color: black;
    background: #93cbed;
    border: 4px solid black;
    margin: 0;
    font-size: 1.2rem;
    padding: 12px 27px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.2s ease;

    filter: url(#wiggle-med);
}
#gallery #loadmore:hover{
    background: #5c9ec8;
}
#gallery #loadmore.disabled{
    opacity: 0.6;
    pointer-events: none;
}
 
/*Lightbox Section. only used as fallback*/
.lightbox{
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    background: rgba(0, 0, 0, 0.65);
    transition: opacity 0.2s ease;
    padding: 20px;
}
.lightbox.show{
    visibility: visible;
    opacity: 1;
}
.lightbox-figure{
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
}
.lightbox-figure img{
    max-width: 90vw;
    max-height: 75vh;
    object-fit: contain;
}
.lightbox-figure figcaption{
    color: white;
    text-align: center;
    margin-top: 12px;
    max-width: 90vw;
}
.lightbox-title{
    font-size: 1.4rem;
}
.lightbox-description{
    font-size: 1.2rem;
    opacity: 0.85;
    margin-top: 2px;
}



/*//////////////////////////////////////////////////////////////////////////////////
/////////////////////////////Guestbook Page Styles//////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/
#guestbookbody{
    width: calc(100% - 1em);
    margin-left: .5em;
    margin-right: .5em;
    overflow-x: hidden;
}
#top{
    display: flex;
    width:100%;
    justify-content: space-between;
    margin-bottom: 0;

}
#personalinfo{
    display:flex;
    justify-content: left;
    gap:30px;
    width: 35%;
}
#guestbooks___guestbook-form-container{
    width: 100%;
    filter: url(#wiggle-sml);
}
#guestbooks___guestbook-form-container,
#guestbooks___guestbook-form {
    width: 100%;
    max-width: 100%;
    display:flex;
    flex-direction: column;
    gap:5px;

}

.guestbooks___input-container{
    min-width: 0;
}
.guestbooks___input-container input[type="text"],
.guestbooks___input-container input[type="url"]{
    width: 100% ;
    border: 4px solid black;
    border-radius: 10px;
    font-family: dongle;
    padding-left: .5em;
    padding-right: 1em;
    background-color: transparent;
    min-width: 0;
    height: 1.5em;
}
.guestbooks___input-container textarea {
    width: 80% ;
    box-sizing: border-box;
    border: 4px solid black;
    border-radius: 10px;
    font-family: dongle;
    padding-left: 5px;
    background-color: transparent;
}
.guestbooks___guestbook-form-container{
    width: 100%;
}
.guestbooks___input-container input{
    background-color: transparent;
    height: 2em;
    
}

#submitbutton{
    background-color: #93cbed;
    border: 4px solid black;
    font-family: dongle;
    border-radius: 10px;
    margin-top: 0;
    min-width: none;
    padding-left: 1em;
    padding-right: 1em;
}
#submitbutton:hover{
    cursor: pointer;
}

#guestbooks___guestbook-made-with{
    display:flex;
    justify-content: right;
    width:100%;
    padding: 0 1em ;
    filter: url(#wiggle-sml);
}
.guestbook-message-reply {
  margin-left: 2.5rem;
  padding-left: 1rem;
  opacity: 0.95;
}

.guestbook-message-reply blockquote {
  margin: 0;
  padding-left: 0;
  border-left: none;
}

blockquote{
    filter: url(#wiggle-sml);
}




/*///////////////////////////////////////////////////////////////////////////////////
/////////////////////////////Links Page Styles//////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/

#buttons{
    display:flex;
    gap:2px;
    flex-wrap: wrap;
    justify-content: center;
    z-index: +1;
}
#buttons a{
    width: calc(25% - 6px); /*set width to fit 4 buttons per row. compensating for gap between butotns*/
}

#buttons img{
    width:100%;
    height: auto;
}

#youtubevids{
    display:flex;
    gap: 2px;
    flex-wrap: wrap;
    justify-content: center;
    z-index: +1;
}
#youtubevids a{
    display:inline-block;
    width: calc(25vw - 6px); /*determin the width using the view width 25% to fit 4 across (minus margin for the gap)*/
    height: calc((25vw - 6px) * 0.5625); /*calculate the height, stating by re-calculating the width (instead of using a variable), then multiply it by the ratio of 16x9 to get consistent aspect ratio*/
    overflow: hidden;
}
#youtubevids img{
    width: 25vw;
    height: auto;
    margin-top: calc((((-25vw - 6px) * 0.166666666667) / 2) - 1px); /* this formula uses the view width to calculate the images crop offset (where the crop sits vertically on the larger image) based on the foluma used to calculate the images width. i use the diffrence in image aspect ratios (4x3 is exactly 1/3rd taller than 16x9 at the same width). i cut that in half and set that as a negative top margin to get the crop positioned perfectly with the image(i also subract another pixel to make up for the image not being perfectly centered vertically in the source image from youtube)*/
}

#coolprojectlinks{
    z-index: +1;
}


#coolprojectlinks a{
    display:block;
    text-align: center;
}



/*//////////////////////////////////////////////////////////////////////////////////
////////////////////////////Posts Page Styles///////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////*/
nav{
    width:98%;
    margin-right: auto;
    margin-left: auto;
}
nav ul{
	display: flex;
	justify-content:center;
	max-width:100%;
    min-width: fit-content;
	list-style-type:none;
	margin:10px auto;
	height:35px;
	gap:10px;
    text-wrap: nowrap;
}

nav li{
	position:relative;
	font-family:dongle;
	font-weight:bold;
	width:100%;
	font-size: clamp(1rem, 5vw, 1.875rem);
	isolation:isolate;
}

nav a{
	display:flex;
	width:100%;
	height:100%;
	text-decoration:none;
	color:black;
	align-items:center;
	justify-content:center;
	padding-top:.2em;
    position: relative;
    filter: url(#wiggle-lrg);
}

nav a::before{
	content: "";
	position: absolute;
  /* inset: 0 stretches this pseudo-element to match the exact size of the parent box */
	inset: 0; 
  /* border and radius here instead of the parent */
	border: 4px solid black;
	border-radius: 10px;
	background-color:#93cbed;
  /* Apply the filter ONLY to this layer */
	filter: url(#wiggle-sml);
  /* Push it behind the text */
	z-index: -1;
  /* Prevents the invisible layer from accidentally blocking clicks*/
	pointer-events: none; 
}

/*/////////////////////////////////////////////////////////////////////////////////
///////////////////////////Reviews Section/////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////*/
#feed, #projects, #posts, #project-updates, #post-detail{
    width: 100%;
    max-width: 700px;
}

.reviewhead{
    display:flex;
    position:relative;
    justify-content:center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    margin: 10px auto;
    margin-top:1.5em;
}
.reviewhead nav{
    position: absolute;
    left: 0;
}


.reviewnav{
    width:100%;
    
}
.reviewnav ul{
	display: flex;
	justify-content:center;
	max-width:100%;
	list-style-type:none;
	margin:5px 0 6px 0;
	height:35px;
	gap:10px;
}
.reviewnav a{
	display:flex;
	width:fit-content;
	height:100%;
	text-decoration:none;
	color:black;
	align-items:center;
	justify-content:center;
	padding: .2em .6em 0;
    filter: url(#wiggle-lrg);
}


.reviewcard{
    width: 100%;
    position: relative;
    display: flex;
    height: 7em;
    flex-direction: row;
    flex-wrap: nowrap;
	text-decoration:none;
	color:black;
    font-size: clamp(1rem, 4vw, 1.8125rem);
    margin-bottom: 10px;
}
.reviewcard::before{
    content: "";
	position: absolute;
	inset: 0; /*stretces this pseudo element to match the exact size of the parent box*/
	border: 4px solid black;
	border-radius: 10px;
	filter: url(#wiggle-sml); /*apply the filter only to this layer */
	z-index: -1; /*push it behind the text */
	pointer-events: none; /*prevents the invisible layer from accidentally blocking clicks*/
}
.coverimg{
    max-height: 90%;
    max-width: 20%;
    margin: auto 1.7%;
    border-radius: 5px;
}
.reviewtext{
    display:flex;
    flex-direction: column;
    align-items: center;
    min-width:0;
    flex: 1;
    overflow: hidden;
    font-size: 1em;
}
.reviewtop{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    filter: url(#wiggle-sml);
}
.reviewtop h3{
    text-align: center;
    margin-top: .4em;
    font-size: 2em;
    line-height: .5em;
}
.reviewtop .rating{
    display:inline;
    position: absolute;
    left: 0;
    margin-top: .6em;
    font-size: 1.5em;
}
.reviewtop .cattag{
    display:inline;
    position: absolute;
    right: 0;
    margin-top: .6em;
    margin-right: 1.7%;
    font-size: 1em;
}
.summary {
    width: 95%;
    margin: 0.5em 0;
    font-size: 1em;
    display: -webkit-box;
    line-clamp: 7;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: .65;
    max-height: calc(.64em * 7);
    filter: url(#wiggle-sml);
}

.reviewtop .postdate{
    display: inline;
    position: absolute;
    left: 0;
    margin-top: .6em;
    margin-left: 1.7%;
    font-size: 1em;
}


#review-detail{
    width: 90%;
    max-width: 700px;
    margin: 0 auto 2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: clamp(1.125rem, 4.5vw, 1.75rem);
}
#review-detail .single-cover{
    width: 55%;
    max-width: 300px;
    height: auto;
    border: 4px solid black;
    border-radius: 10px;
    margin-bottom: .3em;
    filter: url(#wiggle-sml);
}
#review-detail .single-rating{
    background-color: #93cbed;
    border: 4px solid black;
    border-radius: 10px;
    padding: 0 .7em;
    font-size: 1.3em;
    line-height: 1.6em;
    margin-bottom: .2em;
    filter: url(#wiggle-sml);
}
#review-detail .single-date{
    opacity: 0.65;
    font-weight: bold;
    font-size: .9em;
    margin-bottom: .6em;
}
#review-detail .single-summary{
    font-style: italic;
    text-align: center;
    border-left: 4px solid black;
    padding-left: .6em;
    margin: 0 0 1em;
    filter: url(#wiggle-sml);
}
#review-detail .single-photos{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
    margin-bottom: 1em;
}
#review-detail .single-photos:empty{
    display: none;
}
#review-detail .single-photo{
    max-width: 45%;
    border: 4px solid black;
    border-radius: 10px;
}
#review-detail .single-body{
    width: 100%;
    text-align: left;
}
#review-detail .single-body p{
    margin-bottom: 1em;
}
#review-detail .single-body img{
    max-width: 100%;
    border-radius: 10px;
    margin: .5em 0;
}


/*single "other" post page (instagram-style layout)*/
#post-detail{
    width: 92%;
    max-width: 470px;
    margin: 0 auto 2em;
    border: 4px solid black;
    border-radius: 12px;
    overflow: hidden;
    filter: url(#wiggle-sml);
}
#post-detail .single-cover{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-bottom: 4px solid black;
}
#post-detail .single-date{
    display: block;
    padding: .5em 1em 0;
    font-size: 1em;
    opacity: .6;
    font-weight: bold;
}
#post-detail .single-photos{
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: .6em 1em 0;
    scroll-snap-type: x mandatory;
}
#post-detail .single-photos:empty{
    display: none;
}
#post-detail .single-photo{
    flex: 0 0 80%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 3px solid black;
    border-radius: 8px;
    scroll-snap-align: center;
}
#post-detail .single-body{
    padding: .5em 1em 1em;
    font-size: 1.3em;
    text-align: left;
}
#post-detail .single-body p{
    margin-bottom: .6em;
}
#post-detail .single-body img{
    max-width: 100%;
    border-radius: 10px;
    margin: .5em 0;
    filter:none;
}


/*Projescts*/
#project-title{
    font-size: 2.5em;
    filter: url(#wiggle-sml);
    text-align: center;
}
#project-summary{
    font-size: clamp(1.125rem, 4.5vw, 2rem);
    filter: url(#wiggle-sml);
}
.update-body pre {
  background-color: #1e1e1e;
  color: #cccccc;
  padding: 1.25rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
}

.update-body pre code {
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.875rem;
  line-height: 1.5;
  background: transparent;
  padding: 0;
}

.update-body p code {
  background-color: #f3f4f6;
  color: #eb5757;
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 0.4em;
}
.update-post{
  width:90%;
  margin: 0 auto 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid black;
  text-align:left;
  font-size: clamp(1.125rem, 4.5vw, 2rem);
}
.update-date{
  font-weight:bold;
  opacity:0.7;
  filter: url(#wiggle-sml);
}
#project-updates p{
    filter: url(#wiggle-sml);
}
.update-photos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 10px 0;
}
.update-photo{
  max-width:45%;
  border:4px solid black;
  border-radius:10px;
}


/*
Homelab Section
*/

/*sorry if this indented layout is a mess, its currently 12:09AM and i have smoked a bit of weed*/

#homelab {
    width: 95%;
    max-width: 900px;
    font-size: 1.6em;
    text-align: left;
    align-items: flex-start;
    margin-bottom: 2em;
}

#homelab dt {
    font-weight: bold;
    margin-top: 0.8em;
    font-size: 1.2em;
}

#homelab p {
    margin-bottom: 0.5em;
}

#homelab dd {
    margin-inline-start: 1.5rem;
    margin-bottom: 0.5rem;
}

#homelab dl {
    margin-inline-start: 0;
    margin-block-start: 0.5rem;
    border-inline-start: 4px solid black;
    padding-inline-start: 1rem;
    filter: url(#wiggle-sml);
}

#homelab img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-top: 0.5rem;
    border-radius: 10px;
}