@use "variables";

/**
 * Typography
 */

* {
	box-sizing: border-box;
}
img {
	max-width: 100%;
}
html {
	overflow: hidden;
	overflow-y: auto;
}
body {
	overflow: hidden;
	font-size: variables.$body-font-size;
	line-height: variables.$body-line-height;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: variables.$body-font;
	color: variables.$body-color;
	font-weight: 400;
}

a {
	transition: all 0.4s ease-in-out 0s;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
address,
p,
pre,
blockquote,
dl,
dd,
menu,
ol,
ul,
table,
caption,
hr {
	margin: 0;
	margin-bottom: 15px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-family: variables.$heading-font;
	line-height: 1.4074;
	color: variables.$heading-color;
}
h1,
.h1 {
	font-size: variables.$h1;
}
h2,
.h2 {
	font-size: variables.$h2;
}
h3,
.h3 {
	font-size: variables.$h3;
}
h4,
.h4 {
	font-size: variables.$h4;
}
h5,
.h5 {
	font-size: variables.$h5;
}
h6,
.h6 {
	font-size: variables.$h6;
}

@media #{variables.$md-layout} {
	h1,
	.h1 {
		font-size: variables.$h1 - 4;
	}
	
	h2,
	.h2 {
		font-size: variables.$h2 - 2;
	}
	h3,
	.h3 {
		font-size: variables.$h3 - 2;
	}
}

@media #{variables.$sm-layout} {
	h1,
	.h1 {
		font-size: variables.$h1 - 6;
	}
	
	h2,
	.h2 {
		font-size:variables.$h2 - 4;
	}
	h3,
	.h3 {
		font-size: variables.$h3 - 2;
	}
}

@media #{variables.$large-mobile} {
	h1,
	.h1 {
		font-size: variables.$h1 - 8;
	}
}

h1,
.h1,
h2,
.h2,
h3,
.h3 {
	font-weight: 700;
}
h4,
.h4,
h5,
.h5 {
	font-weight: 600;
}
h6,
.h6 {
	font-weight: 500;
}
a:hover,
a:focus,
a:active {
	text-decoration: none;
	outline: none;
}
a:visited {
	color: inherit;
}
input,
button,
select,
textarea {
	background: transparent;
	border: 1px solid variables.$border-color;
	transition: all 0.4s ease-out 0s;
	color: variables.$body-color;
	&:focus,
	&:active {
		outline: none;
		border-color: variables.$theme-color;
	}
}
input,
select,
textarea {
	width: 100%;
	font-size: 14px;
}
input,
select {
	height: 40px;
	padding: 0 15px;
}