create two version old and new

new/styles/media.css

@@ -0,0 +1,143 @@
+
+/* RESPONSIVE DESIGN */
+
+@media only screen and (max-width: 1000px) {
+	html {
+		font-size: var(--small-font-size);
+	}
+	.container_main {
+		flex-direction: column;
+	}
+	.container_main > * {
+		margin: 20px;
+	}
+	.aside_left {
+		position: relative;
+	}
+	/*NAVBAR*/
+	nav.navbar {
+		flex-direction: column;
+		height: auto;
+	}
+	.navbar .nav_left {
+		flex-direction: column;
+		height: auto;
+		width: 100%;
+	}
+	.navbar .nav_left a#nav_logo {
+		display: flex;
+		margin-bottom: 0px;
+		margin-left: 0px;
+		width: auto;
+	}
+	.navbar .nav_left > a:not(#nav_logo) {
+		display: none;
+		margin-left: 0px;
+		width: 100%;
+		height: 50px;
+	}
+	.navbar .nav_left > a p {
+		margin-left: 20px;
+	}
+	.navbar .nav_right {
+		height: auto;
+		width: 100%;
+		display: none;
+		margin-left: 28px;
+	}
+	.navbar .nav_right > a {
+		height: 50px;
+		margin: 0px;
+	}
+	/*burger menu*/
+	nav.navbar input#burger {
+		display: none;
+	}
+	nav.navbar .burger {
+		position: absolute;
+		right: 0px;
+		top: 0px;
+		height: var(--nav-height);
+		width: 50%;
+		cursor: pointer;
+	}
+	nav.navbar .burger::before {
+		content: "";
+		position: absolute;
+		right: 20px;
+		top: 10px;
+		width: 26px;
+		height: 14px;
+		border-top: 2px solid var(--color-grey-dark);
+		border-bottom: 2px solid var(--color-grey-dark);
+	}
+	nav.navbar .burger::after {
+		content: "";
+		position: absolute;
+		right: 20px;
+		top: 18px;
+		width: 26px;
+		height: 2px;
+		border-top: 2px solid var(--color-grey-dark);
+	}
+	nav.navbar #burger:checked + .burger {
+		cursor: default;
+	}
+	nav.navbar #burger:checked ~ .nav_right {
+		display: flex;
+	}
+	nav.navbar #burger:checked ~ .nav_left a {
+		display: flex;
+	}
+	nav.navbar #burger:checked ~ .nav_left a:not(#nav_logo) {
+	}
+	nav.navbar #burger:checked ~ .nav_left a#nav_logo {
+		display: flex;
+		margin-bottom: 40px;
+	}
+	nav.navbar #burger:checked + .burger::before {
+		transform: rotate(40deg);
+		top: 18px;
+		right: 21px;
+		height: 2px;
+		border-bottom: none;
+	}
+	nav.navbar #burger:checked + .burger::after {
+		transform: rotate(-40deg);
+	}
+	nav.navbar .burger:checked::after {
+	}
+	/*MAIN*/
+	main {
+		max-width: 90%;
+	}
+	main .image {
+		flex-wrap: wrap;
+	}
+	main .image img {
+		margin-bottom: 20px;
+	}
+	.image h1, .image h2, .image h3, .image p {
+		margin-left: 0px;
+	}
+	/*INDEX*/
+	.logo_links#index_links {
+		flex-direction: column;
+	}
+	body#body_index {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+	main#index {
+		height: auto;
+	}
+	.logo_links#index_links h3 {
+		margin: 10px auto;
+	}
+	.logo_links#index_links {
+		margin-bottom: 20px;
+	}
+}
+
+