/*
Theme Name: Not So Generic
Theme URI: https://generic.tools/
Author: Sarah
Description: Built off Generic
Tags: accessibility-ready, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready, blog, e-commerce, portfolio
Version: 2.0.1
Requires at least: 5.2
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: generic
Generic WordPress Theme © 2015-2024 GenericTools
Generic is distributed under the terms of the GNU GPL
*/
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Fonts */
@font-face {
    font-family: 'Feogra';
    src: url('https://www.sarahdesigns.ca/wp-content/uploads/2024/12/feogra-display-webfont.woff2') format('woff2'),
         url('https://www.sarahdesigns.ca/wp-content/uploads/2024/12/feogra-display-webfont.woff') format('woff'),
         url('https://www.sarahdesigns.ca/wp-content/uploads/2024/12/Feogra-Display.otf') format('opentype');
	font-display: swap;
}

@font-face {
   font-family: 'Lekton';
   src: url(https://www.sarahdesigns.ca/wp-includes/Lekton-Regular.ttf);
	 font-weight: 400;
  font-style: normal;
	font-display: swap;
}

@font-face {
   font-family: 'Lekton';
   src: url(https://www.sarahdesigns.ca/wp-includes/Lekton-Bold.ttf);
	 font-weight: 700;
  font-style: normal;
}
@font-face {
   font-family: 'Lekton';
   src: url(https://www.sarahdesigns.ca/wp-includes/Lekton-Italic.ttf);
	 font-weight: 400;
  font-style: italic;
}

/* Colours */
:root {
  --blue: #01a3cf;
  --blue-highlight: #3dbbc9;
  --green: #75eba2;
  --pink: #cb417a;
  --yellow: #e9d01b;
  --white: #fefcff;
  --black: #030303;
  --grey: #7e7e7e;
  --darkgrey: #313030;
  --filterblue:saturate(100%) contrast(100%) invert(5%) sepia(159%) saturate(300%) hue-rotate(168deg) brightness(80%) contrast(150%);
  --filterpurple:saturate(100%) contrast(150%) invert(0%) sepia(100%) saturate(600%) hue-rotate(204deg) brightness(86%);
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;transition:all 0.35s ease}
html,body { position:relative; overflow-x: hidden;}
body{font-family:Lekton;font-size:20px;color:var(--blue); line-height:normal;word-break: normal; background:var(--black); background-image:url("https://www.sarahdesigns.ca/wp-content/uploads/2025/04/background-large.avif"); overscroll-behavior: none; min-height: 100vh;}

.scroll-container {
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: nowrap;
}
.scroll-container .panel, .scroll-container section (    display: block;
    margin: auto;
    width: 100%;)
article.category-blog .entry-content {max-width: 800px!important;  margin: 0px 5% !important;}
h1, h2, h3, h4, h5, h6{font-weight:bold;margin-bottom:30px}
#footer h5 {color:var(--white);}
h2, h3, h4, h6{margin-top:40px}
h1{font-size:35px}
h1, h1#fname, h1#lname {font-family: feogra;
    margin: 0px;
    padding: 0px;
text-align:center;}
h1#fname, h1#lname  {white-space: nowrap;}
h1#fname {font-size: 10vw; margin-bottom: -4%;}
h1#lname {font-size: 11.6vw; color:var(--black); text-shadow: -2px -2px 0 var(--blue), 2px -2px 0 var(--blue), -2px 2px 0 var(--blue), 2px 2px 0 var(--blue);}
.gradient-bg {
	background-image: linear-gradient(0.3turn, #c1c1c100, #60a7d147, #7d86c299, #f4eeec00); 
	border-bottom: 1px solid black;}
h1.page-heading, h1.entry-title {    font-size: 8rem;
    padding: -3px 50px 10px 50px;
    position: relative;
    top: -205px;
    margin-bottom: -150px;
    width: 100%;
    left: 5%;
    z-index: 1;
    text-align: left;
    color: var(--blue);
    text-shadow: 26px 25px 40px black;
}
h1.page-heading.blog-title, h1.entry-title.blog-title {font-size: 6rem; padding:90px 50px 10px 50px; position: relative;
    top: 0px;
    margin-bottom: 0px; }
.post-template-default h1.entry-title {text-align: left;}

h2{font-size:30px}
h1.wp-block-heading, h2.wp-block-heading {
	font-family:Lekton;
    font-size: 16px;
    color: #fff;
    background: #000;
    display: block;
    padding: 5px 15vw;
    text-align: center;
    margin: 40px auto;
    width: fit-content; 
	max-width:600px;
	z-index:10;}
.wp-block-heading.sml {padding: 5px 5vw;}
.wp-block-heading.sml:after {padding: 0px 5vw; left:-4vw;}
h1.wp-block-heading:after, h2.wp-block-heading:after {
    content: "";
    width: 70%;
    padding: 0px 15vw;
    background: var(--blue);
    height: 40px;
    display: block;
    margin: 0px auto -40px auto;
    position: relative;
    top: -33px;
    left: -10vw;
     transform: rotate(-3deg);
    z-index: -1;
    text-align: center;
}

h3{font-size:26px; font-family: feogra; margin:40px 0px; color:#606060;     line-height: 1.5;}
.feogra {font-family: feogra;}
.block {
    display: block;
    margin: 6rem auto;
}
section {
    display: block;
   margin: 60px auto;
    width: 95%;
}

h4{font-size: 1em;
    font-weight: 700;
    border-top: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
    padding: 10px 11px;
    position: relative;
    left: -11px;
    width: calc(100% + 11px);}
h5{font-size:1em; font-weight:800}
h6{font-size:0.8em}
p{margin:0px 0; padding:20px 0px;}
.page #content p, .single-post #content p{font-size:18px;line-height:145%}
* p:last-of-type, #sidebar .widget-container:last-child{margin-bottom:0}
a{color:var(--blue); text-decoration:none;}
a:hover, a:focus{text-decoration:none; color:#FF234B; font-weight:800;}
a[aria-current="page"] {
    font-weight: bold;
	color:var(--green);
} 


a.light-grey{color:#a0a0a0;}
strong{font-weight:bold}
em{font-style:italic}
pre{overflow-x:auto;white-space:pre-wrap}
pre, code{font-family:'courier new',courier,serif}
hr{height:1px;border:0;margin:30px 0;background:#ccc}
blockquote{padding:15px;border-left:4px solid #ccc;margin:30px 0}
blockquote p:first-of-type{margin-top:0}
.widget-container ul, .comment-body ul, .entry-content ol, .widget-container ol, .comment-body ol{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:30px 0 30px 60px}
.widget-container ul ul, .comment-body ul ul, .entry-content ol ol, .widget-container ol ol, .comment-body ol ol, /*.entry-content ul ol*/, .widget-container ul ol, .comment-body ul ol, .entry-content ol ul, .widget-container ol ul, .comment-body ol ul{margin-top:0;margin-bottom:0}
.widget-container ol, .comment-body ol{list-style:decimal outside;list-style-type:decimal-leading-zero;margin-left:70px}
.widget-container li, .comment-body li{line-height:125%;margin:20px 0}
input, textarea{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;font-size:1em;padding:15px;border:0;border-bottom:1px solid transparent;outline:0;margin-top:10px;background:#f6f6f6}
input:focus, textarea:focus{border-bottom:1px solid #007acc}
input[type="submit"], button, .button{display:inline-block;font-family:lekton,serif;font-size:1em;text-align:center;text-decoration:none;padding:15px 25px;border:0;background:#007acc;cursor:pointer}
input[type="submit"]:hover, input[type="submit"]:focus, button:hover, button:focus, .button:hover, .button:focus{opacity:0.8}
a img, input[type="image"], iframe{border:0}
/*a img:hover, a:focus img, a svg:hover, a:focus svg{opacity:0.8}
table{width:100%;margin:30px 0}*/
img, img[src$=".svg"], svg{display:inline-block;line-height:normal;vertical-align:middle}
img, video, audio, table, select, textarea{max-width:100%; height:auto}

#wrapper{display:flex;flex-direction:column;max-width:100%;min-height:100vh;margin:0 auto;position: relative;}
#header {padding:0%; margin:0%; display:Table; /*height: 200px;*/}
.home #header, .category #header {height:200px;}
#container {padding:40px 0% 0px 0%}
#footer{padding:40px 5% 0px 5%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.61) 20%, rgba(0, 0, 0, 0.85) 100%); clear:both}
#branding{float:left}
#logo{max-height:100%}
#container{flex:1;}
#content{/*width:75%;padding-right:5%;float:left -- used for the sidebar butfucks up homepage */}
#content.full-width{width:100%;padding-right:0;float:none}
#sidebar{width:25%;float:right}
#footer .flex-container {border-top: 1px solid var(--blue);
border-bottom: 1px solid var(--blue); display:flex; padding: 40px 20px; flex-wrap:wrap;}


#search{float:right}
#search .search-field{width:36px;height:36px;color:transparent;padding:10px;border-color:transparent;margin-top:0;background-color:transparent;background-image:url(images/find-light.png);cursor:pointer}
#search .search-field:focus{width:200px;border-color:#007acc;cursor:text}
.widget-container .search-field{width:100%}
.error404 .entry-content .search-field, .search .entry-content .search-field{width:200px;margin-top:30px}
.error404 .entry-content .search-field, .search .entry-content .search-field, .widget-container .search-field{background-color:#f6f6f6}
.search-field{background:url(images/find.png) no-repeat 98% center / 24px auto}

#site-title h1, #site-title a{display:inline;font-size:40px;font-weight:normal;text-decoration:none;margin-bottom:0}
#site-description, #copyright, #copyright a{color:#8a8a8a}
.single h1.entry-title a{color:#000000;text-decoration:none}
h2.entry-title, h3.widget-title{margin-top:0}
#commentform label{display:block}
#commentform #comment{width:100%;max-width:400px !important;height:auto}
#comments .comment-author{line-height:14px}
#comments .comment-author img{margin-right:5px;float:left}
#comments .comment{margin:20px 10px}
#comments .comment-body{padding:15px}
#comments .odd > .comment-body{background:#f6f6f6}
#comments .comment-body > p{font-size:1em;margin:15px 0 0}
#copyright{text-align:center}
.entry-meta, .archive-meta{margin:30px auto; width:95%;     position: relative;
    top: -20px;}
.entry-footer{clear:both; position:relative; margin: 30px auto; width:95%; }
.entry-meta, .entry-meta a, .entry-footer, .entry-footer a, .comment-meta, .comment-meta a, .comment-author, .comment-author a{font-size:14px;color:var(green);}
.entry-footer .back-to-top {position: absolute; right: 0;}
.entry-footer .back-to-top img {filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(4769%) hue-rotate(199deg) brightness(98%) contrast(96%);}
.entry-footer .back-to-top a:hover img {filter: invert(35%) sepia(51%) saturate(4244%) hue-rotate(333deg) brightness(96%) contrast(90%);}

.sticky{padding-bottom:60px;border-bottom:4px solid var(--blue)}
.bypostauthor{}
.post, .widget-container, .search article{margin-bottom:60px}
.post:last-of-type{margin-bottom:0}
.wp-caption{width:auto !important}
.wp-caption.aligncenter, .wp-caption-text, .gallery-caption{text-align:center}
.wp-block-gallery ul, .wp-block-gallery ul li, .wp-block-gallery ul li:before{content:'';margin:0}
.wp-post-image{display:block;margin-bottom:30px}
.entry-attachment img{display:block;margin:60px auto 30px}
.attachment .entry-caption{text-align:center}
.alignleft{margin:0 30px 30px 0;float:left}
.alignright{margin:0 0 30px 30px;float:right}
.aligncenter{display:block;margin:30px auto;clear:both}
#content p.wp-block-cover-text{}
.nav-links{margin: auto 4%;
    width: 92%; border: 1px solid var(--blue);display:table;}
.nav-links a, #nav-above a{text-decoration: none;
    height: 90px;
    min-width: 250px;
    padding: 40px 20px;
    display: flex;
    box-sizing: border-box;
    align-content: center;
    align-items: center;
    justify-content: center;}
.nav-previous a {border-right: 1px solid var(--blue);}
.nav-next a{border-left: 1px solid var(--blue);}
.nav-links a:hover, #nav-above a:hover {background-color:var(--pink); color:#000;}
#nav-above a{display:block;font-family:tahoma,sans-serif;font-size:50px;color:#767676;line-height:0;margin:30px 0 15px}
.nav-previous{text-align:left;float:left; position:relative;}
.nav-previous:before, .nav-next:before {position: absolute; bottom: 32px; background-blend-mode: darken; font-size: 12px; font-weight: 800;text-transform: capitalize;width: 90px;text-align: center; color:#5a5a5a;}
.nav-previous:before {
    content: 'previous';
    transform: rotate(90deg);
    right: -58px;
}
.nav-next:before {
    content: 'next';
    transform: rotate(-90deg);
    left: -58px;
}
.nav-previous .meta-nav {padding: 0 10px 0}
.nav-next{text-align:right;float:right; position:relative;}
.nav-next .meta-nav {padding: 0 0 0 10px;}


.note{display:block;font-size:14px;padding:20px;margin:30px 0}
.icon{display:inline-block;width:32px;height:32px;line-height:normal;vertical-align:middle;mask-size:cover;background-color:currentColor}
.symbol{font-family:"Times","Times New Roman","serif","sans-serif",system-ui,-apple-system,BlinkMacSystemFont,"Avenir Next","Avenir","Segoe UI","Lucida Grande","Helvetica Neue","Helvetica","Fira Sans","Roboto","Noto","Droid Sans","Cantarell","Oxygen","Ubuntu","Franklin Gothic Medium","Century Gothic","Liberation Sans",sans-serif,"EmojiSymbols"}

.round{border-radius:100px}
.circle{border-radius:50%}


.white, .white *, .yellow, .yellow *{color:#000}
.blue{background-color:#007acc !important}
.blue-dark{background-color:#1c78b5 !important}
.green{background-color:#91da29 !important}
.green-dark{background-color:#5d8c1a !important}
.orange{background-color:#f98733 !important}
.purple{background-color:#bb6cf8 !important}
.red{background-color:#ef645d !important}
.yellow{background-color:#f8f658 !important}
.black{background-color:#4a4a45 !important}
.lighter{background-color:rgba(255,255,255,0.05)}
.darker{background-color:rgba(0,0,0,0.05)}
.overlay:before{position:fixed;top:0;left:0;width:100%;height:100%;content:'';background:rgba(0,0,0,0.5);z-index:0}
.bold {font-weight:800;}
.layer{width:100%;padding:5%}
.layer-inner{max-width:800px;margin:0 auto}

.box, .box-2, .box-3, .box-4, .box-5, .box-6, .box-1-3, .box-2-3{display:inline-block;width:100%;padding:5%;vertical-align:top;float:left}
.box-2{width:50%}
.box-3, .box-1-3{width:33.3333333%}
.box-4{width:25%}
.box-5{width:20%}
.box-6{width:16.6666667%}
.box-2-3{width:66.6666666%}

.left{text-align:left}
.center{text-align:center}
.right{text-align:right}
.float-left{float:left}
.float-right{float:right}
.clear{clear:both}
.clear-left{clear:left}
.clear-right{clear:right}
.clear-float:after, #header:after, #container:after, .boxes:after{display:table;content:'';clear:both}
.offset{padding-top:100px;margin-top:-100px}
.spacer{display:inline-block;width:25px}
.mobile, .desktop{display:none}

/* Header */
#home img {position:relative; top:-1px; padding-right:4px; height:15px; filter: brightness(0) saturate(100%) invert(64%) sepia(76%) saturate(504%) hue-rotate(169deg) brightness(81%) contrast(95%);}
#home a:hover img {filter: invert(35%) sepia(51%) saturate(4244%) hue-rotate(333deg) brightness(96%) contrast(90%);}

header {width:100%;}
div.colorbar {background: var(--blue);
    width: 100%;
    height: 7px;
    position: absolute;
    top: 0px;
    margin-bottom: 10px;
padding: 0;}
header nav { display: flex;
    padding: 20px 2%;
    z-index: 9999;
    position: absolute;
    width: 100%;
    margin-bottom: 30px;
}
header nav #home {flex:85%; text-align:left;}
header nav #menu-bar {float: left;
    border-left: 2px solid var(--green);
    height: 124px;
    position: absolute;
    top: 0px;
    right: 2%;
    padding: 0;
    margin: 0;
z-index:999;}

#menu-bar .menu-btn {float: right;
    transform: rotate(90deg);
    margin: 10px 0 0 0;
    font-weight: 800;
    position: relative;
    top: 16px;
	font-weight:800;
}

#menu-bar:hover {cursor:pointer; color:var(--white); }
.menu-primary-menu-container { padding: 20px 20px 20px 20px;}
#footer-4 .menu-primary-menu-container {text-align:right!important;}

/* The Duck */
#duck-overlay {position: absolute; z-index: 999; top: 100px;}
div#duck2 {
    width: 70%;
    margin: auto;
}
#duck2 model-viewer {
       width: 93%;
    height: 600px;
    position: relative;
    top: -260px;
    margin: auto auto -330px auto;
}

.grid-image {    position: relative;
    position: relative;
    top: -439px;
    z-index: -1;
    max-width: 1000px;
    width: 90%;
    height: 500px;
    margin: auto;
    margin-bottom: -420px;
    outline: 6px solid var(--blue);
    background: url(https://www.sarahdesigns.ca/wp-content/uploads/2024/12/grid.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-x: 50%;
	filter: invert(42%) sepia(93%) saturate(1130%) hue-rotate(519deg) brightness(84%) contrast(119%);}

#duck-overlay h2 span {position:Relative; z-index:3;}
#duck-overlay h2 {
    font-size: 0.8em;
    color: #fff;
    background: #000;
    display: block;
    padding: 5px 10px;
    text-align: center;
    margin: 10px auto;
    width: fit-content;
    max-width: 200px;
	height: 30px;
    z-index: 20;
    position: relative;}
#duck-overlay h2:after{     content: "";
    width: auto;
    padding: 0 70px;
    background: #000000;
    height: 32px;
    display: block;
    margin: -32px auto;
    position: relative;
    transform: rotate(-7deg);
    z-index: -10;
}
#duck-overlay a:link,#duck-overlay a:visited {color: #fff; text-decoration: none;}
#duck-overlay a:active,#duck-overlay a:hover {color: #000; text-decoration: none;}


.duckling-1 {position: relative; top: 48px; left: 66vw;}
.duckling-2 {position: relative; top: 151px; left: 66vw;}
.duckling-3 {position: relative; top: 15px; left: 17vw;}
.duckling-4 {position: relative; top: 129px;left: 27vw;}

#duck1 {
	display:none;
	text-align: center;
    width: 70%;
    margin: -10vh auto -20px auto;
    max-width: 450px;
position:relative; top:-50px; margin-bottom:-50px;
  animation: rotateDuck 15s linear infinite; /* Animation over 10s, linear easing, infinite loop */
  filter: drop-shadow(3px 3px 40px #141313b5);
}

/* Hover effect */
#duck-overlay div h2:hover,
#duck-overlay div h2:hover:after {
  cursor: pointer;
  background: #FF234B; /* Change background color */
}

#duck-overlay:hover ~ #duck {
  animation-play-state: paused; /* Pause the animation */
}

@keyframes rotateDuck {
  from {
    transform: rotate(0deg); /* Start at 0 degrees */
  }
  to {
    transform: rotate(360deg); /* End at 180 degrees */
  }
}

/* Marquee */
.marquee-block {
overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    margin: 2rem auto;
    background:var(--blue);
    color: var(--black);
	font-size:1.3em;
    padding: 5px;
}

.marquee-content {
  display: inline-block;
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(-33.33%);
  }
  to {
    transform: translateX(0%);
  }
}

.subheader-block {margin:0px auto 20px auto; }
.left-line {
    left: -15%;
}

.right-line {
    right: -15%;
}
.line {
    position: absolute;
    width: 15%;
    height: 1px;
    background-color: black;
    top: 13px;
}
/* Color Picker */
span.color-picker {
    cursor: pointer;
	padding: 5px 10px;}
span.color-picker:hover, span.color-picker.selected{background: var(--green);
    color: var(--black);
    border-radius: 5px;}
div.color-picker-ui {
    position: relative;
    top: 0;
    left: 0px;
    border: 2px solid #94e8a8;
    max-width: 98%;
    backdrop-filter: blur(4px);
    background: #00000075;
    filter: drop-shadow(8px 15px 8px #000);
	transition: all .5s ease-in-out;
	z-index:20}

div.color-picker-ui li {
    display: inline-block;
    font-size: 1.4em;
    margin: 0px 15px 0px 15px;
    padding: 10px;
	cursor: pointer;
}

div.color-picker-ui li:hover {transform: rotate(15deg);}

div.color-picker-ui li.select-pixel{ color:#fefcff; }
div.color-picker-ui li.select-green{ color: #75eba2; }
div.color-picker-ui li.select-pink{ color: #cb417a; }
div.color-picker-ui li.select-blue{ color: #3dbbc9; }
div.color-picker-ui li.select-switch{ color: #e9d01b; }


/* Blocks */
ul.block  {display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
ul.block .wp-block-post-featured-image {width:100%}
ul.block li.wp-block-post {
    margin: 2rem 0;
    height: 360px;
    background: #000;
    /*border-radius: 20px 0px 20px 0px;*/
    overflow: hidden;
	width:100%;
	border:4px solid var(--blue);
}
section#post-list {    display: block !important;
    margin: 80px auto;}

/* Blog Posts */
article.category-blog {color: var(--white);}
#post-list .taxonomy-category {
    position: relative;
    top: -50px;
    text-align: right;
    padding: 0px 20px;
    color: #ffffff;
    font-weight: 800;
    filter: drop-shadow(1px 1px 3px #141313);
	z-index: 2;
}

#post-list .taxonomy-category a {
    color: #ffffff;
    text-decoration: none;
}
#post-list .taxonomy-category a:after {content: "//"; padding-left:10px;}


#post-list .taxonomy-category {
    position: relative;
    top: -80px;
    text-align: right;
    padding: 0px 8%;
    color: #ffffff;
    font-weight: 800;
    filter: drop-shadow(1px 1px 3px #141313);
    font-size: 0.9em;
}

h2.wp-block-post-title {
    position: relative;
    top: -125px;
    text-align: right;
    color: #fff;
    padding: 0px 8%;
    font-size: 0.9em;
	filter: drop-shadow(1px 1px 3px #141313);
}



@keyframes slidein {
  from {
    transform: translate(-100%, 100%); /* Combine both X and Y transforms */
  }
  to {
    transform: translate(0%, 0%); /* Final position */
  }
}

 li.wp-block-post {filter: drop-shadow(7px 13px 7px #141313BA);
	 overflow:hidden;}
li.wp-block-post:hover {border-bottom: 4px solid var(--blue);}

.wp-block-post-title a{    display: block;
    height: 662px;
    width: 110%;
    position: absolute;
    left: -10%;
    padding: 598px 17px 0 0px;
    top: -599px;}
.wp-block-post-title a:link, .wp-block-post-title a:visited{color:#fff;}
.wp-block-post-title a:active, .wp-block-post-title a:hover{color:var(--blue)}
.wp-block-post-title a:hover {background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 33%, #00000096 63%, rgb(0 0 0 / 94%) 100%);}

/*li.wp-block-post figure:after {content: ""; }
li.wp-block-post:hover figure:after {content: "";
    width: 100%;
    background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 33%, #00000096 63%, rgb(0 0 0 / 94%) 100%);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;}*/
.wp-block-post-title a:after {content: ""; }
.wp-block-post-title a:hover:after {
content: "";
    background: #ea3f51 url(https://www.sarahdesigns.ca/wp-content/uploads/2024/11/Arrow-Down-Right-Sm.svg) no-repeat center center;
    background-size: 60%;
    display: block;
    position: relative;
    width: 50px;
    height: 49px;
    border-radius: 0px 15px 15px 0px;
    top: -50px;
	left:20px;
	animation: slidein 0.4s ease-out forwards;
	}

li.wp-block-post:hover h2.wp-block-post-title{color:var(--blue);}

.short {width:80%;}

/* Page Margins */
.post-item { margin: auto 4%;}


/* Buttons */
.tag-filters {
	border: 1px solid var(--blue);
    padding: 20px 10px 10px 10px;
}

button.tag-filter {
    border: 2px solid rgba(0,0,0,0.0);
    color: var(--blue);
    border-radius: 25px;
    background: none;
	margin-right:10px;
	margin-bottom:10px;
}
button.tag-filter:first-child {margin-right:5px;}
button.tag-filter.active {border: 2px solid var(--blue); background:var(--blue);
	color:var(--black);}
button.tag-filter:hover {
	border: 2px solid var(--blue);
	color:var(--blue);
	background: none;
}

/* Pre-footer BG */
div#container::after {
    background: url(https://www.sarahdesigns.ca/wp-content/uploads/2025/04/png-test-3.avif);
    background-position: bottom;
    background-repeat: no-repeat;
    background-blend-mode: luminosity;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    bottom: 331px;
    z-index: -1;
    opacity: 0.5;
}

/* Footer */
header ol, header ul, footer ol, footer ul{list-style:none}
main ol, main ul {margin:20px;}
#pink-line {background: var(--green);
    width: 100%;
    height: 7px;
    position: absolute;
    bottom: 0px;
			padding: 0;}

footer img, img[src$=".svg"], svg {filter: brightness(0) saturate(100%) invert(64%) sepia(76%) saturate(504%) hue-rotate(169deg) brightness(81%) contrast(95%);}


/* Flexbox grid */
/* Flex Container */
.flex, .flex-container {display: flex;}
.flex-inline {
  display: inline-flex;
}

/* Directions */
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-column {
  flex-direction: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}

/* Alignment */
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.align-stretch {
  align-items: stretch;
}
.align-baseline {
  align-items: baseline;
}

/* Wrapping */
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

/* Grid Container */
.grid {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
	gap: 1.27%; /* Sets spacing between items */
	width:100%;
}
.grid.med {
	width:95%;
	margin:auto;
}
.grid.sml {
	width:80%;
	margin:auto;
}

.grid img {width:100%; }

/* Grid Columns */
.col-1:last-child { flex: 0 0 12.5%; }
.col-2:last-child { flex: 0 0 25%; }
.col-3:last-child { flex: 0 0 33.33%; }
.col-4:last-child { flex: 0 0 50%; }
.col-5:last-child { flex: 0 0 66.6%; }
.col-6:last-child { flex: 0 0 75%; }
.col-7:last-child { flex: 0 0 87.5%; }

.col-1 {
  flex-grow: 0; /* Prevents items from growing */
  flex-shrink: 0; /* Prevents items from shrinking */
  flex-basis: calc(12.5% - 1.27%); /* Subtracts the total gap distributed across columns */
}
.col-2 {
  flex-grow: 2; /* Prevents items from growing */
  flex-shrink: 0; /* Prevents items from shrinking */
  flex-basis: calc(25% - 1.27%); /* Subtracts the total gap distributed across columns */
}
.col-3 {
  flex-grow: 0; /* Prevents items from growing */
  flex-shrink: 0; /* Prevents items from shrinking */
  flex-basis: calc(33.33% - 1.27%); /* Subtracts the total gap distributed across columns */
}
.col-4 {
  flex-grow: 0; /* Prevents items from growing */
  flex-shrink: 0; /* Prevents items from shrinking */
  flex-basis: calc(50% - 1.27%); /* Subtracts the total gap distributed across columns */
}
.col-5 {
  flex-grow: 0; /* Prevents items from growing */
  flex-shrink: 0; /* Prevents items from shrinking */
  flex-basis: calc(66.6% - 1.27%); /* Subtracts the total gap distributed across columns */
}

.col-6 {
  flex-grow: 0; /* Prevents items from growing */
  flex-shrink: 0; /* Prevents items from shrinking */
  flex-basis: calc(75% - 1.27%); /* Subtracts the total gap distributed across columns */
}

.col-7 {
  flex-grow: 0; /* Prevents items from growing */
  flex-shrink: 0; /* Prevents items from shrinking */
  flex-basis: calc(87.5 - 1.27%); /* Subtracts the total gap distributed across columns */
}
.col-8 { flex: 0 0 100%; }




/* Margins */
.m-0 {margin:0}
p.m-0 {margin:0 0 30px 0}
.m-1 { margin: 1.27%; }
.m-2 { margin: 1.27% 0;}
.mt-1 { margin-top: 1.27%; }
.mb-1 { margin-bottom: 1.27%; }

/* Padding */
.p-0 { padding: 0; }
p.p-0 {margin:0 0 20px 0}
.p-1 { padding: 1.27%; }
.pt-1 { padding-top: 1.27%; }
.pb-1 { padding-bottom: 1.27%; }

/* About Ppage */
.about-image {width: 60%;
    margin: auto;
    border-radius: 20px;
    overflow: hidden;}

/* category */
#category-container {margin:0px 0px 60px 0px}
.category #category-container article {position: relative;
    height: 300px;
    overflow: hidden;
	filter: drop-shadow(7px 13px 7px #141313BA); 
	outline: 1px solid #33373b;}
.category #category-container article:hover {top:-2px; }
.category #category-container article:first-child {flex-grow: 0; /* Prevents items from growing */
  flex-shrink: 0; /* Prevents items from shrinking */
  flex-basis: calc(50% - 16px)}
.category #category-container article:nth-child(6n) {flex-grow: 0;  flex-shrink: 0; flex-basis: calc(50% - 1.27%); }
.category #category-container article header {     position: absolute;
    bottom: 0;
    padding: 36px 16px 16px 16px;
    z-index: 10;
    width: 100%;
	background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 4%, #0000008a 49%, #000f1d 100%);}
.category #category-container article .entry-summary a{display: block;
    height: 300px;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 0;
	background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
	filter: var(--filterblue);
}
.category #category-container article .entry-summary a:hover {filter: contrast(140%) invert(0%) sepia(0%) saturate(100%) hue-rotate(0deg) brightness(86%);}
#category-container .entry-meta {
    margin: 0px;
	
}
#category-container .entry-date {    font-size: 1em;
    filter: drop-shadow(1px 1px 3px #141313);
    color: #fff;}
#category-container .entry-title {
    margin: 0px;
	font-size: 1em;
    filter: drop-shadow(1px 1px 3px #141313);
	text-align:right;
}

.category #category-container article a:link, .category #category-container article a:visited{color:#fff;}
.category #category-container article a:active, .category #category-container article a:hover{color:var(--blue);}

/*.category #category-container article .entry-summary a{background: linear-gradient(to bottom, rgb(0 0 0 / 0%) 33%, #00000096 63%, rgb(0 0 0 / 94%) 100%);}*/
.category #category-container article:hover {
   
	border-bottom: 4px solid var(--blue);
}

/* posts page */
.post-template-default .entry-content { width: 80%; margin: auto;}
.post-template-default .entry-content img {width:100%;}
.post-template-default .entry-content .featured-image {width: 120%;
    max-width: 120%;
    position: relative;
    left: -10%;}

.wp-block-post-excerpt__excerpt {padding: 40px 0px;}
.wp-block-button__link {
    color: #fff;
    background-color: #32373c;
    border-radius: 20px 0px;
    box-shadow: none;
    text-decoration: none;
    padding: calc(.667em + 6px) calc(1.333em + 20px);
    font-size: 1.125em;
    margin: 40px 0px;
}

	.post-template-default .entry-meta {
    padding: 20px 0px;
    position: relative;
    top: 0px;
}
	p.post-excerpt {
    font-size: 12px;
    font-family: lekton;
    color: var(--white);
    margin: 0px 0 0 0;
    padding: 15px 50px 50px 50px;
    line-height: normal;
    font-weight: 400;
    width: 70%;
    word-break: normal;
    white-space: normal;
		
}

.entry-title span.hello {
    color: #d2dce6;
	text-shadow: 0px 2px 0 #000, 1px -1px 0 #000, -1px 0px 0 #000, 1px 1px 0 #000;}
	span.hello:nth-child(2) {opacity: 0.6}
	span.hello:nth-child(3) {opacity: 0.4}
	span.hello:nth-child(4) {opacity: 0.2}
	span.hello:nth-child(5) {opacity: 0.1}
    span.hello:nth-child(6) {opacity: 0}


#menu-list {
       max-height: 0px;
    overflow: hidden;
    transition: max-height 1s ease;
    backdrop-filter: blur(5px);
    position: relative;
    background: #00000082;
    top: -12px;
	right: 50px;
	float:left;
}

#menu-list.show {
    max-height: 250px;
    transition: max-height 1s ease;
}

/* Fancy Featured Image */
.fancy-featured {        width: 20%;
    max-width: 200px;
    position: absolute;
    z-index: 0;
    top: 210px;
    border-radius: 30px;
    right: 6px;
     transform: rotate(5deg);

}

.footer-1{margin:0 10px 0 0;}
.footer-2{margin:0 10px 0 10px; text-align:center; }
.footer-3{margin:0 0 0 10px; text-align:center;}
.footer-4{text-align:right}
.footer-final {text-align:center; width:100%; padding:40px 20px 20px 20px}


@media only screen and (max-width:700px) {
	header #header {height:140px}
	header nav {display: flex;flex-wrap: wrap;}
	header nav #home, header nav #menu {flex: 0 0 100%;}
	header nav #menu {z-index: 10000;}
	#home {text-align: left;padding-left: 2%;}
	
	h1.page-heading, h1.entry-title {
	font-size: inherit;
    top: 0;
    margin-bottom: 0;
    left: 0;
    text-align: center;
    border-top: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
    padding: 20px 0px;
}
	
	#menu-list ul li {padding: 10px 0px;}
	.alert {display:none}
	.post-excerpt {display:none;}
	
	.short {width:100%}
	h3 {font-size: 1em;}
	
	#menu-list.show {max-height: 0px;overflow: hidden;}

	.category #category-container article {flex-basis: 100%!important; margin: 30px 0px;}
	.category #category-container article:first-child {flex-basis:100%; margin: 0px 0px 30px 0px;}
	.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7, .col-1:last-child,.col-2:last-child,.col-3:last-child,.col-4:last-child,.col-5:last-child,.col-6:last-child,.col-7:last-child {flex:0 0 100%}
	
	.footer-1,.footer-2,.footer-3 {border-bottom:1px solid black; border-bottom: 1px solid black;
        margin: 0 0 30px 0;
        padding: 0 0 30px 0;
        text-align: left;}
	.footer-4 {
        padding: 0 0 30px 0;
        text-align: left;}
}



/* My Queries */
@media only screen and (max-width: 1050px) {
	
	/* Nav */
	.home #header { height: 250px;}
	.category #header { height: 90px;}
	header nav {display:block; font-size: 1.25rem;}
	#menu-list {float:none;  text-align:center;  overflow: hidden; }
	#menu-list li {font-weight: 800; padding: 20px;}
	#menu-list.show {max-height: 100vh; display:block; overflow: visible;}
	header nav #menu-bar {border-left:0; top: 15px;}
	#menu-bar .menu-btn {
    transform: rotate(0deg);
    border-bottom: 2px solid var(--green);
	top: 0px;
	margin:0;
	}
		
	/* Footer */
	.footer-1 .left {text-align:center;}
	.col-2 {flex-basis: calc(100% - 1.27%);}
	.col-2:nth-child(2) {
    padding: 20px;
    border: 1px solid var(--blue);
    margin: 30px 0px;
	}
	.col-2:nth-child(3) {text-align:left;}
	.col-2:nth-child(3),.col-2:last-child {flex: 0 0 48.73%}
		
}

/* Forms */
form {text-align:center; }
select {padding: 20px;}
.hidden {display:none;}
input, label { margin: 20px 0px;}
.form-success {border: 2px solid var(--blue);
    border-radius: 25px;
    padding: 10px 20px;}
.g-recaptcha {width: 304px;
    margin: auto;
    padding: 20px 0px;}

@media(min-width:900px){
	form {width: 50%;margin: auto;}
}
@media(max-width:1024px){.box-5, .box-6{width:25%}.boxes .box-5:nth-child(5){width:100%}.boxes .box-6:nth-child(5), .boxes .box-6:nth-child(6){width:50%}}
@media(min-width:769px){	
	#logo-container{display:block;height:35px;margin-bottom:10px}.desktop{display:block}}
@media(max-width:768px){#header, #footer{text-align:center}#content, #sidebar{width:100%;padding:0}#branding, #menu, #menu div:first-of-type, #search{float:none}#search{margin-top:20px}#search .search-field{width:100%;border-color:#8a8a8a;cursor:text}#search .search-field:focus{width:100%}#menu.toggled{width:100%;height:100%;bottom:0;overflow-x:hidden;overflow-y:auto;z-index:1000;}.box-4, .box-5, .box-6{width:50%}.mobile{display:block}}
@media(max-width:767px){.single .nav-links .nav-previous, .single .nav-links .nav-next{float:none}.box-3{width:50%}.boxes .box-3:nth-child(3){width:100%}}
@media(max-width:576px){#container, #footer, .layer{padding:10%}.wp-caption, input, textarea, .button{width:100% !important}input[type="checkbox"], input[type="radio"]{width:auto !important}.box-2, .box-3, .box-4, .box-5, .box-6, .boxes .box-6:nth-child(5), .boxes .box-6:nth-child(6), .box-2-3, .box-1-3{width:100%}.spacer{display:block;width:100%;height:30px}}
@media(prefers-color-scheme:light){body, #container{}#header{}}
@media(prefers-color-scheme:dark){body, #container{}}
@media print{*{}body{padding:50px !important;margin:0 !important}#content{display:block !important;padding:0 !important;margin:0 !important}#header, #sidebar, #footer, #comments, .entry-footer, .navigation, .share, .video-wrap, iframe, img{display:none !important}}

.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break: normal;}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}
.looper{display:none}
.search-submit{display:none !important}



html {
	overflow-y: scroll;
	height: 100%;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
body {
	overflow-y: visible;
	position: relative;
  height: unset;
}
html, body {
	overflow-x: hidden;
	margin: 0;
}

.horizontal-scroll-wrapper .container {
	width: 400%;
	height: 100vh;
	display: flex;
	flex-wrap: nowrap;
}

.horizontal-scroll-wrapper .panel {
flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  padding: 10px;
  color: var(--color-just-black);
}

.panel.align-top {
  align-items: flex-start;
}

.horizontal-scroll-wrapper img {width:100%; margin:auto;}
.horizontal-scroll-wrapper .panel { text-align:center;}
/* Buttons */
/* Button hover */
.wp-block-button__link:hover {
    background-color: #1f232b;
    color: #fcfcfd;
	 transition: all 0.3s ease-in-out;
}