/* DESKTOP */

#info {
	width: calc(100% - var(--marginY) * 2);
	position: fixed;
    top: 0;
    left: 0;
	display: grid;
	grid-template-columns: var(--sixGrid);
	grid-gap: 0 var(--gridGap);
    padding: var(--marginX) var(--marginY);
  	z-index: 50;
}

.about {
	height: calc(100vh - var(--marginX) * 2);
	position: relative;
	grid-column: 2 / 6;
	margin-top: calc(var(--marginX)*-1);
	padding: var(--marginX) calc(var(--marginY)*4) var(--marginX) calc(var(--marginY)*1.2);
	opacity: 0;
	transition: opacity var(--transitionTime);
	pointer-events: none;
    overflow-y: scroll;
    
}

.about p:not(:nth-child(2)) {
	text-indent: calc(var(--marginY) * 5);
}

.about.show {
	opacity: 1;
	pointer-events: auto;
}

.close {
	height: calc(var(--largeFont)*0.75);
	width: calc(var(--largeFont)*0.75);
	position: absolute;
	right: calc(var(--marginY)*1.2);
	bottom: calc(var(--marginX)*0.5);
	background: transparent;
	z-index: 150;
	cursor: pointer;
    display: flex;
    justify-content: center;
}

.close_line_1, .close_line_2 {
	position: absolute;
	height: 100%;
	border-left: var(--borderLine);
	margin-left: calc(var(--marginY)*1.2);
	transform-origin: center;
	transition: border-color var(--transitionTime);
}

.close_line_1 {
	transform: rotate(45deg);
}

.close_line_2 {
	transform: rotate(-45deg);
}

.close:hover .close_line_1, .close:hover .close_line_2 {
	border-color: var(--hoverColor);
}

/* MOBILE */
@media (max-width:600px) {

	.about {
		grid-column: 1 / 7;
		margin-top: calc(var(--marginX)*2);
    	padding: 0 calc(var(--marginY)*1) var(--marginX) 0;
	}
	
	.about p:not(:nth-child(2)) {
		text-indent: calc(var(--marginY) * 2);
	}
	
	.close {
		position: fixed;
		right: calc(var(--marginY)*1.2);
		bottom: calc(var(--marginX)*1);
	}
	
	.close_line_1, .close_line_2 {
		border-left: 2px solid var(--paletteBlack);
	}

}