:root{
    --accent-color: #00adef;
}

::-webkit-scrollbar{
    display: none;
}

/* ---------- */

.page-content-container {
    width: 70%;
    min-width: 100vw;
    height: auto;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.page-content-container > img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    position: absolute;
}

.content-container {
    position: relative;
    width: 100%;
    display: flex;
  	flex-direction: row;
    align-items: center;
    justify-content: center;
}

.content-container > h1 {
    position: relative;
    width: 100%;
    align-self: flex-start;
  	text-align: center;
}

.questions-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: space-evenly;
	min-height: 40vmin;
  	width: 40vw;
  	/*outline: solid black 2px;*/
}

.answers-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  	gap: 1vmin;
  	min-height: 40vmin;
  	width: 40vw;
  	/*outline: solid black 2px;*/
}

.content-navigation-container {
    position: relative;
  	display: flex;
  	flex-direction: row;
  	gap: 1vmin;
}

.content-navigation-container > button {
    align-items: center;
    border: none;
    /*background: linear-gradient(144deg,#61258b, #352791 50%,#007c85);*/
  	background-color: #00adef;
    border-radius: .5rem;
    padding: 1vmin 2vmin;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    max-width: 100%;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
}

.content-navigation-container > button:active,
.content-navigation-container > button:hover {
    outline: none;
}

.question-controller {
  display: none;
}

/* ---------- */
.questions-container > .question-radio-group {
  	position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    background-color: #fefefe;
    border-radius: 1rem;
    padding: 2vmin;
    box-shadow: 0 0 25px var(--accent-color);
  	width: auto;
  	max-width: 80%;
  	font-size: 1.2em;
}

.answers-container > .answer-box {
  	position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: left;
    background-color: #fefefe;
  	width: 80%;
    border-radius: 1rem;
    padding: 2vmin;
    box-shadow: 0 0 25px var(--accent-color);
  	opacity: 0;
}

/* ---------- */

@media only screen and (max-width: 1200px) {
  .page-content-container {
    	width: 100%;
    	min-width: 100vw;
    	height: auto;
    	display: flex;
    	align-items: start;
    	justify-content: center;
    	position: relative;
	}
  
  .page-content-container > .content-container {
    	position: relative;
    	width: 100%;
    	display: none;
  		flex-direction: column;
    	align-items: center;
    	justify-content: space-around;
	}
  
  	.content-container > .question-container {
    	width: 90%;
      	margin: 5vmin;
	}
  
    .content-container > .info-container {
      	width: 90%;
      	margin: 5vmin;
      	display: none;
  	}
  
  	.content-container > .content-navigation-container {
    	position: relative;
    	display: flex;
    	align-items: center;
    	justify-content: start;
    	gap: 1vmin;
    	bottom: -25%;
	}
  
  	.content-navigation-container > button {
    	align-items: center;
    	border: none;
      	font-size: 200%;
    	/*background: linear-gradient(144deg,#61258b, #352791 50%,#007c85);*/
  		background-color: #00adef;
    	border-radius: .5rem;
    	padding: 1vmin 2vmin;
    	color: #FFFFFF;
    	display: flex;
    	justify-content: center;
    	max-width: 100%;
    	text-decoration: none;
    	user-select: none;
    	-webkit-user-select: none;
    	cursor: pointer;
      	margin: 0 0 5vmin 0;
	}
}