bubble.css

body, html {
	height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	scroll-behavior: smooth;
	font-size: 15px;
	
}
.bg-image{
	background-image: url("../img/aquarium.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	min-height: 100%;
	position: relative;
	background-color: #000851;

}
#bg-color{
	height: auto;
	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
 	 background-size: cover;
	background: linear-gradient(180deg, #1CB5E0 0%, #000851 100%);
	
}


#background-wrap {
    bottom: 0;
	left: 0;
	
	right: 0;
	top: 0;

}

section {
	width: 100%;
	height: 100%;
  text-transform: uppercase;
 
  
  }
  section::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80%;
	
  }
  
  
  /*scroll bar*/
  .demo a {
	position: absolute;
	bottom: 20px;
	left: 50%;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	color: #fff;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 24px;
	font-weight: bolder;
	letter-spacing: .1em;
	text-decoration: none;
	transition: opacity .3s;
  }
  
  
  #scroll a {
	padding-top: 60px;
  }
  #scroll a span { /*circle border*/
	position: absolute;
	top: 0;
	left: 45%;
	width: 55px;
	height: 55px;
	margin-left: -23px;
	border: 4px solid #fff;
	border-radius: 100%;
	box-sizing: border-box;
	background-color: blue;
	
  }
  #scroll a span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: '';
	width: 20px;
	height: 20px;
	margin: -12px 0 0 -10px;
	border-left: 7px solid #fff;
	border-bottom: 7px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-sizing: border-box;

  }
  #scroll a span::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 45px;
	height: 45px;
	box-shadow: 0 0 0 0 rgb(255, 255, 255);
	border-radius: 100%;
	opacity: 0;
	-webkit-animation: sdb03 6s infinite;
	animation: sdb03 6s infinite;
	box-sizing: border-box;

  }
 
  @-webkit-keyframes sdb03 {
	0% {
	  opacity: 0;
	}
	30% {
	  opacity: 1;
	}
	60% {
	  box-shadow: 0 0 0 90px rgba(130, 109, 189, 0.3);
	  opacity: 0;
	}
	100% {
	  opacity: 0;
	}
  }
  @keyframes sdb03 {
	0% {
	  opacity: 0;
	}
	30% {
	  opacity: 1;
	}
	60% {
	  box-shadow: 0 0 0 70px rgba(255,255,255,.2);
	  opacity: 0;
	}
	100% {
	  opacity: 0;
	}
  }
  /*end of scroll bar*/
  
  
  
  .content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 5vw;
	font-family: 'Montserrat', sans-serif;
	width: 100%;
	text-align: center;
	text-transform: uppercase;
	animation: pulse 7s linear infinite;
	text-shadow: -4px 5px 0 #fff, -10px 7px 0 rgb(220, 220, 220);
	text-shadow: -1px 5px 0 black;
}

@keyframes pulse{
	0% {
		color: lightcoral;
	}
	20% {
		color: coral;
	}
	30% {
		color: rgb(70, 221, 70);
	}
	40% {
		color: blueviolet;
	}
	50% {
		color: indigo;
	}
	60% {
		color: lightcoral;
	}
	70% {
		color: coral;
	}
	80% {
		color: lime;
	}
	90% {
		color: blueviolet;
	}
	100% {
		color: indigo;
	}
	

}


/* Start of Bubble Animation */

 #bubble-wrap {
    bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}

/* Keyframes for Bubble Animation */

/* Bubble movement when moving from top to bottom*/
@-webkit-keyframes bubblesAnimation {
    0% {
        margin-top: 70px; /*starting point*/
    }
    100% {
        margin-top: -100%; /*when it disapears from screen going upwards*/
    }
}

@-moz-keyframes bubblesAnimation {
    0% {
        margin-top: 70px; /*starting point*/
    }
    100% {
        margin-top: -100%; /*when it disapears from screen going upwards*/
    }
}

@keyframes bubblesAnimation {
    0% {
        margin-top: 70px; /*starting point*/
    }
    100% {
        margin-top: -100%; /*when it disapears from screen going upwards*/
    }
}

/* Bubble movement from side to side*/
@-webkit-keyframes sides { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left: 100px;
    }
}

@-moz-keyframes sides { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sides { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left: 50px;
    }
}

/* Animations for each Bubble */

.one {
    -webkit-animation: bubblesAnimation 35s linear infinite, sides  2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 35s linear infinite, sides 2s ease-in-out infinite alternate;
	animation: bubblesAnimation 35s linear infinite, sides  2s ease-in-out infinite alternate;
	
	left: 2%; 
	top: 5%;
	
	-webkit-transform: scale(0.27);
	-moz-transform: scale(0.27);
	transform: scale(0.27);
}

