﻿html {
    box-sizing: border-box;
    text-size-adjust: 100%;
    
    margin: 0;
    padding: 0;
}

*, *::before, *::after {
  box-sizing: inherit;
}

h1 {
	font-size: 1.625em;
	text-transform: uppercase;
}

h2, h3, h4, h5, h6, p {
	font-size: 1em;
}

h2 span {
	font-size: 1.25em;
	text-transform:uppercase;
}

img {
	width: 100%;
}

#info {
	border-radius: 12px 12px 12px 12px;
/*	background-color: #e8c944; */
	background-color: white;
	padding: 10px 10px 16px 10px;
}

#show {
	position: relative;
	top: 36px;
	padding: 4px;
}

/*#show img {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 20px;
} */

.covid {
	background-color: #CC99FF;
	padding: 15px 15px;
}

.heading {
	color: purple;
	font-weight: bold;
	font-variant-caps: titling-caps;
}

#information {
	display: flex;
	flex-direction: row;
	width: 100%;
	margin: auto;
	padding: 1em 2em 0em 2em;
}

.synopsis{
	background-color: rgb(234, 235, 225);
	padding: 20px;
}

.advisory {
	color: crimson;
}

article {
	position: relative;
	margin: auto;       
	width: 70%;
	padding: 10px 0px;
}

article p {
	text-align: justify;
}

aside {
	position: relative;
	width: 30%;
	padding: 92px 0px;
	margin-left: 10%;
	font-size: 1em;
}

aside ul {
	list-style-type:none;
	padding: 4px;
}

aside li a:link{
	text-decoration: none;
	color: black;
}

aside li a:visited{
	text-decoration: none;
	color: black;
}

aside li a:hover{
	text-decoration: none;
	display: block;
	color: red;
}

aside li a:active{
	text-decoration: none;
	color: red;
}

#castcrew{
	padding: 0em 2em;
/*	background-color:whitesmoke;
	border-radius: 12px 12px 12px 12px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
}

.button2 {
	float: right;
	background-color: #39104f;
	border: none;
	border-radius: 6px;
	color: #e8c944;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	display: block;
	font-size: 1.25em;
	margin: 12px 0px;
	cursor: pointer;
	width: 100%;
}

aside .button2 {
	float: left;
	background-color: #39104f;
	border: none;
	border-radius: 18px;
	color: #e8c944;
	text-align: center;
	text-decoration: none;
	display: block;
	font-size: 16px;
	margin: 12px;
	cursor: pointer;
	width: 120px;
}

.button2:hover {
	background-color: #52216d;
	font-weight: bold;
}

.column {
	float: left;
	width: 33.33%;    /* 2 cols = 50%, 4 cols = 25%  */
	padding: 0;
}

.column2 {
	float: left;
	width: 50%;    /* 2 cols = 50%, 4 cols = 25%  */
	padding: 0;
}

.cards {
/*	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 1rem; */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	}
	
.card {
	margin-bottom: 1rem;
	}
	
.card img {
	width: 100%;
	}