:root {
	--color-cyan: #00bae7;
  }

.layout{
	
	font-family: 'Inter', sans-serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;

	h1, h2, h3, h4{
		color: var(--color-cyan);
		margin: 0px;
	}

	p{
		margin: 0px 0px 20px 0px;
	}


	.styled{
	
		h1, h2, h3, h4{
			margin: 0px 0px 20px 0px;
			padding: 0px;
		}
	
		&.cyan{	
			color: white;	
			background-color: var(--color-cyan);

			h1, h2, h3, h4{
				color: white;
			}

		}
	}

}


.layout{
	.section.footer{

		/*background-color: #37373A;*/

		background-color: #151d25;
		
		color: white;

	}

	.font-minor{
		font-size:normal;
	}

	.shy-ref a{
		text-decoration: none;
		color: inherit;
	}
}

/*  --- ### Chowcase ###  ---  */


.showcase{
	display: flex;
    flex-wrap: wrap;

	/*justify-content: space-around;*/
	justify-content: space-between;

	gap: 60px;

	& > .item{

		text-align: center;
		width: min-content;

		img{
			height: 156px;
			border: solid 1px rgba(0, 0, 0 ,0);
		}

		&:hover img{
			border-color: rgba(0, 0, 0, .2);
			filter: contrast(1.1);
		}

		a{
			text-decoration: none;
			color: black;

			font-weight:bold;
		}

		div{
			width: 100%;
			margin:10px 0px;
		}
	}
}

@media (max-width: 1010px){

	.showcase{
		gap:30px 0px;

		& > .item{

			img{
				height: 140px;
			}
		}
	}

}


/*  --- ### Text ### ---  */




.text{
	&.great{
		font-size:100px;
		line-height:100px;
		font-weight:bold;
	}

	&.color.cyan{
		color: var(--color-cyan);
	}
}

@media (max-width: 1010px){

	.text{
		&.great{
			font-size:40px;
			line-height:40px;
		}
	}

}