@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('/style/font/lato-v25-latin-regular.woff2') format('woff2');
}
@font-face {
	font-display: swap;
	font-family: 'Lato';
	font-style: normal;
	font-weight: 700;
	src: url('/style/font/lato-v25-latin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Newake';
	font-display: swap;
	font-style: normal;
	font-feature-settings: 'liga' 1, 'calt' 1; /* Chrome */
	src: url("/style/font/Newake-Regular.woff2") format("woff2");
}

:root {
	--background: hsl(217, 100%, 97%);
	--backgroundAlt: hsl(216, 58%, 88%);
	--backgroundAlt2: hsl(35, 58%, 88%);

	--color1: hsl(232, 43%, 48%);
	--color1text: hsl(232, 43%, 48%);

	--color2: hsl(216, 55%, 55%);
	--color2text: hsl(215, 48%, 53%);

	--color3: hsl(232, 38%, 31%);
	--color3text: hsl(232, 38%, 31%);

	--color4: hsl(16, 68%, 57%);
	--color4text: hsl(16, 72%, 57%);
}

.style1 {
	background-color: var(--color1);
	color: hsl(216, 56%, 90%);
}
.style1 path {
	fill: hsl(216, 56%, 90%);
}
.style1 .alt path,
.style1 .button path,
.button.style1 path {
	fill: var(--color1);
}
.style1 .button,
.button.style1,
.style1 .alt {
	background: var(--backgroundAlt);
	color: var(--color1);
}


.style2 {
	background-color: var(--backgroundAlt);
	color: var(--color1);
}
.style2 path {
	fill: var(--color1);
}
.style2 .alt path,
.style2 .button path,
.button.style2 path {
	fill: hsl(216, 56%, 90%);
}
.style2 .button,
.button.style2,
.style2 .alt {
	background: var(--color1);
	color: hsl(216, 56%, 90%);
}


.style3 {
	background-color: var(--color2);
	color: hsl(216, 55%, 94%);
}
.style3 path {
	fill: hsl(216, 55%, 94%);
}
.style3 .button {
	background-color: hsl(216, 55%, 94%);
	color: var(--color2);
}
.style3 .button path {
	fill: var(--color2);
}
.style3 .alt {
	background-color: hsl(216, 55%, 94%);
	color: var(--color2text);
}


.style4 {
	background-color: var(--backgroundAlt);
	color: var(--color2text);
}
.style4 path {
	fill: var(--color2text);
}
.style4 .alt path,
.style4 .button path,
.button.style4 path {
	fill: hsl(216, 56%, 90%);
}
.style4 .button,
.button.style4,
.style4 .alt {
	background: var(--color2text);
	color: hsl(216, 56%, 90%);
}


.style5 {
	background-color: var(--color3);
	color: hsl(216, 56%, 90%);
}
.style5 path {
	fill: hsl(216, 56%, 90%);
}
.style5 .alt path,
.style5 .button path,
.button.style5 path {
	fill: var(--color3);
}
.style5 .button,
.button.style5,
.style5 .alt {
	background: var(--backgroundAlt);
	color: var(--color3);
}


.style6 {
	background-color: var(--backgroundAlt);
	color: var(--color3text);
}
.style6 path {
	fill: var(--color3text);
}
.style6 .alt path,
.style6 .button path,
.button.style6 path {
	fill: hsl(216, 56%, 90%);
}
.style6 .button,
.button.style6,
.style6 .alt {
	background: var(--color3text);
	color: hsl(216, 56%, 90%);
}


.style7 {
	background-color: var(--color4);
	color: hsl(35, 58%, 88%);
}
.style7 path {
	fill: hsl(35, 58%, 88%);
}
.style7 .alt path,
.style7 .button path,
.button.style7 path {
	fill: var(--color4);
}
.style7 .button,
.button.style7,
.style7 .alt {
	background: hsl(35, 58%, 88%);
	color: var(--color4text);
}


.style8 {
	background-color: hsl(35, 58%, 88%);
	color: var(--color4text);
}
.style8 path {
	fill: var(--color4text);
}
.style8 .alt path,
.style8 .button path,
.button.style8 path {
	fill: hsl(35, 58%, 88%);
}
.style8 .button,
.button.style8,
.style8 .alt {
	background: var(--color4text);
	color: hsl(35, 58%, 88%);
}