:root {
	--base-green: #58d902;
	--base-violet: #f089eb;
	--dark-green: #46692a;
	--dark-violet: #4e2a69;
	--very-dark-violet: #2a1e39;
	--dark-gray: #211f20;
}:root:has(input[id="ally-monocolor"]:checked) {
	--base-green: white;
	--base-violet: white;
	--dark-green: white;
	--dark-violet: white;
	--very-dark-violet: black;
}

html {
	color: black;
	font-family: monospace !important;
	font-size: 1.1rem;
	line-height: 1.8rem;
	background: url("/media/cosmos.gif");
}
html:has(input[id="ally-animation-off"]:checked){
  background: url("/media/cosmos-no-anim.gif");
}
html:has(input[id="ally-monocolor"]:checked){
  background: black !important;
}
body {
	max-width: 900px;
	margin: 0px auto;
	width: 100vw;
	padding: 0px;
}
h1,
h2,
h3,
h4 {
	margin: 0px;
}
h2,
h3 {
	color: var(--base-violet);
}
h4 {
	color: var(--base-green);
}
p {
	margin: 5px;
}
a {
	color: var(--base-green);
	text-underline-offset: 3px;
	&:hover {
		font-weight: 500;
		text-underline-offset: 4px;
	}
}
ul li {
	padding-bottom: 1rem;
}

header {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 6px;
	padding: 0px !important;
	flex-wrap: wrap;
	min-height: 3.5rem;
	overflow: hidden;
	border-radius: 0px 0px 10px 10px !important;
	.title {
		align-content: center;
		height: 100%;
		padding: 0px 1rem;
		text-decoration: none;
		& > * {
			margin: 0px;
		}
		@media screen and (width <= 50rem) {
			height: auto;
		}
	}
	nav {
		display: flex;
		gap: 1rem;
		justify-content: space-between;
		align-items: center;
		margin: 0px 1rem;
		@media screen and (width <= 50rem) {
			flex-wrap: wrap;
			gap: 0.5rem;
		}
	}
	@media screen and (width <= 50rem) {
	  min-height: 5.5rem;
		& > * {
			width: 100%;
		}
	}
}

main {
  width: 100%;
	gap: 7rem !important;
	margin-bottom: 10rem;
	margin-top: 15rem;
	@media screen and (width <= 50rem) {
	  width: 100vw;
	  gap: 10rem !important;
	  margin-top: 10rem;	
  }
}

footer {
  border-radius: 10px 10px 0px 0px !important;
}

menu {
	margin: 0px;
}

button {
  background-color: var(--very-dark-violet);
  color: var(--base-green);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  &:hover {
    filter: brightness(1.5);
  }
}

/* CLASSES */

.dark-green {
	color: var(--dark-green);
}
.dark-violet {
	color: var(--dark-violet);
}
.base-green {
	color: var(--base-green);
}
.base-violet {
	color: var(--base-violet);
}

.card {
	background-color: var(--very-dark-violet);
	color: white;
	border-radius: 10px;
	border: 2px solid var(--base-violet);
	padding: 0.5rem 1rem;
}

.flex-col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ring {
	font-size: 0.8rem;
	display: flex;
	justify-content: space-between;
	gap: 0.5rem;
	@media screen and (width <= 50rem) {
		flex-direction: column;
		gap: 0px;
	}
	border-top: 1px solid var(--dark-violet);
}

/* SPECIAL ELEMENTS */

#unhero {
	display: flex;
	gap: 2rem;
	font-style: italic;
	color: var(--base-violet);
	& > * {
		width: 50%;
		@media screen and (width <= 50rem) {
			width: 100%;
		}
	}
	#tags {
		font-style: italic;
		font-size: 0.9rem;
		color: var(--base-violet);
	}
	@media screen and (width <= 50rem) {
		flex-direction: column;
	}
}

#barto {
	h2 {
		align-items: center;
		display: flex;
		gap: 1.5rem;
		@media screen and (width <= 50rem) {
			flex-direction: column;
		}
		div {
			display: flex;
			gap: 1rem;
		}
		img {
			height: 2rem;
		}
		#pronouces {
			font-size: 1rem;
		}
	}
	#barto-desc {
		display: flex;
		gap: 1rem;
		@media screen and (width <= 50rem) {
			flex-direction: column;
		}
		p {
			margin: 0px;
		}
		#barto-pic {
			aspect-ratio: 1 / 1;
			height: 15rem;
			border-radius: 30%;
		}
	}
}

#resume-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	& > h3 {
		width: 100%;
	}
	& > * {
		width: 40%;
		@media screen and (width <= 50rem) {
			width: 100%;
		}
	}
}

#ally-controls {
  display: flex;
  justify-content: end;
  padding: 1rem;
  & > #ally-dialog > div {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    & > #ally-close {
      margin-top: auto;
    }
  }
}

#mutualaid{
  display: flex;
  a {
    margin: 0.5rem;
    background-color: var(--very-dark-violet);
  	border-radius: 10px;
  	border: 2px solid var(--base-violet);
  	padding: 0.5rem 1rem;
  	font-size:1.1rem;
  }
}

#funds {
  gap: 2rem !important;
  a {
    text-decoration: none;
    &:hover {
      outline-color: var(--base-green);
      outline-style: dashed;
      outline-offset: 0.5rem;
      text-decoration: none;
    }
  }
}