stylesheet.css

:root {
	/* Primary colors */
	--white: #ffffff;
	--black: #000000;
	/* Reds 🟥 */
	--red-bright: #db0b2d;
	--red-dimmed: #db003c;
	--red: var(--red-bright);
	/* Blues 🟦 */
	--blue-light: #002395;
	--blue-dark: #002654;
	--blue-shadow: #003CFF;
	--blue: var(--blue-light);

	/* Shadows */
	/* --shadow-color: 0deg 0% 0%; */
	--shadow-color: 226deg 100% 10%;
	--shadow-elevation:
		0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.54),
		1px 2px 2.5px -0.8px hsl(var(--shadow-color) / 0.54),
		2.5px 5.1px 6.4px -1.6px hsl(var(--shadow-color) / 0.55),
		6.3px 12.5px 15.9px -2.4px hsl(var(--shadow-color) / 0.55);

	/* Fonts */
	--serif-font: 'Roboto Slab';
	--sans-serif-font: 'Roboto';
}

html {
	box-sizing: border-box;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

::selection {
	color: var(--white);
	background: var(--red);
}

body {
	padding: 0;
	font-family: var(--sans-serif-font, sans-serif);
	font-size: 1em;
	line-height: 1.7;
}

a {
	color: inherit;
	text-decoration: none;
}

h1 {
	margin: 0;
	font-size: 2em;
}

h2 {
	font-size: 1.5em;
}

.serif-font {
	font-family: var(--serif-font, serif);
}

.white {
	color: var(--white);
}

.black {
	color: var(--black);
}

.blue {
	color: var(--blue);
}

.red {
	color: var(--red);
}

/* Add white background class to every odd-numbered section with jQuery => section:nth-child(odd) */
.white-bg {
	background-color: var(--white);
}

/* Add blue background class to every even-numbered section with jQuery => section:nth-child(even) */
.blue-bg {
	color: var(--white);
	background-color: var(--blue);
	text-shadow: 1px 1px 1px var(--blue-dark);
}

.shadow {
	box-shadow: var(--shadow-elevation);
	/* filter: drop-shadow(var(--shadow-elevation)); */
}

.border-radius {
	border-radius: 10px;
}

/**********
	HEADER
***********/

#logo {
	display: block;
	margin: 0 auto;
	padding: 1%;
	width: 25%;
	/* height: 33vh;
	max-width: 90%;
	min-width: max-content; */
}

/*********
	NAV
**********/

.sticky {
	position: sticky;
	top: 0;
}

nav ul {
	padding: 0;
	margin: 0;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-evenly;
}

nav ul li {
	list-style: none;
	text-align: center;
	display: inline-block;
	flex: auto;
	font-weight: bold;
}

.nav {
	padding: 1em;
	display: block;
	font-size: 1.30em;
	transition: background-color 0.20s linear;
}

.nav:hover {
	text-shadow: none;
	background-color: var(--red);
}

/*********
	MAIN
**********/

section {
	padding: 7%;
	/* height: 100vh; */
	/* scroll-snap-align: start; */
	scroll-margin-top: 2.5em;
}

section::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	clear: both;
}

section::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	clear: both;
}

/***** За нас ******/

#about p {
	text-align: justify;
	margin-bottom: 0;
}

#about span {
	font-weight: bold;
}

/***** Курсове ******/

#courses {
	text-align: center;
}

#courses h1 {
	margin-bottom: 3%;
}

#courses h2 {
	text-align: left;
	text-decoration: underline;
}

#courses article {
	display: inline-block;
	width: 45%;
	margin-right: 5%;
	vertical-align: text-top;
}

#courses #services {
	margin-right: 0;
}

#courses ul {
	/*list-style: url("icons/france.ico");*/
	padding-left: 25px;
	margin-bottom: 0;
	text-align: left;
}

#courses p {
	font-weight: bold;
	text-align: left;
}

/***** Фестивал ******/

#festival #poster {
	display: block;
	width: 25%;
	margin: 5% auto;
}

#festival h1 {
	text-align: center;
}

#festival p {
	text-align: justify;
}

#festival q {
	display: block;
	text-align: center;
	margin-top: 5%;
	font-size: 1.30em;
	font-style: italic;
	font-weight: bold;
}

/***** Списание ******/

#alliances #magazine {
	width: 25%;
	height: auto;
	float: left;
	margin: 0 4% 4% 0;
}

#alliances p {
	text-align: justify;
	margin-bottom: 0;
}

#alliances span {
	font-weight: bold;
}

/****** Персонал ******/

#staff {
	text-align: center;
}

