@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@200;300;400;500;600;700;800;900&display=swap');


@font-face {
    font-family: "verb-black";
    font-style: normal;
    font-weight: 400;
    src: url("https://hello-agnes-1983.s3.us-east-2.amazonaws.com/VerbBlack-webfont.woff2") format('woff2')
}

@font-face {
    font-family: "jbm-regular";
    font-style: normal;
    font-weight: 400;
    src: url("https://hello-agnes-1983.s3.us-east-2.amazonaws.com/JetBrainsMono-Regular.woff2") format('woff2')
}

@font-face {
    font-family: "really-sans";
    font-style: normal;
    font-weight: 400;
    src: url("https://hello-agnes-1983.s3.us-east-2.amazonaws.com/ReallySansLargeStudent-Ultra.woff2") format('woff2')
}


@font-face {
    font-family: "kiro-italic";
    font-style: normal;
    font-weight: 400;
    src: url("https://hello-agnes-1983.s3.us-east-2.amazonaws.com/Kiro-W03-Bold-Italic.woff2") format('woff2')
}

body {
	font-family: "Work Sans", sans-serif;
}

.navbar-inner{
	-webkit-box-shadow: none; 
    -moz-box-shadow: none;
    box-shadow: none;
}

#mainNav .brand span {
	display: inline-block;
	text-indent: -9000px;
	width: 150px;
	height: 80px;
	background: url("https://hello-agnes-1983.s3.us-east-2.amazonaws.com/Logo-v-c00-(production)-white-bg.svg") no-repeat 0 0;
	background-size: 100%;
}

#fullArticle .title, .contentWrapper h1 {
	font-family: "really-sans", sans-serif;
	font-size: 48px;
}

#fullArticle h2 {
	font-size: 36px;
	font-family: "verb-black",
	sans-serif;
}

#fullArticle h3 {
	font-size: 16px !important;
	font-family: "Work Sans", sans-serif;
	font-weight: 600 !important;
}

#fullArticle p {
	margin-top: -4px;
	word-wrap: break-word;
	font-family: "Work Sans", sans-serif;
	color: rgb(40, 36, 37);
	font-weight: 400;
	font-size: 18px;
}


#fullArticle .callout {
	font-family: "jbm-regular", sans-serif;
    font-size: 12px;
    background-color: #f5f5f5;
    border-left: 1px solid;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

#docsSearch{
	background-color: #ece5d3;
	border: none !important;
	padding-top: 128px;
}

#docsSearch h1{
	font-family: "really-sans", sans-serif;
	font-size: 64px;
}

#docsSearch #searchBar{
	margin-top: 48px;
	border-color: rgb(75 85 99);
	border-radius: 6.4px;
	border-width: 1px;
	border-style: solid;
	align-items: center;
    background: #FFF;
    display: flex;
    padding: 24px;
    position: relative;
    text-align: left;
    width: 540px;
    z-index: 100;	
}

#docsSearch #searchBar .search-query{
	appearance: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
    height: auto;
    line-height: 1.9em;
    padding: 0 .9em;
    vertical-align: middle;
    font-family: "jbm-regular", sans-serif;

}

#docsSearch #searchBar button{
    letter-spacing: -0.0175em;

    padding: .6em 1em .625em 1em;
    position: relative;
    right: auto;
    text-align: center;
    text-shadow: none;
    top: auto;
    width: 148px;

    align-items: center;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 0.25s;
	animation-fill-mode: none;
	animation-iteration-count: 1;
	animation-name: button-pop;
	animation-play-state: running;
	animation-range-end: normal;
	animation-range-start: normal;
	animation-timeline: auto;
	animation-timing-function: ease-out;
	background-color: rgb(220, 136, 80);
	border-color: rgb(31, 41, 55);
	border-radius: 24px;
	border-style: solid;
	border-width: 1px;
	border-image-outset: 0;
	border-image-repeat: stretch;
	border-image-slice: 100%;
	border-image-source: none;
	border-image-width: 1;
	box-sizing: border-box;
	color: rgb(40, 36, 37);
	color-scheme: light;
	column-gap: 8px;
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	font-family: "Work Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe 	UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "	Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-feature-settings: normal;
	font-size: 14px;
	font-variation-settings: normal;
	font-weight: 600;
	height: 32px;
	justify-content: center;
	line-height: 14px;
	min-height: 32px;
	outline-color: rgb(220, 136, 80);
	padding-left: 12px;
	padding-right: 12px;
	row-gap: 8px;
	tab-size: 4;
	text-align: center;
	text-decoration-color: rgb(40, 36, 37);
	text-decoration-line: none;
	text-decoration-style: solid;
	text-decoration-thickness: auto;
	text-size-adjust: 100%;
	text-transform: uppercase;
	transition-duration: 0.2s;
	transition-property: color, background-color, border-color, text-decoration-color, fill, 	stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	user-select: none;
	width: 164px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


