/* colors and fonts based on */
/* https://www.realtimecolors.com/?colors=0e010e-f8fded-1eebcd-ee7ff0-968db9&fonts=Rationale-Noto%20Sans */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Rationale');

:root {
    --text: #0e010e;
    --text-hover: #770877;

    --background: #f8fded;
    --background-dark: #e4f7ba;

    --primary: #1eebcd;
    --primary-light: #e8fdfa;

    --secondary: #ee7ff0;
    --secondary-light: #fce8fc;
    
    --accent: #968db9;
    --accent-light: #f0eff5;
}

body {
  font-family: 'Noto Sans Mono';
  font-weight: 400;
  height: calc(100vh - 1.5rem); /* get the margins to work with sticky bottom footer */
  margin: 0;
  background-color: var(--background);        
}

h1, h2, h3, h4, h5 {
  font-family: 'Rationale';
  font-weight: 700;
  color: var(--text);
}

html {font-size: 100%;} /* 16px */

h1 {
	font-size: 4.210rem; /* 67.36px */
	margin: 3.158rem 0 2.369rem 0;
}

h2 {
	font-size: 3.158rem; /* 50.56px */
	margin: 2.369rem 0 1.777rem 0;
}

h3 {
	font-size: 2.369rem; /* 37.92px */
	margin: 1.777rem 0 1.333rem 0;
}

h4 {font-size: 1.777rem; /* 28.48px */}

h5 {font-size: 1.333rem; /* 21.28px */}

small {font-size: 0.750rem; /* 12px */}

p {
    color: var(--text);
}

section {
    width: 80%;
    margin: 0 auto;
}

.content {
    margin: 2rem auto;
    padding: 1rem;
    /* border-radius: 10px; */
}

i {
	font-size: 1.5rem;
	color: var(--text);
	margin-left: 0.25rem;
}

hr {
	width: 75%;
	color: var(--background-dark);
	margin: 2rem auto;
}

button {
	width: 10rem;
	height: 3rem;
	font-size: 1rem;
	border: none;
	border-radius: 10px;
	cursor: pointer;
}

.atrocious {
	background-color:crimson
}

.so-so {
	background-color: coral;
}

.delightful {
	background-color: greenyellow;
}

/* ~~~~~ Login ~~~~~ */
.login-flex {
	display: flex;
	width: 100%;
	height: 100vh;
	align-items: center;
	justify-content: center;
}

.login {
	margin: auto;
}

/* ~~~~~ Home ~~~~~ */
#for-a {
	font-size: 3rem;
	font-style: italic;
	color: transparent;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--text);
}

#new-member {
	background: linear-gradient(120deg,var(--primary),var(--secondary));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.home-flex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1.5rem;
}

.home-flex a, .home-flex div {
	border-radius: 10px;
	padding: 1rem;
}

.home-flex a {
	text-decoration: none;
	color: var(--text);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 250px;
}

#get-crackin {
	background-color: var(--primary);
	flex: 1;
	transition: 0.2s;
	padding: 2rem;
}

#get-crackin:hover {
	background-color: var(--primary-light);
}

#unlocked {
	background-color: var(--secondary);
	flex: 1;
	transition: 0.2s;
	padding: 2rem;
}

#unlocked:hover {
	background-color: var(--secondary-light);
}

.home-flex div {
	flex: 2;
	background-color: var(--accent-light);
	padding: 2rem;
	min-width: 500px;
	padding: 1rem 2rem;
}

@media (max-width: 1400px) {
	.home-flex {
		flex-wrap: wrap;
	}
}

/* ~~~~~ Cracker ~~~~~ */
div.cracker-flex {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-between;
	gap: 1.5rem;
}

.cracker-name, .cracker-alt, .cracker-rank, .cracker-year, .cracker-other {
	padding: 2rem;
	border-radius: 10px;
}