.two {
    -webkit-animation: bubblesAnimation 39s linear infinite, sides 2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 20s linear infinite, sides 4s ease-in-out infinite alternate;
	animation: bubblesAnimation 39s linear infinite, sides 2s ease-in-out infinite alternate;
	
	left: 5%;
	top: 70%;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.4);
	transform: scale(0.8);
}

.three {
    -webkit-animation: bubblesAnimation 36s linear infinite, sides  2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 28s linear infinite, sides 2s ease-in-out infinite alternate;
	animation: bubblesAnimation 36s linear infinite, sides  2s ease-in-out infinite alternate;
	
	left: 10%;
	top: 40%;
	
	-webkit-transform: scale(0.55);
	-moz-transform: scale(0.7);
	transform: scale(0.55);
}

.four {
    -webkit-animation: bubblesAnimation 32s linear infinite, sides  3s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 22s linear infinite, sides 4s ease-in-out infinite alternate;
	animation: bubblesAnimation 32s linear infinite, sides  3s ease-in-out infinite alternate;
	
	left: 20%;
	top: 0;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.3);
	transform: scale(0.8);
}

.five {
    -webkit-animation: bubblesAnimation 39s linear infinite, sides  2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 29s linear infinite, sides  2s ease-in-out infinite alternate;
	animation: bubblesAnimation 39s linear infinite, sides  2s ease-in-out infinite alternate;
	
	left: 30%;
	top: 50%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.5);
	transform: scale(0.4);
}

.six {
    -webkit-animation: bubblesAnimation 31s linear infinite, sides  2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 21s linear infinite, sides 3s ease-in-out infinite alternate;
	animation: bubblesAnimation 31s linear infinite, sides 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 40%;
	
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.8);
	transform: scale(0.9);
}

.seven {
    -webkit-animation: bubblesAnimation 30s linear infinite, sides  2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 40s linear infinite, sides 2s ease-in-out infinite alternate;
	animation: bubblesAnimation 30s linear infinite, sides  2s ease-in-out infinite alternate;
	
	left: 65%;
	top: 70%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.4);
	transform: scale(0.3);
}

.eight {
    -webkit-animation: bubblesAnimation 32s linear infinite, sides  2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 22s linear infinite, sides 3s ease-in-out infinite alternate;
	animation: bubblesAnimation 32s linear infinite, sides 2s ease-in-out infinite alternate;
	
	left: 80%;
	top: 10%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.3);
	transform: scale(0.4);
}

.nine {
    -webkit-animation: bubblesAnimation 41s linear infinite, sides  2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 29s linear infinite, sides 4s ease-in-out infinite alternate;
	animation: bubblesAnimation 41s linear infinite, sides 2s ease-in-out infinite alternate;
	
	left: 57%;
	top: 74%;
	
	-webkit-transform: scale(0.85);
	-moz-transform: scale(0.9);
	transform: scale(0.85);
}

.ten {
    -webkit-animation: bubblesAnimation 36s linear infinite, sides  2s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 26s linear infinite, sides 2s ease-in-out infinite alternate;
	animation: bubblesAnimation 36s linear infinite, sides 2s ease-in-out infinite alternate;
	
	left: 80%;
	top: 75%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.8);
	transform: scale(0.6);
}
.eleven {
    -webkit-animation: bubblesAnimation 39s linear infinite, sides 3s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 26s linear infinite, sides 2s ease-in-out infinite alternate;
	animation: bubblesAnimation 39s linear infinite, sides 3s ease-in-out infinite alternate;
	
	left: 25%;
	top: 80%;
	
	-webkit-transform: scale(0.48);
	-moz-transform: scale(0.8);
	transform: scale(0.48);
}
.twelve {
    -webkit-animation: bubblesAnimation 36s linear infinite, sides  3s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 26s linear infinite, sides 3s ease-in-out infinite alternate;
	animation: bubblesAnimation 36s linear infinite, sides 3s ease-in-out infinite alternate;
	
	left: 70%;
	top: 40%;
	
	-webkit-transform: scale(0.69);
	-moz-transform: scale(0.8);
	transform: scale(0.69);
}
.thirteen {
    -webkit-animation: bubblesAnimation 35s linear infinite, sides 3s ease-in-out infinite alternate;
	-moz-animation: bubblesAnimation 26s linear infinite, sides 3s ease-in-out infinite alternate;
	animation: bubblesAnimation 35s linear infinite, sides 3s ease-in-out infinite alternate;
	
	left: 50%;
	top: 60%;
	
	-webkit-transform: scale(0.15);
	-moz-transform: scale(0.8);
	transform: scale(0.15);
}

/* OBJECTS */

