@keyframes show {
	0% {
		background-color: purple;
		color: black;
	}
	50% {
		background-color: gray;
		color: white;
	}
	100% {
		background-color: transparent;
		color: grey;
	}
}

@keyframes close {
	from {
		background-color: purple;
	}
	to {
		color: transparent;
		background-color: transparent;
	}
}

body {
	font-style: italic;
	font-weight: bold;
	font-family: "Audiowide";
	margin: 0px;
	padding: 0px;


	& .basic-div {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 160px;

		& h2.domain-header {
			display: none;
			align-self: flex-start;
			margin-left: 15px;

			font-size: medium;

			& a {
				position: relative;
				color: black;
				text-decoration: none;
			}

			& a::after {
				content: "";
				position: absolute;
				left: -8px;
				right: -8px;
				bottom: -0.01em;
				height: 5px;
				background: linear-gradient(135deg, transparent, #0000d5ff, purple, transparent);
				z-index: -1;
				opacity: 0.9;
				border-radius: 10px;
			}

			a.dark {
				color: grey;
			}
		}

		& .main-div {
			display: flex;
			flex-direction: column;
			width: clamp(150px, 80vw, 1500px);
			background-color: rgba(250, 250, 250, 0.1);
			border-radius: 3px;
			backdrop-filter: blur(5px);

			& header {
				display: flex;
				flex-direction: column;

				& aside {
					display: flex;
					flex-direction: column;
					margin-bottom: 10px;

					& h1 {
						margin-left: 15px;
				
						font-size: larger;

						& a {
							text-decoration: none;
							display: inline-block;
							line-height: 1.3;
							padding: 0.3em;
							background: linear-gradient(to right, #0000d5ff, purple);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							filter: drop-shadow(1px 1px 1px black);
						}
					}

					& .theme {
						display: flex;
						align-self: flex-end;
						margin-right: 5px;
						padding: 5px;

						background-color: rgb(0, 0, 0);
						border-radius: 5px;
						color: white;
					}

					& .theme.dark {
						background-color: white;
						color: black;
					}

					& .accessibility {
						display: flex;
						align-self: flex-end;
						align-items: center;
						margin-right: 5px;
						margin-top: 10px;

						color: purple; 
						font-size: 25px;
						filter: drop-shadow(1px 1px 1px black);
					}

					& .accessibility.dark {
						filter: drop-shadow(2px 2px 2px black);
					}

				}

				& nav {
					display: flex;
					justify-content: center;
					background: linear-gradient(
						90deg, transparent, purple, transparent
					);


					& ul {
						list-style: none;
						margin: clamp(10px, 2vw, 50px);
						margin-bottom: 5px;
						padding: 0px;
					}

					& ul li {
						display: flex;
						justify-content: center;
						color: black;
						text-decoration: none;
					}
				}
			}

			& main {
				display: flex;
				flex-direction: column;

				& .first {
					display: flex;
					flex-direction: column;
					margin-top: clamp(10px, 5vw, 50px);

					& .logo {
						display: none;
						justify-content: center;
						max-width: 480px;
						border-radius: clamp(150px, 40vw, 400px);
						background: radial-gradient(
							circle,
							purple 0%,
							transparent 50%
						);
						
						& img {
							width: clamp(150px, 40vw, 400px);
							filter: drop-shadow(1px 1px 1px black);
						}

						& img.me {
							filter: drop-shadow(10px 10px 10px black);
							border-radius: clamp(150px, 40vw, 400px);
						}
					}

					& .logo.me {
						background: transparent;
					}

					& article {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						text-align: center;

						& h3.article-header {
							margin-top: 40px;
						}
					}
					
					& article.contact {
						padding-right: 30px;
						padding-left: 30px;

						& ul {
							display: flex;
							flex-direction: column;
							align-items: flex-start;
							list-style: disc;
							list-style-position: inside;
							padding: 15px;
							margin: 0px;
							margin-top: 15px;
							border: 5px solid purple;
							border-radius: 8px;
							filter: drop-shadow(2px 2px 2px black);

							& li {
								margin: 2px 0px;

								& a {
									color: purple;
									text-decoration: none;
									& i.fa-github {
										color: #181717;
									}
									& i.fa-youtube {
										color: #ff0000;
									}
								}
							
								& span.at {
									font-family: 'Black Ops One';
								}

							}
						}
					}

					& article.contact.dark {
						& ul {
							& li {
								& a {
									& i.fa-github {
										color: gray;
									}
								}
							}
						}
					}

					& article.dark {
						color: grey;
						& h3.article-header {
							color: purple;
						}
					}
				}

				& .middle {
					display: flex;
					flex-direction: column;
					align-items: center;

					& a.card-project {
						position: relative;
						display: flex;
						margin-top: clamp(40px, 10vw, 100px);

						color: purple;
						text-align: center;
						text-decoration: none;

						transition: transform 0.6s ease, filter 0.6s ease;
						
						& .project {
							display: flex;
							flex-direction: column;
							align-items: center;
							transition: filter 0.6s ease;

							& .text {
								margin-bottom: 10px;
							}

							& #browser-header {
								display: flex;
								
								& .browser {
									position: relative;
									display: flex;
									align-items: center;
									justify-content: space-between;

									height: clamp(15px, 7.5vw, 50px);
									width: clamp(100px, 50vw, 650px);
									border-radius: clamp(10px, 3vw, 20px) clamp(10px, 3vw, 20px) 0px 0px;

									background-color: rgb(85, 91, 98);
									filter: drop-shadow(4px 4px 4px black);

									& .dots-arrows {
										display: flex;
										align-items: center;
										justify-content: center;
										margin-left: clamp(5px, 1vw, 15px);

										& .dots {
											display: flex;

											& span {
												display: flex;
												height: clamp(7px, 1.5vw, 15px);
												width: clamp(7px, 1.5vw, 15px);
												border-radius: clamp(7px, 1.5vw, 15px);
												margin-right: clamp(3px, 1vw, 6px);
											}
											& .red {background-color: #ff5f57;}
											& .yellow {background-color: #ffbd2e;}
											& .green {background-color:#28c840;}
											& span:last-child {
												margin-right: 0px;
											}
										}

										& .arrows {
											display: flex;
											align-items: center;
											justify-content: center;
											margin-left: clamp(8px, 2vw, 25px);;
											width: clamp(15px, 6vw, 40px);
											height: clamp(7px, 3.5vw, 25px);
											background-color: white;
											border-radius: clamp(7px, 3.5vw, 25px);

											& span {
												display: flex;
												align-items: center;
												color: black;
												font-size: clamp(4px, 2vw, 14px);
											}
										}

									}

									& .find-plus {
										display: none;

										& .finder {
											display: flex;
											align-items: center;
											justify-content: flex-end;
											width: clamp(40px, 20vw, 400px);
											height: clamp(7px, 3.5vw, 25px);
											background-color: white;
											border-radius: clamp(7px, 3.5vw, 25px);

											& .mag-glass {
												display: flex;
												align-items: center;
												margin-right: clamp(5px, 1.3vw, 10px);
												font-size: clamp(5px, 1.3vw, 15px);
											}
										}

										& .plus {
											display: flex;
											align-items: center;
											margin-left: clamp(3px, 1vw, 6px);
											color: white;
											font-size: clamp(5px, 1vw, 10px);
										}
									}

									& .options {
										display: flex;
										align-items: center;
										margin-right: clamp(5px, 1vw, 15px);
										color: white;
										font-size: clamp(7px, 2vw, 30px);
									}
								}

								& .browser::after {
									content: '';
									bottom: -5px;
									right: 3px;
									position: absolute;
									border: 5px solid  rgb(85, 91, 98);

								}
							}

							& img {
								width: clamp(100px, 50vw, 650px);
								border-radius: 0px 0px 5px 5px;

								filter: drop-shadow(4px 4px 4px black);
							}
						}
					}

					& a.card-project:last-child {
						margin-bottom: 40px;
					}

					& a.card-project:hover {
						& .project {
							filter: blur(4px);
						}
						
					}

					& a.card-project:nth-child(2n):hover {
						transform: translateX(-10px);
					}

					& a.card-project:nth-child(2n+1):hover {
						transform: translateX(10px);
					}
				}

				& .middle.contact {
					padding: 0px 30px;

					& p {
						margin-top: 40px;
						margin-bottom: 30px;
					}

					& form#form-I {
						position: relative;
						display: flex;
						flex-direction: column;
						text-align: center;
						padding: 20px;
						width: clamp(200px, 40vw, 800px);
						filter: drop-shadow(1px 1px 1px black);

						/* language button styles */

						& .lang {
							position: absolute;
							top: 10px;
							right: 10px;
							cursor: pointer;
							padding: 5px;
							border-radius: 20px;
							font-size: 14px;	
							background-color: rgba(128, 128, 128, 0.3);
							color: purple;							
							border: 4px solid purple;
							transition: all 0.1s ease-out;							
						}

						/* name and subject styles */

						& input, & input:placeholder-shown, & input:focus {
							align-self: center;
							margin: 4px 0px;
							width: 70%;
							max-width: 280px;
							padding: 5px;
							border: 2px solid purple;
							border-radius: 5px;
							outline: none;
							resize: none;
							background-color: rgba(128, 128, 128, 0.1);
							color: gray;
							font-family: 'Black Ops One';		
							transition: border-color 0.1s ease;
						}

						& input:focus {
							border-color: rgba(128, 0, 128, 0.1);
						}

						& input:hover {
							border-color: rgba(128, 0, 128, 0.5);
						}

						& input::placeholder {
							color: gray;
							font-family: 'Black Ops One';		
						}

						& input:valid {
							border-color: rgba(128, 0, 128, 0.1);
						}

						/* input autofill damage elimination */
						
						input:-webkit-autofill {
							transition: all 5000s ease-in;
						}

						/* message div */
						
						& .message {
							display: flex;
							flex-direction: column;
							margin-top: 20px;


							/* greetings */

							& .hello {
								display: flex;
								text-align: left;	
								padding: 0px 10px;						
							}

							/* message styles */					

							& label#message{
								display: flex;
								align-self: center;
								margin: 15px 0px;
								color: purple;
							}				

							& textarea, & textarea:placeholder-shown, & textarea:focus {
								display: flex;
								height: 200px;
								padding: 10px;
								margin: 0px 30px;
								border: none;
								border-radius: 5px;
								outline: 4px solid purple;
								outline-offset: 6px;
								resize: none;
								background: rgba(128, 0, 128, 0.1);
								color: gray;
								font-family: 'Black Ops One';								
							}

							& textarea:focus {
								outline-color: rgba(128, 0, 128, 0.1);
							}
							
							& textarea:hover {
								outline-color: rgba(128, 0, 128, 0.4);
							}

							& textarea::placeholder {
								color: purple;
								font-family: 'Black Ops One';							
							}

							& textarea:valid {
								outline-color: rgba(128, 0, 128, 0.1);
							}				
							
							/* farewell */
							
							& .regards {
								display: flex;
								margin-top: 30px;
								text-align: left;
								padding: 0px 10px;
							}
						}

						/* response and salutation preference styles */

						& select {
							align-self: center;
							cursor: pointer;
							margin: 4px 0px;
							width: 50%;
							max-width: 200px;
							padding: 5px;
							border: 2px solid purple;
							border-radius: 5px;
							outline: none;
							resize: none;
							background-color: rgba(128, 128, 128, 0.1);
							color: gray;				
							font-family: 'Black Ops One';					
						}

						& select:focus {
							border-color: rgba(128, 0, 128, 0.1);
						}

						& select:hover {
							border-color: rgba(128, 0, 128, 0.5);
						}

						& select[name=response] {
							margin-top: 25px;
						}

						& select:valid {
							border-color: rgba(128, 0, 128, 0.1);
						}

						/* privacy & policy styles */

						& input[type=checkbox] {
							width: initial;
							accent-color: plum;
						}

						& label#privacy-policy {
							cursor: pointer;
							margin-top: 25px;
							color: black;
						}

						/* button styles */

						& button {
							align-self: center;
							cursor: pointer;
							margin-top: 30px;
							padding: 5px;
							border: 2px solid gray;
							border-radius: 5px;
							background-color: rgba(128, 128, 128, 0.1);
							color: white;		
							font-family: 'Black Ops One';	
							font-size: 14px;
							filter: blur(3px);
							transition: all 0.1s ease-in-out;
						}

						& button.active {
							background-color: rgba(128, 128, 128, 0.3);
							color: purple;	
							border: 4px solid purple;
							font-size: 18px;
							filter: none;
						}
					}

					& form#form-I::after {
						content: "";
						position: absolute;
						top: -5px; left: -5px; right: -5px; bottom: -5px;
						border: 2px dashed purple;
						border-radius: 8px;
						filter: drop-shadow(2px 2px 2px black);
						z-index: -1;
					}

					& .links {
						display: flex;
						flex-direction: column;
						align-items: center;
						margin-top: 50px;
						
						& p {
							margin: 0px;
							margin-top: 5px;

							& a {
								color: purple;
								text-decoration: none;
							}
						}

						& p:first-child {
							margin-top: 30px;
						}
					}
				}

				& .second {
					display: flex;
					flex-direction: column;
					margin-top: clamp(10px, 5vw, 50px);
					margin-bottom: clamp(30px, 5vw, 50px);

					& .summary {
						cursor: pointer;
						display: flex;
						justify-content: center;
						transition: color 1.5s ease-in-out;
						margin: 10px 0px;
					}

					& .summary.opened {
						pointer-events: none;
						color: transparent;
					}

					& .summary.dark {
						color: purple;
					}

					& .summary.opened.dark {
						color: transparent;
					}

					& .details {
						display: flex;
						flex-direction: column;
						pointer-events: none;
						padding: 0px 20px;
						
						& p {
							color: transparent;
							background-color: transparent;
							margin: 5px 0px;
						}

						& p span.word {
							animation: show 1s ease-in-out forwards;
						}

						& p span.word.close {
							color: grey;
							animation: close 0.5s ease-in-out forwards;
						}
					}

					& .details.opened {
						cursor: pointer;
						pointer-events: all;
					}
				}
			}

			/* just for unstable elements of dynamic content  */
			& main.dark {
				& .middle.contact {

					& p {
						color: grey;
					}

					& form#form-I {

						& label#privacy-policy {
							color: grey;
						}

						& input, & input:placeholder-shown, & input:focus {
							color: white;
						}

						& input::placeholder {
							color: white;
						}

						& .message {

							& .hello {
								color: white;
							}

							& textarea, & textarea:placeholder-shown, & textarea:focus {
								color: white;
							}

							& textarea::placeholder {
								color: white;
							}

							& .regards {
								color: white;
							}
						}

						& select {
							color: white;	
						}						

						filter: drop-shadow(2px 2px 2px black);
					}
				}
			}

		}

		& footer {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 20px;
		}

		& footer.dark {
			color: gray;
		}
	}
}