.cracker-name {
	flex: 4 1 40rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.cracker-actions {
	display: flex;
	flex-direction: column;
	justify-content: end;
}

.cracker-actions a {
	margin: 0.75rem;
	align-self: end;
}

.action-buttons {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.action-buttons button:hover {
	transform: translate(0, -3px);
    transition: transform ease 0.2s;
}

.cracker-alt {
	flex: 2 1 20rem;
}

.cracker-rank {
	flex: 2 1 10rem;
	background-color: var(--accent-light);
}

.cracker-year {
	flex: 2 1 20rem;
	background-color: var(--accent);
}

.cracker-other {
	flex: 3;
	background-color: var(--text-hover);
}

.b {
	background-color: var(--primary);
}

.g {
	background-color: var(--secondary);
}

.anti-b {
	background-color: var(--secondary);
}

.anti-g {
	background-color: var(--primary);
}

.b-light {
	background-color: var(--primary-light);
}

.g-light {
	background-color: var(--secondary-light);
}

#rank-chart {
	/* max-width: 15rem; */
	max-height: 15rem;
}

div.cracker-rank div {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	gap: 0.5rem;
	align-items: last baseline;
}

div.cracker-rank h3, div.cracker-rank h5 {
	display: inline;
	margin: 0;
}

div.year-flex {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

div.year-flex h3, div.year-flex h5 {
	margin: 0.25rem;
}

div.year-flex div {
	min-width: 8rem;
}

.collapsible {
	background-color: var(--accent-light);
	/* cursor: pointer; */
	padding: 0 1.5rem;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
}

.filters {
	border-radius: 10px;
	margin: 1rem 0;
	padding: 0 1.5rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: var(--accent);
}

.collapsible:after {
	content: '\002B';
	/* color: white; */
	font-weight: bold;
	float: right;
	margin-left: 5px;
}

.active:after {
	content: "\2212";
}

div.filters form {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: space-around;
}

div.filters form div {
	background-color: var(--accent-light);
	border-radius: 10px;
	margin: 0.5rem 1.5rem;
	padding: 0.5rem 1.5rem;
}

/* ~~~~~ Unlocked ~~~~~ */
.ranked-flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.ranked-item {
	flex: 1;
}

.ranked-item button:hover {
	transform: translate(0, -3px);
    transition: transform ease 0.2s;
}

.ranked-flex div button {
	width: fit-content;
	padding: 0.25rem 0.75rem;
	margin: 0.5rem;
}

.popup, .popup-other, .popup-search {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.2);
	z-index: 1;
}

.popup-content {
	background-color: var(--accent-light);
	width: 50%;
	margin: 4rem auto;
	padding: 1.5rem;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	align-items: start;
}

#close {
	margin: 0.5rem;
	background-color: var(--accent);
	align-self: end;
}

button i {
	font-size: large;
}

#match-btn {
	height: 2rem;
	width: 6rem;
	padding: 0.25rem 1.5rem;
	background-color: var(--accent);
}

#match-select {
	height: 2rem;
	width: 12rem;
}

.other-liked {
	/* background-color: var(--accent-light); */
	width: 100%;
}

.match-search-flex {
	display: flex;
	flex-direction: row;
}

.match-search-flex form, .match-search-flex div {
	flex: 1
}

#search-output {
	height: 5rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}

#search-output button {
	width: fit-content;
	padding: 0.25rem 0.75rem;
	margin: 0.5rem; 
}

#search-input {
	width: 12rem;
	height: 2rem;
}

.sparkles {
	border: 4px solid var(--accent);
	animation-name: sparkles;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

@keyframes sparkles {
	0% {border: 4px solid var(--accent);}
	50% {border: 4px solid var(--background);}
	100% {border: 4px solid var(--accent);}
}

/* ~~~~~ Register ~~~~~ */
.register {
	width: 420px;
	margin: 2rem 0;
}

.register form {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding-top: 20px;
}

.register form label {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
    height: 50px;
	background-color: var(--secondary);
    border-radius: 10px;
}

.register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
	width: 310px;
	height: 50px;
	border: 2px solid var(--accent);
    border-radius: 10px;
	margin-bottom: 20px;
    margin-left: 20px;
	padding: 0 15px;
}

.register form input[type="submit"] {
	width: 100%;
	padding: 15px;
	margin: 20px 0;
	background-color: var(--primary);
    border: 0;
    border-radius: 10px;
	/* cursor: pointer; */
}

.register form input[type="submit"]:hover {
    transform: translate(0, -3px);
    transition: transform ease 0.2s;
}

#profile-table {
    background-color: var(--secondary-light);
	border-radius: 10px;
	padding: 1rem;
}

#profile-table td {
	width: 15rem;
	padding: 0.5rem;
}

/* ~~~~~ Navbar ~~~~~ */
.navtop {
	background-color: var(--background-dark);
    border-radius: 10px;
    margin: 1.5rem 4.5rem;   
	height: 60px;
}

.navtop div {
	display: flex;
	margin: 0 auto;
	width: 80%;
	height: 100%;
}

.navtop div p, .navtop div a {
	display: inline-flex;
	align-items: center;
}

.navtop div p {
	flex: 1;
	font-size: 24px;
	padding: 0;
	margin: 0;
	color: var(--text);
}

.navtop div a {
	padding: 0 20px;
	text-decoration: none;
	color: var(--text);
}

.navtop div a i {
	padding: 0.25rem;
}

.navtop div a:hover {
	color: #480548;
	transform: translate(0, -3px);
    transition: transform ease 0.2s;
}

#egg {
	font-size: 2rem;
	margin-right: 1rem;
}

/* ~~~~~ Footer ~~~~~ */
footer {
	position: sticky;
	top: 100%;
	margin: 1.5rem 4.5rem;
	background-color: var(--background-dark);
	min-height: 60px;
    border-radius: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

footer p {
	margin: auto 1.5rem;
}