.bubble {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
	-webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5), inset 0px 10px 30px 5px rgb(165, 165, 250);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5), inset 0px 10px 30px 5px rgb(139, 139, 236));
	
    height: 200px;
	position: absolute;
	width: 200px;
}

/* End of Bubble Animation */

/*Start of GRID layout for explanation/tutorial*/

.grid-container{
	display: grid;
	grid-template-areas:
	"header header header header"
	"nav nav nav nav"
	"article article article article"
	"shorthand shorthand shorthand shorthand"
	"vendor vendor vendor vendor"
	"classes classes wrap wrap"
	"final final final final"
	"main main footer footer"
	"mahnoor mahnoor mahnoor mahnoor";
	grid-template-columns: 1fr 1fr 1fr 1fr ;
	grid-gap: 30px;
	grid-template-rows: 
	minmax(200px, auto) 
	minmax(200px, auto) 
	minmax(200px, auto)
	minmax(200px, auto)
	minmax(200px, auto)
	minmax(200px, auto)
	minmax(50px, auto)
	minmax(50px, auto)
	minmax(5px, auto);
	width: 80%;
	margin: 0 auto;
}
header{
	grid-area: header;
	background-color: white;
	border-radius: 20px;
	margin-top: 5vh;
	padding: 20px;
	
}

h2{
	font-family:'Montserrat', sans-serif;
	text-align: center;
	font-weight: bolder;
}
h3{
	font-family:'Montserrat', sans-serif;
	text-align: left;
	font-weight: bolder;
}
p, ul li, ol li,h4{
	font-family: 'Montserrat', sans-serif;
	text-align: left;
	line-height: 1.6;
}
ul, li{
	list-style-type: circle;
}
figcaption{
	font-family: 'Montserrat', sans-serif;
	margin: 0 auto;
	font-size: 0.8em;
}

#myImg{
	/*width: 100%;
	height: auto;
	border-radius: 2%;*/
	margin: 0 auto;
	height: auto;
	border-radius: 1.5%;
	width: 95%;
	min-width: 150px;

}


#sides {
	/*width: 100%;
	height: auto;*/
	margin: 0 auto;
	height: auto;
	border-radius: 2%;
	width: 40%;
	min-width: 170px;

	
}

#short{
	margin: 0 auto;
	width: 100%;
	border-radius: 2%;
	min-width: 170px;
	height: auto;
}

#div, #wrap{
	margin: 0 auto;
	width: 100%;
	border-radius: 2%;
	min-width: 100px;
	max-width: 308px;
	height: auto;
}
#final{
	margin: 0 auto;
	width: 100%;
	border-radius: 2%;
	min-width: 170px;
	height: auto;
}
nav{
	grid-area: nav;
	background-color: white;
	border-radius: 20px;
	padding: 45px;
	text-align: center;
}
article{
	grid-area: article;
	background-color: white;
	border-radius: 20px;
	padding: 39px;
	text-align: center;
}
.shorthand{
	grid-area: shorthand;
	background-color: white;
	border-radius: 20px;
	padding: 45px;
	text-align: center;

}
.final {
	grid-area: final;
	background-color: white;
	border-radius: 20px;
	padding: 45px;
	text-align: center;

}
.vendor{
	grid-area: vendor;
	background-color: white;
	border-radius: 20px;
	padding: 45px;
	text-align: center;

}
.classes{
	grid-area: classes;
	background-color: white;
	border-radius: 20px;
	padding: 45px;
	text-align: center;

}
.wrap{
	grid-area: wrap;
	background-color: white;
	border-radius: 20px;
	padding: 50px;
	text-align: center;

}

/*links to tutorials*/
main{
	grid-area: main;
	background-color:  rgb(238, 236, 236);
	border-radius: 20px;
	padding: 25px;
}
footer{
	grid-area: footer;
	background-color: rgb(238, 236, 236);
	border-radius: 20px;
	padding: 25px;
}
.mahnoor{
	grid-area: mahnoor;
	background-color: rgb(196, 223, 240);
	border-radius: 20px;
	padding: 1px;
	margin-bottom: 5vh;
}

a{
	color: black;
	text-decoration: none;
}
a:hover{
	color: #000851;
	text-decoration: underline;
	font-weight: bolder;
}
/***************************************************/

/*Modal #1*/
/* Style the Image Used to Trigger the Modal */
#myImg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
  }
  
  #myImg:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 200px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .modal-content {
	margin: auto;
	display: block;
	width: 100%;
	max-width: 1100px;
  }
  
  
  
  
  /* Add Animation - Zoom in the Modal */
  .modal-content, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
  }
  
  @keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
  }
  
  /* The Close Button */
  .close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
  }
  
  .close:hover,
  .close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
	.modal-content {
	  width: 100%;
	}
  }