body::before {
	content: "";
	position: fixed;
	inset: 5vw;
	background: url('./img/logo-full.svg') center/contain no-repeat;
	opacity: 0.1;
	z-index: -1;
	pointer-events: none; /* don't block clicks*/
}

body.dark {
	background-color: black;
}

/* canvas styles for parcticles effect */
.background {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  z-index: -1;
}

/* correction - just for safari browser */
body.safari { 
	font-family: 'Montserrat Alternates';
	font-weight: 600;
	font-style: italic;

	& .basic-div { 
		& .main-div { 
			& main { 

				& .first { 
					& article.contact { 

						& ul { 
							filter: none;

							& li {

								& span.at {
									font-family: 'Montserrat Alternates';
								}
							}
						}
					}
				}

				& .middle {
					& a.card-project {
						& .project {
							& #browser-header {
								& .browser { 
									filter: none;
								}
								& .browser::after {
									content: none;
								}
							}
							& img {
								filter: none;
							}
						}	
					}
				}

				& .middle.contact {
					& form#form-I {
						filter: none;

						& select {
							height: 5ex;
						}
					}
					& form#form-I::after {
						filter: none;
					}
				}
			}

			& main.dark {
				& .middle.contact {
					& form#form-I {
						filter: none;
					}
				}
			}
		}
	}
}