#docsSearch #searchBar button:hover{
	background-color: rgb(215, 116, 51);
	border-style: solid;
	border-width: 1px;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(31, 41, 55) 5px 5px 0px 0px;
	transform: matrix(1, 0, 0, 1, -4, -4);
}


#contact a{
    letter-spacing: -0.0175em;

    padding: .6em 1em .625em 1em;
    position: relative;
    right: auto;
    text-align: center;
    text-shadow: none;
    top: auto;
    width: 148px;

    align-items: center;
	animation-delay: 0s;
	animation-direction: normal;
	animation-duration: 0.25s;
	animation-fill-mode: none;
	animation-iteration-count: 1;
	animation-name: button-pop;
	animation-play-state: running;
	animation-range-end: normal;
	animation-range-start: normal;
	animation-timeline: auto;
	animation-timing-function: ease-out;
	background-color: #4381b5;
	border-color: rgb(31, 41, 55);
	border-radius: 24px;
	border-style: solid;
	border-width: 1px;
	border-image-outset: 0;
	border-image-repeat: stretch;
	border-image-slice: 100%;
	border-image-source: none;
	border-image-width: 1;
	box-sizing: border-box;
	color: #ffffff;
	color-scheme: light;
	column-gap: 8px;
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	flex-wrap: wrap;
	font-family: "Work Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe 	UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "	Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-feature-settings: normal;
	font-size: 14px;
	font-variation-settings: normal;
	font-weight: 600;
	height: 32px;
	justify-content: center;
	line-height: 14px;
	min-height: 32px;
	outline-color: #4381b5;
	padding-left: 12px;
	padding-right: 12px;
	row-gap: 8px;
	tab-size: 4;
	text-align: center;
	text-decoration-color: rgb(40, 36, 37);
	text-decoration-line: none;
	text-decoration-style: solid;
	text-decoration-thickness: auto;
	text-size-adjust: 100%;
	text-transform: uppercase;
	transition-duration: 0.2s;
	transition-property: color, background-color, border-color, text-decoration-color, fill, 	stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	user-select: none;
	width: 164px;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


#contact a:hover{
	background-color: #4381b5;
	border-style: solid;
	border-width: 1px;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(31, 41, 55) 5px 5px 0px 0px;
	transform: matrix(1, 0, 0, 1, -4, -4);
}

section.most-pop-articles{
	display: none;
}

section.category-list a.category{
	border-color: rgb(75 85 99);
	border-radius: 6.4px;
	border-width: 1px;
	border-style: solid;
	
}

section.category-list a.category:hover{
	border-style: solid;
	border-width: 1px;
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(31, 41, 55) 5px 5px 0px 0px;
	transform: matrix(1, 0, 0, 1, -4, -4);
}

section.category-list a.category h3{
	font-size: 32px;
	font-family: "really-sans",	sans-serif;
}


section.category-list a.category p.article-count{
	font-size: 16px;
	font-weight: 600;
}


#sidebar #searchBar{
	border-color: rgb(75 85 99);
	border-radius: 6.4px;
	border-width: 1px;
	border-style: solid;
}

#sidebar form .search-query{
	border: none;
	border-radius: 6.4px;
    font-family: "jbm-regular", sans-serif;
}

#sidebar h3{
	display: none;
}


#sidebar .nav-list a{
	font-family: "really-sans",	sans-serif;
	font-size: 24px;
	color: #4381b5;
}

#sidebar .nav-list .active a{
	color: #222;
	text-decoration: underline;
}


#sidebar .nav-list .active a .icon-arrow{
	display: none;
}


#main-content ul.articleList li a i{
	display: none;
}

#main-content ul.articleList li a{
	color: #4381b5;
	text-decoration: underline;
	font-size: 24px;
	font-family: "kiro-italic", sans-serif;
}

#main-content ul.articleList li a:hover{
	color: #222;
}


footer p{
	padding-top: 24px;
	font-family: "jbm-regular", sans-serif;
    font-size: 12px !important;	
}