html, body {
	height: 100%;
	margin: 0;
}

.container1 {
	width: 100%;
}

/* Container styling*/
.container2 {
	clear: both;
	display:flex;
	background-color: rgba(0,0,255,.25);
	border: 1px solid black;
	text-align: center;
}

/* Style the navigation menu */
.navbar {
	width: 100%;
	background-color: rgba(0,0,255,.25);
	border-bottom: 15px solid black;
	overflow: auto;
}

/* Navigation links */
.navbar a {
	float: left;
	padding: 12px;
	color: white;
	text-decoration: none;
	font-size: 17px;
	width: 33.33; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
	text-align: center; /* If you want the text to be centered */
}

.container3 {
	clear: both;
	display: grid;
	grid-template-columns: 33% 33% 33%;
	column-gap: .5%;
	background-color: blue;
	padding: 10px;
}

.container3 div {
	background-color: #f1f1f1;
	border: 1px solid black;
	padding: 20px;
	font-size: 30px;
	justify-content: center;
	text-align: center;
	object-fit: cover;
}

/* Center the main title */
h1 {
	text-align: center;
	background-color: rgba(0,0,255,.25);
	border: 1px solid black;
	color: white;
	font-weight: 400;
}

h2 {
	text-align: center;
	background-color: rgba(0,0,255,.25);
}

h3 {
	text-align: center;
	background-color: rgba(0,0,255,.25);
}

/* Footer Styling */
footer {
	background-color: rgba(0,0,255,.25);
	color: white;
    width: 100%;
	padding: 10px;
	border: 1px solid black;
	position: fixed;
    left: 0;
    bottom: 0;
	overflow: auto;
    ;
}

footer p {
    float: left;
    margin: 0;
    padding-left: 10px;
    font-style: italic;
	
}

footer a {
	
	float: right;
    margin: 0;
    padding-right: 10px;
    font-style: italic;
    color: white;
    text-decoration: none;
	
}

footer a:visited {
    color: white !important;
}

footer a:hover {
    color: yellow !important;
    text-decoration: underline;
}


/* Last div styling */
.last-div {
	clear: both;
  /* width: 100%;  
  background-color: rgba(0,0,255,.25);
  border: 1px solid black;
  text-align: right;
  padding: 10px;*/
}

/* Link properties*/
a:link {
	color: blue;
	background-color: transparent;
	text-decoration: none;
}
a:visited {
	color: purple;
	background-color: transparent;
	text-decoration: none;
}
a:hover {
	color: red;
	background-color: transparent;
	text-decoration: underline;
}
a:active {
	color: yellow;
	background-color: transparent;
	text-decoration: underline;
}


.card {
  /* Add shadows to create the "card" effect */
	clear: both;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
	transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-title {
	text-align: center;
    font-size: 2em;
    color: white;
    font-weight: 400;
}

.card-content {
	list-style-type: decimal;
}

/* Add some padding inside the card container */
.container {
	clear: both;
	width: 100%;
	display: flex;
	gap:10px;
	justify-content: flex-start;
	padding: 2px 16px;
	color: black;
	margin: 2% 5% 100px 5%; /* Container margin shorthand */
}

/* Ordered list and title */
.card-content,
.card-content h2 {
	border: none;
	border-radius: none;
}

.card-content ol {
	padding: 2px 16px;
	list-style: decimal inside;
	color: black;
}



ul.a {list-style-type: circle;}
ul.b {list-style-type: disc;}
ul.c {list-style-type: square;}

ol.d {list-style-type: upper-roman;}
ol.e {list-style-type: lower-roman;}
ol.f {list-style-type: lower-alpha;}
ol.g {list-style-type: decimal;}


/* Movies table styling */
#movies {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 30px;
}

#movies th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
}

#movies td {
    border: 1px solid #ddd;
    padding: 8px;
}