@charset "UTF-8";
/* CSS Document */

:root {
	--primary-color: #D05345;
	--secondary-color: #C73715;
	--bg-color: #FFF;
	--dark-color: #000;
	--light-color: #FFF;
	--pnrr-color: #09244f;
	--hover-color: #EFEFEF;
	--gray-color: #D9D9D9;
	--dark-gray-color: #CFCFCF;
}

div.vertical-container {
	width: 6.5vw;
}

h1.vertical {
	font-size: var(--big-text-size);
}

span.home-title {
	font-size: max(3vw, 3vh, 1.5rem);
}

span.home-subtitle {
	font-size: max(1.5vw, 1.5vh, 0.8rem);
}

span.home-subtitle {
	color: var(--light-color);
	background-color: transparent;
}

div.index2 {
	font-size: max(1.5vw, 1.5vh, 0.8rem);
	letter-spacing: 0;
}

/* Horizontal line pages ---------------------------------- */ 

svg > circle {
	transition: filter 0.2s ease;
	cursor: pointer;
}

svg > circle:hover {
	filter: brightness(0.9);
}

div.text-container {
	display: flex; 
	align-content: center; 
	align-items: center; 
	flex-direction: column; 
	width:70vw;
}

div.line-container {
	width: 100%; 
	display: flex; 
	align-content: center; 
	align-items: center; 
	flex-direction: column
}

div.svg-titles {
	display: flex; 
	align-content: center; 
	align-items: center; 
	flex-direction: row; 
	font-size: var(--normal-text-size); 
	color: var(--light-color); 
	width: 100%; 
	margin-top: clamp(3rem, 2vw, 2vw);
}

div.svg-titles-recognize, div.svg-content-recognize {
	width: 25%;
}

div.svg-content-recognize {
	visibility: hidden;
}

div.svg-content {
	display: flex; 
	align-content: center; 
	align-items: flex-start; 
	flex-direction: row;
	margin-top: clamp(1rem, 1vw, 1vw);
	font-size: var(--normal-text-size); 
	color: var(--light-color); 
	width: 100%; 
}

div.div-side-nav {
	left: 5vw;
	width: calc(100vh - 2rem);
	transform: rotate(270deg);
	transform-origin: bottom left;
	display: flex;
	flex-direction: row;
	position: fixed;
	bottom: 2rem;
}

div.div-side-nav-block {
	border: 1px solid var(--dark-color); 
	flex-grow: 1;
	margin: 1vh; 
	padding: 1.5vh;
	display: flex; 
	flex-direction: row; 
	align-items: center; 
	align-content: center; 
	justify-content: space-between;
	transition: filter 0.2s ease;
	background-color: rgba(255, 255, 255, 0.3); 
}

div.div-side-nav-block:hover {
	filter: brightness(0.9);
}

div.div-side-nav-cut-borders {
  position: relative;
  padding: 20px;
  border: 1px solid transparent;
}

div.div-side-nav-cut-borders::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid black;
  clip-path: polygon(
	12px 0,
	calc(100% - 12px) 0,
	100% 12px,
	100% calc(100% - 12px),
	calc(100% - 12px) 100%,
	12px 100%,
	0 calc(100% - 12px),
	0 12px
	);
}

div.div-side-bullet {
	width: var(--normal-text-size); 
	height: var(--normal-text-size); 
	border: 1px solid var(--dark-color); 
	color: var(--light-color); 
	border-radius: calc(var(--normal-text-size) * 0.5); 
	margin-right: 10px;
	cursor: pointer;
}

div.div-side-bullet:hover {
	background-color: var(--gray-color); 
}


/* Detail pages ------------------------------------- */ 

div.div-detail-global-container {
	width: 85vw;
    margin-top: calc(var(--normal-text-size) * 8);
    font-size: max(1.5vw, 1.5vh, 0.8rem);
    letter-spacing: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

div.div-detail-container {
	width: 100%;
	display: flex; 
	flex-direction: column; 
	align-content: center;
    align-items: center;
	justify-content: space-between;
}

div.div-square-container-one-line {
	margin-top: 2vw;
	display: flex; 
	flex-direction: row; 
	border: 0; 
	width: 100%; 
	height: 100%; 
	align-content: center; 
	align-items: center; 
	justify-content: center;
}

div.div-detail-square {
	display: flex; 
	flex-direction: row; 
	border: 1px solid black; 
	width: 10vw; 
	height: 10vw; 
	border-radius: 2vw;
	align-content: center;
    align-items: center;
	justify-content: center;
    padding: 1vw;
	margin-left: 1vw;
	margin-right: 1vw;
    font-size: var(--normal-text-size);
	cursor: pointer;
	transition: background-color ease 0.3s;
}

div.div-detail-square:hover {
	background-color: var(--gray-color);
}

div.div-detail-square > span {
	display: block;
	width: 100%;
	text-align: center;
}

div.div-groups-container {
	color: var(--gray-color); 
	font-size: var(--normal-text-size); 
	width: 100%;
	display: flex;
	flex-direction: row;
	align-content: center;
    align-items: center;
	justify-content: space-between;
	font-weight: bold;
}

div.div-groups-container > span {
	cursor: pointer;
}

div#div-project-description {
	margin-top: 2vw;
	font-size: var(--caption-text-size); 
	width: 100%;
	border: 1px solid black; 
	border-radius: 1vw;
	padding: 1vw;
	visibility: hidden;
}

div#div-project-description > p {
	margin: 0;
}

/* Detail pages v2 ---------------------------------- */ 

div.div-detail-higher-container {
	display: grid; 
	grid-template-columns: 4fr 1fr; 
	gap: 1vw; 
	height: 65vh; 
	width: 85vw;
	box-sizing: border-box;
}

div.div-detail-lower-container-left {
	display: flex; 
	flex-direction: row; 
	border: 1px solid black; 
	width: 100%; 
	height: 65vh; 
	border-radius: 1vw; 
	align-content: center; 
	align-items: center; 
	justify-content: space-around;
	box-sizing: border-box;
}

div.div-detail-left-square {
	display: flex; 
	flex-direction: row; 
	border: 1px solid black; 
	width: 15vw; 
	aspect-ratio: 1;
	border-radius: 2vw;
	align-content: center;
    align-items: center;
	justify-content: center;
    padding: 1vw;
    font-size: var(--normal-text-size);
	cursor: pointer;
	transition: background-color ease 0.3s;
	margin: 1vh;
}

div.div-detail-left-square:hover, div#square-1:hover, div#square-2:hover, div#square-3:hover {
	background-color: var(--gray-color);
}


div.div-detail-lower-container-right {
	display: flex; 
	flex-direction: column; 
	border: 1px solid black; 
	width: 100%; 
	height: 65vh; 
	border-radius: 1vw;
	padding: 1vw;
	box-sizing: border-box;
}

div.div-detail-lower-container-right > span {
	color: var(--gray-color); 
	font-size: var(--normal-text-size); 
	width: 100%;
	display: flex;
	flex-direction: row;
	align-content: center;
    align-items: center;
	justify-content: space-between;
	font-weight: bold;
	cursor: pointer;
}

div#div-project-description-right {
	margin-top: 2vw;
	font-size: var(--caption-text-size); 
	width: 100%;
	border: 0;
	visibility: hidden;
}

div#div-project-description-right > p {
	margin: 0;
	text-align: left;
}