/*style.css(Основной css)*/

@import "cheatSheets.css";
@import "/styles/header.css";
@import "/styles/cheatSheets_jquery.css";
@import "/styles/footer.css";
@import "./assets/css/templates/test.css";

@font-face {
	font-family: 'Montserrat', sans-serif;
	src: url(assets/css/fonts/static/Montserrat-Black.ttf);
	src: url(assets/css/fonts/static/Montserrat-BlackItalic.ttf);
	src: url(assets/css/fonts/static/Montserrat-Bold.ttf);
	src: url(assets/css/fonts/static/Montserrat-BoldItalic.ttf);
	src: url(assets/css/fonts/static/Montserrat-ExtraBold.ttf);
	src: url(assets/css/fonts/static/Montserrat-ExtraBoldItalic.ttf);
	src: url(assets/css/fonts/static/Montserrat-ExtraLight.ttf);
	src: url(assets/css/fonts/static/Montserrat-ExtraLightItalic.ttf);
	src: url(assets/css/fonts/static/Montserrat-Italic.ttf);
	src: url(assets/css/fonts/static/Montserrat-Light.ttf);
	src: url(assets/css/fonts/static/Montserrat-LightItalic.ttf);
	src: url(assets/css/fonts/static/Montserrat-Medium.ttf);
	src: url(assets/css/fonts/static/Montserrat-MediumItalic.ttf);
	src: url(assets/css/fonts/static/Montserrat-Regular.ttf);
	src: url(assets/css/fonts/static/Montserrat-SemiBold.ttf);
	src: url(assets/css/fonts/static/Montserrat-Thin.ttf);
	src: url(assets/css/fonts/static/Montserrat-ThinItalic.ttf);
	src: url(assets/css/fonts/static/Montserrat-SemiBoldItalic.ttf);
	src: url(assets/css/fonts/Montserrat-Italic-VariableFont_wght.ttf);
	src: url(assets/css/fonts/Montserrat-VariableFont_wght.ttf);
}

* {
	margin: 0; 
	padding: 0;
	box-sizing: border-box; 
	color: rgba(0, 0, 0, 1);
	font-family: 'Montserrat', sans-serif;
    text-decoration: none;
}

body {
	display: flex; 
	flex-direction: column;
	align-items: center;
    min-height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
}

main {
    display: flex;
    width: 100%;
    gap: 10px;
    flex-grow: 1;
}

.container {
    max-width: 1240px;
    min-width: 320px;
    margin: 0 auto;
    padding: 10px;
}

article {
    flex: 3;
}

aside {
    border: 1px solid black;
	padding: 10px;
    flex: 1;
    display: flex;
	flex-direction: column;
	align-items: center;
}

:root{
    --h1_shadow: #000000;
    --black: #000000;
    --grey: #f5f0f0;
    --while: #ffffff;
    --red: #f5350e;
    --red-yellow: #886A3C;
    --green: #2AA17D;
}

.row {display: flex;}

.col {
    display: flex;
    flex-direction: column;
}

.item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.f1 {flex: 1;}

.jcc {justify-content: center;}
.jcsb {justify-content: space-between;}

.p10 {padding: 10px;}

h1 {
  color: rgba(255, 255, 255, 1);
  text-align: center;
  font-size: 2em;
  line-height: 28px;
  margin: 28px 0;
  letter-spacing: -1px;
  text-shadow: 10px 10px 10px var(--h1_shadow), -10px -10px 10px var(--h1_shadow);
}

h2, h3, h4 {
    text-shadow: 1px 2px 5px var(--green);
    padding: 10px;
}

@media (max-width: 768px) {
	aside {
		display: none;
	}
	article {
		flex: 1;
	}
}