@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url(/css/tokens.css);

.hidden{display:none;visibility: hidden;}

/* General */
body{
	background-color: var(--sarah-color-background); 
	font-family: sans-serif;
	margin:0;
	
}
main{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Content padding */
.content, footer{padding: var(--sarah-content-padding);}
.footer-links, .header-text{padding-bottom: var(--sarah-space-m);}
article, main{padding-bottom: var(--sarah-content-padding-l);}


/*flex */

.flex-row, .flex-column, #title-header
{
	display: flex;
}

/* Flex direction */
.flex-row{
	color: var(--sarah-color-text);
	flex-wrap: wrap;
	flex-direction: row;
	
}

.flex-column{
	color: var(--sarah-color-text);
	flex-wrap: wrap;
	flex-direction: column;
	
}

/* Center alignment */
.flex-column, .flex-row, article, .content, #title-header{
	align-content: center;
	justify-content: center;
	align-items: center;
	justify-items: center;
}



.title, article, .content section{width: 100%; max-width: 800px;}

/* Text */
h1, h2, h3, h4, h5, h6 {font-family: "Montserrat Alternates", sans-serif;  color:#1d1d1d; text-transform: lowercase;}
h1{font-size: var(--sarah-text-xxxxl);font-weight: 700;}
h2{font-size: var(--sarah-text-xxxl);font-weight: 600;}
h3{font-size: var(--sarah-text-xxl);}
h4{font-size: var(--sarah-text-xl);}
h5{font-size: var(--sarah-text-l);}
h6{font-size: var(--sarah-text-m);}
figcaption, .caption{font-size: var(--sarah-text-s);}

/* Left alignment text */
ul, p, h1, h2, h3, h4, h5, h6 {width: 100%;}

/* Button */
a, button{
	letter-spacing: 10%;
	text-transform: lowercase;
	font-weight: 600;
	display: inline-flex;
}

button, .button{
	color: var(--sarah-color-button-on);
	background-color: var(--sarah-color-button);
	border: 2px solid var(--sarah-color-button);
	border-radius: 0px;
	padding: 8px;
	text-decoration: none;
}

.button.secondary{
	color: var(--sarah-color-button);
	background-color: inherit;
}

button:hover, .button:hover{
	color: var(--sarah-color-button-hover-on);
	background-color: var(--sarah-color-button-hover);
	box-shadow: -4px 4px;
	cursor: pointer;
}

button:active, .button:active{
	color: var(--sarah-color-button-hover-on);
	background-color: var(--sarah-color-button-press);
}

p{margin: 0px 0px 10px 0px;}
/* Focus */
button:focus, a:focus, input:focus {
    outline: 1px solid #fff; 
	color: var(--sarah-color-button-hover-on);
	background-color: var(--sarah-color-button-press);
}
figcaption, .caption{color: var(--sarah-color-text-subtle);}

/* Nav */
nav{
	background-color: var(--sarah-color-primary);
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	padding: 16px; margin:0;
	
}
@media screen  and (max-width:349px){
	nav{display: flex; flex-direction: column; gap: 15px;}
	a{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
}

#siteName{
	#logo{height:47px; width:47px;}
}


#navLinks{
	a{
	padding: 8px;
	color: black;
	font-weight: 600;
	letter-spacing: 10%;
	text-transform: lowercase;
	text-decoration: none;
	padding: 10px;
	border: 2px solid transparent;
	}
}
button.active,a.active{text-decoration: underline !important; text-decoration-thickness: 2px !important;background-color: inherit !important;color:var(--sarah-color-button); border:none;}
.active:hover{background-color: var(--sarah-color-primary);}


#navLinks a:hover{
	background-color: var(--sarah-color-button-hover);
	border: 2px solid var(--sarah-color-button);
	padding: 10px;
	box-shadow: -4px 4px;
}

#navLinks a:active{
	background-color: var(--sarah-color-button-press);
	box-shadow: -4px 4px;
}


/* Page title/header */
#title-header{
	background-color: var(--sarah-color-primary);
	gap: var(--sarah-content-padding);
	width: 100%;
	p{font-size: var(--sarah-text-xxl); margin-bottom: var(--sarah-space-xl);text-wrap: initial;}
}

.header-text{max-width:500px;}

/* Portfolio */
.post{
		display: flex;
		flex-direction: row;
		gap: var(--sarah-space-m);
		.about{width: 90%;}
	}
@media screen  and (min-width:600px){.post{flex-wrap: no-wrap;.about{width: calc(100% - (250px));}}}
@media screen  and (max-width:599px){
	.post{flex-wrap: wrap; 
		.about{display:flex; flex-direction:column;justify-content: center; width: 100%;
			.tags{display:flex; justify-content: center;flex-wrap: wrap;}
			.title{text-align: center;}
			a{width: fit-content;align-self: center;}
		}
	}
}

.about .title{
	font-size: var(--sarah-text-xxl); 
	font-weight: 500;
	margin: 0 !important;
}
.tags, .tags ul{padding:0px; margin-left: 0px;}

.tags li{
	display: inline-block;
	padding: var(--sarah-space-xs) var(--sarah-space-s);
	margin-right: var(--sarah-space-xs);
	font-size: var(--sarah-text-s);
	margin:var(--sarah-space-xs);
}

.blob{width: 100%;height:auto; max-width: 350px;}

.tags .design{background-color: var(--sarah-purple);}
.tags .development{background-color: var(--sarah-red);}
.tags .research{background-color: var(--sarah-green);}
.tags .personal{background-color: #D4D4D4;}

/* Blog */
#blog{background-color: inherit;}

/* Footer */
footer{
	font-size: var(--sarah-text-s) !important;
	color: var(--sarah-color-text-subtle);
	background-color: var(--sarah-color-primary);
	
	bottom: 0;

	.flex-row{gap: var(--sarah-space-s);}

	a{color:var(--sarah-color-link) ; margin-right:20px;}
	a:hover{color: var(--sarah-color-link-hover);}
	a:active{color: var(--sarah-color-link-press);}
	.footer-copyright{text-align: center;}
	
}