.dashboard{
	opacity: 0;
}

body{
	gap: 50px
}

hr{
	background-color: var(--secondary);
	margin-block: 1em;
	height: 0.125em;
	width: 80%;
	opacity: 20%;
}

#index{ 
	aside.side-panel{
		border: 0;
		background-color: transparent;
		box-shadow: none;
		display: grid;
		width: 250px;
		padding: 10px;
		row-gap: 50px;

		button{
			height: 230px;
			width: 230px;
			border: 4px solid #000000;
			background-color: var(--background);
			transition: background-color 0.2s;
			border-radius: 30px;
			box-sizing: border-box;

			font-size: clamp(1.125rem, 1.037rem + 0.2817vw, 1.375rem);
		}

		button:hover{
			background-color: var(--dimmer-dark);
		}

		#profile-username{
			font-size: var(--font-size-p1);
			font-weight: 550;
		}
	}

	main.dashboard{
		width: 100%;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		
		.link-info{
			padding: 20px;
			border: 4px solid #000000;
			border-radius: 30px;
			box-sizing: border-box;
			gap: 10px;
			
			.short-link-title{
				color: var(--accent);
				font-family: "Sora";
				font-size: clamp(1.75rem, 1.596rem + 0.493vw, 2.1875rem);
				font-weight: 600;
			}

			.short-link-description{
				font-size: clamp(1.5rem, 1.2359rem + 0.8451vw, 2.25rem);
			}

			.long-link{
				color: var(--accent);
				overflow: hidden;
				display: inline-block;
				white-space: nowrap;
				text-overflow: ellipsis;
				max-width: 430px;
			}

			.infographics{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				gap: 20px;

				div:not(.click-num div), img{
					flex: 1 1 auto; 
					min-width: 200px; 
					max-width: 360px; 
				}

				.click-num, .locations{
					width: 100%;
					max-width: 250px;
				}

				.click-num{
					display: grid;
					grid-template-columns: 1fr 1fr;
					justify-items: center;

					p{
						margin: 0;
						text-align: right;
					}

					.infographics-number{
						font-size: var(--font-size-p2);
						font-weight: 650;
					}
				}

				.locations{
					max-height: 250px;
					overflow-y: auto;
				}

				.not-graphic{
					padding-top: 20px;
				}
				
				.infographics-minititle{
					text-align: center;
					margin-block: 0;
				}

				hr.mobile-divider{
					display: none;
				}

				img{
					height: auto;
					width: 360px;
					max-width: 360px;
				}

				canvas{
					padding: 25px;
				}
			}
		}
	}
}

@media (max-width: 767px) and (orientation: portrait) and (pointer: none), 
(max-width: 767px) and (orientation: portrait) and (pointer: coarse), 
(max-width: 1050px) and (orientation: portrait) and (pointer: fine) {
	body{
		padding-bottom: 0;
	}

	#index#index{
		flex-direction: column;
		gap: 30px;

		aside.side-panel{
			column-gap: 50px;
			justify-items: center;
			grid-template-columns: 1fr 1fr;
			width: 100%;

			button{
				height: 170px;
				width: 170px;
			}
		}

		main.dashboard{
			height: calc(100vh - 330px);

			.link-info{

				.infographics{
					gap: 0;

					hr.mobile-divider{
						display: block;
					}

					div.not-graphic, div.not-graphic div{
						width: 100%;
						max-width: none;
					}
				}

				.infographics, div:not(.locations){
					display: grid;
					justify-items: center;

					canvas{
						padding: 0;
					}
				}
			}
		}
	}
}