#container {
	opacity: 75%;

	border-radius:  30px;
	/*Height:  500px; */
	/*Width can not exceed 100% if you add in margin+padding */

	width:  90%;
	float: left;
	/*This makes the div float up, to left, aka centered*/

	margin-left:  0;
	margin-top:  10px;
	/* Margins use up 20% */

	padding:  5%;
	/*Padding right and left are 10% */

	background-color:  darkblue;
	font-size:  20pt;
	font-family:  Comic Sans MS;
}

body {
	margin: 10px;
	height: 100%;
	overflow: hidden;
	background-image: url(images/background.png);
}


div {
	border: 2px solid black;
	border-radius:  20px;
	color:  gold;
}

.header {
	border:  0px;
	font-size:  30px;
	font-style:  oblique;
}

.welcome {
	border:  0px white;
	font-size: 20px;
	font-family: cursive;
}

.graduating img{
	opacity: 130%;
	width: 30%;
}

.graduating {
	border: 0px;
	border-radius: 0px;
}

/* Add a black background color to the top navigation */
.topnav {
  background-color: royalblue;
  opacity: 80%;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}


.bubbles img{
	width: 50px;
	animation:  bubble 6s linear infinite;
}

.bubbles{
	border-width: 0px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	position: absolute;
	bottom: -70px;
}

@keyframes bubble{
	0%{
		transform: translateY(0);
		opacity: 1;
	}
	50%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		transform: translateY(-80vh);
		opacity: 0;
	}
}

.bubbles img:nth-child(1){
	animation-delay:  2s;
	width:  25px;
}
.bubbles img:nth-child(2){
	animation-delay:  1s;
}
.bubbles img:nth-child(3){
	animation-delay:  3s;
	width:  25px;
}
.bubbles img:nth-child(4){
	animation-delay:  4.5s;
}
.bubbles img:nth-child(5){
	animation-delay:  3s;
}
.bubbles img:nth-child(6){
	width: 28px;
	animation-delay:  6s;
}
.bubbles img:nth-child(7){
	width: 35px;
	animation-delay:  7s;
}

.row{
	border: 0px;
}

.row::after {
	border: 0px white;
	border-radius: 0px;
  content: "";
  clear: both;
  display: table;
}

.column {
	border: 0px white;
	border-radius: 0px;
  float: left;
  margin-left: 4px;
  width: 33%;
  position: relative;
  top: -80px;
}