@media (hover: hover) and (pointer: fine) {
	/* desktop hover styles */
	body { 
		& .basic-div { 
			& .main-div { 
				& main { 

/* 					& .first { 
					}

					& .middle {
					} */

					& .middle.contact {
						& form#form-I {

							& .lang:hover {
								background-color: rgba(128, 128, 128, 0.6);
								color: white;
							}

							& button.active:hover {
								background-color: rgba(128, 128, 128, 0.6);
								color: white;
							}					

						}
					}
				}
			}
		}
	}		
}

@media (hover: none), (pointer: coarse) {
	/* mobile hover styles */
	body { 
		& .basic-div { 
			& .main-div { 
				& main { 

/* 					& .first { 
					}

					& .middle {
					} */

					& .middle.contact {
						& form#form-I {

							& .lang.mobile-hover {
								background-color: rgba(128, 128, 128, 0.6);
								color: white;						
							}

							& button.active.mobile-hover {
								background-color: rgba(128, 128, 128, 0.6);
								color: white;							
							}						

						}
					}
				}
			}
		}
	}	
}


@keyframes textBlow {
	35% {
		color: transparent;
	}
	100% {
		color: black;
	}
}

@media(min-width: 300px){
	body {
		& .basic-div {
			& .main-div {
				& main {
					& .middle {
						& a.card-project {
							& .project {
								& #browser-header {
									& .browser {
										& .find-plus {
											display: flex;
										}
									}
								}
							}
						}

						& a.card-project::after {
							content: '';
							display: flex;
							justify-content: center;
							align-items: center;
							position: absolute;
							top: 50%;
							left: 50%;
							width: 0%;
							height: 0%;
							transform: translateY(-50%) translateX(-50%);
							color: transparent;
							background-color: rgba(100, 100, 100, 0.7);
							border-radius: clamp(10px, 3vw, 20px);
							backdrop-filter: blur(2px);
							transition: all 0.6s ease;
						}

						& a.card-project:hover::after {
							top: 50%;
							left: -15px;
							width: clamp(100px + 30px, 50vw + 30px, 650px + 30px);
							height: 50%;
							transform: translateY(-50%);
							font-size: clamp(9px, 2vw, 25px);
							box-sizing: border-box;
							padding: clamp(10px, 2vw, 40px);
							animation: textBlow 1.8s ease-out forwards;
						}

						& a#dosing:hover::after {
							content: 'A simple medicine dosing calculator converting dosage data into micrograms per minute per kilogram of patient body weight. Recent results are stored locally.';
						}

						& a#to-do:hover::after {
							content: 'A small to-do app for creating and managing tasks. Users can select, edit, or delete individual items and download the to-do list as a screenshot.';
						}

						& a#duhacek:hover::after {
							content: 'This project was a collaboration with Lucie Bílková, a key member of the non-profit organization Duháček. The website represents the organization’s activities and facilities.';
						}

						& a#good-coffee:hover::after {
							content: 'Good Café is a fictional educational website that demonstrates the basics of web development using HTML, CSS, JavaScript, PHP, and MySQL.';
						}

						& a#valentine:hover::after {
							content: 'It’s a tiny little project made just for Valentine’s Day :D. You can grab it from my GitHub and use it to put a smile on your partner’s face!';
						}
					}
				}
			}
		}
	}
}

@media(min-width: 350px){
	body {
		& .basic-div {
			& h2.domain-header {
				display: block;
			}
			& .main-div {
				margin-top: clamp(0px, 2vw, 40px);
				& aside {
					align-items: center;
					& h1 {
						margin-left: 0px;
					}
				}

				& nav {
					justify-content: normal;
					& ul {
						display: flex;
						flex-grow: 1;
						justify-content: space-between;
					}
				}

				& main {
					& .first {
						& .logo {
							display: flex;
						}
					}
				}
			}
		}
	}
}

@media(min-width: 550px){
	body {
		& .basic-div {
			& .main-div {
				& main {
					& .first {
						flex-direction: row;

						& .logo {
							flex-grow: 1;
						}

						& article {
							flex-grow: 2;
							padding-right: 60px;

							& h3.article-header {
								margin: 20px 0px;
							}
						}

						& article.contact {
							padding-right: 30px;
							padding-left: 30px;
						}

						& article.not-img {
							padding-right: 0px;
						}
					}
				}
			}
		}
	}
}