@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

body{
	font-family: 'Roboto', sans-serif;
	color: #000;
}


#container {
	width: 1500px;
	margin: 50px auto;
	padding:  20px;
	width: 50%;
	max-height: 800px;
}

#container h2 {
	text-align: center;
	color: #045;
}

#buttonContainer {
	text-align: center;
}
#quoteContainer{
	width: 75%;
	background: #fff;
	padding: 10px;
	margin: 0 auto;
	font-size: 1.1rem;
	margin: 2rem auto;
}

#quoteAuthor{
	margin: 0 auto;
	text-align: center;
	font-weight: bold;
    font-size: 1.5rem;
    font-style: italic;
}

#quoteButton {
    background-color: #00bcd4;
    color: #fff;
    font-size: large;
    padding: 0.4rem 2.5rem;
}

[type="radio"]:checked + label:after{
	width: 12px;
	height: 12px;
	position: absolute;
	top: 4px;
	left: 4px;
	border-radius: 100%;
	-webkit-transition:  all 0.2s ease;
	transition: all 0.2s ease;
	
	
}

[type="radio"]:not(:checked) + Label:after{
	opacity:  0;
	-webkit-transform:  scale(0);
	transform:  scale(0);

}

[type="radio"]:checked + label:after{
	opacity:  1;
	-webkit-transform:  scale(1);
	transform:  scale(1);
	
}