#staff h1 {
	text-align: center;
	margin-bottom: 8%;
}

#staff article {
	width: 45%;
	display: inline-block;
}

#staff a {
	transition: color 0.20s linear;
}

#staff a:hover {
	color: var(--red);
}

#staff article .photo {
	width: 50%;
}

#staff h2 {
	font-size: 1.30em;
}

#staff h3 {
	color: var(--blue);
	margin-bottom: 0;
}

/****** Галерия *******/

#gallery {
	text-align: center;
}

#gallery h1 {
	margin-bottom: 5%;
}

#gallery img {
	width: 50%;
}

/***********
	FOOTER
************/

footer {
	padding: 5%;
	text-align: center;
	line-height: 2;
}

footer div {
	display: inline-block;
	vertical-align: text-top;
	margin: 0 auto;
}

footer ul {
	/*list-style: url("icons/france.ico");*/
	padding-left: 25px;
	margin-bottom: 0;
	text-align: left;
}

footer h1 {
	font-size: 1.5em;
	text-align: left;
}

footer a {
	display: flex;
	align-items: center;
	gap: 5%;
	transition: color 0.20s linear;
}

footer li {
	font-weight: 500;
}

footer span {
	font-weight: 700;
}

footer a:hover span {
	color: var(--blue);
	font-weight: 900;
}

footer a:active {
	color: var(--red);
}

footer img {
	width: 20px;
	height: 20px;
}

#about-us {
	width: 15%;
}

#course,
#culture,
#contact {
	width: 27%;
}

#contact #socials {
	list-style: none;
	padding-left: 0;
}

/* Back to top button */

#back-to-top {
	position: sticky;
	left: 20px;
	bottom: 20px;
	padding: 10px;
	margin-top: 100vh;
	font-weight: 900;
	background-color: var(--black);
	border-radius: 100px;
	transition: background-color 0.20s linear;
}

#back-to-top:hover {
	background-color: var(--red);
}

#back-to-top:active {
	background-color: var(--blue);
}

/******************
	MEDIA QUERIES
*******************/

/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

@media screen and (max-width: 1024px) {
	body {
		font-size: 1em;
	}

	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.5em;
	}
}

@media screen and (max-width: 768px) {

	header nav ul li a,
	#staff h2 {
		font-size: 1.05em;
	}

	body {
		font-size: 0.9em;
	}

	h1 {
		font-size: 1.9em;
	}

	h2 {
		font-size: 1.4em;
	}

	/* FESTIVAL */

	main #festival #poster {
		width: 45%;
		height: auto;
		margin-bottom: 3%;
	}

	/* MAGAZINE */

	main #alliances #magazine {
		width: 50%;
		height: auto;
	}

}

@media screen and (max-width: 681px) {
	footer ul {
		margin-bottom: 2%;
	}

	/*footer #about-us {
		width: 50%;
	}*/

	footer #about-us,
	#course,
	#culture,
	#contact {
		width: 45%;
	}

	footer img {
		width: 15px;
		height: 15px;
	}
}

@media screen and (max-width: 483px) {
	body {
		font-size: 0.8em;
	}

	h1 {
		font-size: 1.8em;
	}

	h2 {
		font-size: 1.3em;
	}

	/*header nav ul li a, #staff h2 {
		font-size: 1.05em;
	}*/

	/* NAV */

	nav ul {
		flex-flow: column;
		align-items: stretch;
	}

	nav ul li {
		display: block;
	}

	/* COURSES */

	main #courses article {
		display: block;
		width: 100%;
	}

	/* FESTIVAL */

	main #festival #poster {
		width: 100%;
		height: auto;
		margin-bottom: 7%;
	}

	main #festival h1 {
		text-align: center;
	}

	/* MAGAZINE */

	main #alliances #magazine {
		width: 100%;
		height: auto;
		margin-bottom: 7%;
	}

	/* STAFF */

	#staff article {
		display: block;
		width: 100%;
		margin-bottom: 7%;
	}

	#staff h2 {
		font-size: 1.3em;
	}

	/* FOOTER */

	footer div {
		display: block;
	}

	footer ul {
		margin-bottom: 2%;
	}

	footer #about-us {
		width: 100%;
	}

	footer #course,
	#culture,
	#contact {
		width: 100%;
	}

	footer img {
		width: 15px;
		height: 15px;
	}

	footer #email {
		clear: both;
	}
}

@media screen and (max-width: 198px) {
	body {
		font-size: 0.6em;
	}

	h1 {
		font-size: 1.6em;
	}

	h2 {
		font-size: 1.1em;
	}
}