/* CSS Document */

	
	:root {
		font-size: 16px;	
	}
	
	*{
		font-family: Inter, Open Sans, Arial, Helvetica, sans-serif;
		color: #ffffff;
	}

	html {
		box-sizing: border-box;
		scroll-behavior: smooth;
		-webkit-text-size-adjust: 100%;
	}
	
	*, *:before, *:after {
		box-sizing: inherit;
	}
		
	body {
		background: #333333;
		background-size: cover;
		background-repeat: no-repeat;
		line-height: 1.5;
		margin: 0;
		padding: 0;
	}

	.section-divider {
		position: relative;
		height: 0.5em; /* spacing only */
	}
	
	.section-divider.padded {
		position: relative;
		height: 0.5em; /* spacing only */
		margin-top: 1em;
		margin-bottom: 1em;
		
	}
	
	.section-divider::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
	
		width: 7em;           /* controls length */
		height: 3px;           /* thickness */
	
		background: linear-gradient(90deg, #7c3aed, #06b6d4);
		border-radius: 2px;
	}  
	


	.container {
		flex-direction: column;
		display: flex;
		flex: 1;
		max-width: var(--max-width);
		margin-left: auto;
		margin-right: auto;
		border: var(--working-borders);
		border-color: var(--color-yellow);
		justify-content: left;
		padding: 1.5em;
		padding: 2em;
		padding-top: 2.5em;
		
	}

	
	.container {
		margins: 0;
		padding: 0;
		display: flex;
		justify-content: center; /* horizontal center */
		align-items: center;     /* vertical center */
		height: 100vh;           /* full viewport height */
	}


.content {
	width: 100%;
	margin-left: auto;
    margin-right: auto;
	border: var(--working-borders);
	border-color: var(--color-teal);
    justify-content: left;
	padding: 1.5em;
	
	
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    grid-template-rows: auto;
    grid-template-columns:  1fr;
    grid-auto-columns: 1fr;
    display: grid;
	max-width: 1400px;
}

.content {
  display: grid;
  grid-template-columns: 100%;  /* first column 30%, second column 70% */
  margin-top: 2em;
}


	.content {
		
		display: block;
		background: rgb(17, 25, 56);
		min-height: 800px;
		max-width: 640px;
		margin: auto;
		margin-bottom: auto;
		padding: 60px;
		border-radius: 5px;
		color: #ffffff;
		
		background-image: url(../../images/wave-blue.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 50% 70%;
		position: relative;
		
	}
	
	.content div {
	color: #ffffff;
		
	}
	
	.slide-controls {
		color: #ffffff;
		margin: auto;
		margin-top: 0;
	}
	
	.slide-controls {
		color: #ffffff;
		margin: auto;
		margin-top: 0;    
	}
	
	.nav-link {
		position: absolute;
		bottom: 2em; 
		color: rgb(83, 101, 228);
		text-decoration: none;	
		margin-top: 2em;	
	}
	
	.nav-link.previous {
		left: 4em;
	}
	
	.nav-link.next {
		right: 4em;
		
	}
	
	.nav-link.close {
		color: #ffffff;
		top: 1em; 
		right: 3em;
		border: solid 1px #ffffff;
		height: 2em;
		width: 2em;
		text-align: center;
		border-radius: 50%;
		padding-top: 0.2em;
		
	}
	
	.interests {
		font-size: 0.7em;
		margin-bottom: 6px;
	}
	
	.title {
		font-size: 2.7em;
		line-height:normal;
		margin-top: 0.7em;
	}
	
	.sub-title {
		font-size: 1.2em;
		margin-top: 0.7em;
	}
		
	.author {
		font-size: 1.2em;
		position: absolute;
		bottom: 60px;         /* stick to bottom */
		left: 60px;           /* optional: align left */

	}
	
	.author p {
		font-size: 0.8em;
		color: #ffffff;
		margin: 0;
	}
	
	.link-button {
		display: inline-block;
		padding: 0.35em 2.0em;
		border-radius: 24px;
		margin-top: 0.6em;
		margin-bottom: 1.2em;
		transition: all 0.2s ease-in-out;
		min-width: 200px;
		cursor: pointer;
	}
	
	.cta-button {
		display: inline-block;
		padding: 0.45em 2.0em;
		border-radius: 24px;
		margin-top: 1.0em;
		margin-bottom: 1.5em;
		transition: all 0.2s ease-in-out;
		width: 300px;
		min-width: 200px;
		max-width: 100%;
		cursor: pointer;
	}
    
	

@media only screen and (max-width: 249.98px) {

}

@media only screen and (min-width: 250px) {

}

@media only screen and (min-width: 320px) {

}

@media only screen and (min-width: 360px) {

}

@media only screen and (min-width: 375px) {

}

@media only screen and (min-width: 385px) {

}

@media only screen and (min-width: 390px) {

}

@media only screen and (min-width: 414px) {

}

@media only screen and (min-width: 527px) {

}

@media only screen and (min-width: 640px) {

}

@media only screen and (min-width: 768px)  {
	
}

@media only screen and (min-width: 1024px) {

}

@media only screen and (min-width: 1366px) {

}

@media only screen and (min-width: 1440px) {

}

@media only screen and (min-width: 1680px) {

}

@media only screen and (min-width: 1920px) {

}

@media only screen and (min-width: 2560px)  {

}