// various imports for our styling

// BOURBON 
@import "bourbon/bourbon";
// FONT-AWESOME v6.2.1
@import "fa-v6/fontawesome";
@import "fa-v6/brands";
// MY COLOR DEFINITIONS
@import "colors";
// GOOGLE FONTS
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,600;1,400;1,600&family=Red+Hat+Mono&display=swap');

html {
	margin: 0;
	padding: 0;
	font-family: 'Montserrat', sans-serif;
	color: $dark-grey;
	a {
		color: $dark-accent;
		text-decoration: none;
		&:visited {
			color: $light-accent;
		}
		&:hover {
			color: $dark-orange;
		}
	}

	body {
		background-color: $base-bg;
		margin: 0;
		padding: 0;

		div#page {
			header#masthead,
			footer#colophon {
				color: $base-bg;
				background-color: $dark-grey;
				margin: 0;
				padding: 1em;
			}
			header#masthead {
				h1.site-title {
					font-size: 5em;
					font-weight: 200;
					margin: 0;
					padding: 0;
					a {
						color: $dark-orange;
					}
				}
			}
			footer#colophon {
				div#social-menu {
					ul.social-links {
						margin: 0;
						padding: 0;
					}
				}
			}
			div#content {
				line-height: 1.5;
				font-weight: 400;
				padding: 1em 3em;
				div#secondary {
					div#home-social-links {
						margin: 1em auto;
						ul.social-links-list {
							list-style: none;
							li {
								display: inline-block;
								float: none;
								font-size: 4em;
								width: 2em;
								text-align: center;
								a {
									color: $dark-orange;
									&:hover {
										color: shade($dark-orange, 40%);
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
.screen-reader-text,
.hidden {
	@include hide-visually;
}
pre {
	margin: 1em;
	padding: 0.7em;
	max-width: 90vw;
	background-color: $light-grey;
	color: $light-orange;
	font-size: 1.4em;
	font-family: 'Red Hat Mono', monospace;
}
div#backtotop {
	color: $light-orange !important;
	& a {
		position: fixed;
		right: 2em;
		bottom: 2em;
		border-radius: 100%;
		background-color: $dark-orange;
		padding: 0.5rem;
		border: none;
		cursor: pointer;
		display: block;
		width: 2em;
		height: 2em;
		color: $dark-grey;
		& i {
			color: inherit;
		}
	}
}