/***************************************************/

/*Modal #2*/
/* Style the Image Used to Trigger the Modal */
#short {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
  }
  
  #short:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .model {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 200px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .model-content {
	margin: auto;
	display: block;
	width: 100%;
	max-width: 1100px;
  }
  
  
  
  
  /* Add Animation - Zoom in the Modal */
  .model-content, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
  }
  
  @keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
  }
  
  /* The Close Button */
  .closee {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
  }
  
  .closee:hover,
  .closee:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
	.model-content {
	  width: 100%;
	}
  }
/***************************************************/

/*Modal #3*/
/* Style the Image Used to Trigger the Modal */
#final {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
  }
  
  #final:hover {opacity: 0.7;}
  
  /* The Modal (background) */
  .mode {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding-top: 200px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  }
  
  /* Modal Content (Image) */
  .mode-content {
	margin: auto;
	display: block;
	width: 100%;
	max-width: 1100px;
  }
  
  
  
  
  /* Add Animation - Zoom in the Modal */
  .mode-content, #caption {
	animation-name: zoom;
	animation-duration: 0.6s;
  }
  
  @keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
  }
  
  /* The Close Button */
  .closeee {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
  }
  
  .closeee:hover,
  .closeee:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
  }
  
  /* 100% Image Width on Smaller Screens */
  @media only screen and (max-width: 700px){
	.mode-content {
	  width: 100%;
	}
  }

/***************************************************/
/***************************************************/

  /*MEDIA QUERIES*/
  
@media screen and (min-width: 200px){
	
	h2 {
		font-size: 0.9rem; /*15px*/
	}
	h3{
		font-size: 0.7rem; 
	}
	p, h4, ul li, ol li{
		font-size: 0.65em;
	}
	figcaption{
		font-size: 0.5rem;
	}
	

}
@media screen and (min-width: 300px){
	h2 {
		font-size: 1rem; /*22.5px*/
	}
	h3{
		font-size: 0.8rem; 
	}
	p, h4, ul li, ol li{
		font-size: 0.8rem; /*13.5px*/
	}
	figcaption{
		font-size: 0.5rem;
	}
	
	
	

}

/*@media screen and (max-width: 320px){
	#bg-color{
		height: 900vh;
		
	}

}*/

@media screen and (max-width: 550px){
	#key{
		margin: 0 auto;
		height: auto;
		width: 100%;
	
	}


}

@media screen and (min-width: 400px){
	h2{
		font-size: 1.5rem; /*22.5px*/
	}
	h3{
		font-size: 1.3rem; 
	}
	p, h4, ul li, ol li{
		font-size: 0.9rem; /*13.5px*/
	}
	figcaption{
		font-size: 0.8rem;
	}
	
	

}

@media screen and (min-width: 600px){
	h2 {
		font-size: 2rem; /*30px*/
	}
	h3{
		font-size: 1.2rem; 
	}
	p, h4, ul li, ol li{
		font-size: 1rem;
	}
	figcaption{
		font-size: 1rem;
	}
	
	
}

@media screen and (max-width: 890px) and (min-width: 299px){
	.grid-container{
		grid-template-areas:
		"header"
		"nav"
		"article"
		"shorthand"
		"vendor"
		"classes"
		"wrap"
		"final"
		"main"
		"footer"
		"mahnoor";
		grid-template-columns: 1fr;
		grid-row-gap: 20px;
		grid-column-gap: 20px;
		grid-template-rows:  
		minmax(100px, auto) 
		minmax(100px, auto) 
		minmax(100px, auto)
		minmax(100px, auto)
		minmax(100px, auto)
		minmax(100px, auto)
		minmax(100px, auto)
		minmax(100px, auto)
		minmax(50px, auto)
		minmax(50px, auto);
		width: 80%;
		margin: 0 auto;
		
	}
	.classes{
		padding: 20px;
		
	
	}
	.wrap{
		padding: 20px;
		
	
	}

	
	

}

@media screen and (min-width: 800px){
	h2 {
		font-size: 2.5rem; /*37.5px*/
	}
	h3{
		font-size: 1.9rem; 
	}
	p, h4, ul li, ol li{
		font-size: 1.2rem;
	}
	figcaption{
		font-size: 1.1rem;
	}
	
}

@media screen and (min-width: 1200px){
	h2 {
		font-size: 3rem; /*45px*/
	}
	h3{
		font-size: 2.5rem; 
	}
	p, h4, ul li, ol li{
		font-size: 1.4rem;
	}
	figcaption{
		font-size: 1.2rem;
	}
	

}