style.css

* {
  font-family: 'Roboto Mono', monospace;
}

body {	
  margin: 0;	
  padding: 0;	
}	

.page {	
  margin: 1% 10%;	
  padding: 0.5% 2%;	
  /* border: solid; */	
}	

@media screen and (max-width: 600px) {	
  .page {	
    margin: 0px;	
  }	
}	

h2 {	
  text-align: center;	
  font-size: 40px;	
  color: green;	
}	

h3 {	
  font-size: 2em;	
  color: green;	
  border-bottom: 2px solid green;	
  border-top-left-radius: 5px;	
  border-top-right-radius: 5px;	
  margin-bottom: 0px;	
  font-family: Helvetica, sans-serif;	
}	

.panel {	
  border-top-left-radius: 5px;	
  border-top-right-radius: 5px;	
  border-bottom-left-radius: 5px;	
  border-bottom-right-radius: 5px;	
  box-shadow: 3px 3px 7px grey;	
  padding: 5px;	
  margin: 10px;	
}	

.panelHead {	
  padding-left: 15px;	
  margin: 0;	
}	

.panelBody {	
  /* margin-top: 0px;	
  padding-bottom: 0px; */	
  border-bottom-left-radius: 5px;	
  border-bottom-right-radius: 5px;	
  font-family: Helvetica, sans-serif;	
}	

.panel:hover {	
  transition-delay: 0s;	
  transition-duration: 0.3s;	
  box-shadow: 5px 5px 20px black;	
  -moz-box-shadow: 5px 5px 20px black;	
  -webkit-box-shadow: 5px 5px 20px black;	
  -o-box-shadow: 5px 5px 20px black;	
}	

.centerImage {	
  display: block;	
  margin-left: auto;	
  margin-right: auto;	
  border-radius: 50%;	
  box-shadow: 5px 5px 20px grey;	
}

/* Glass buttton Styling */

.glass-toggle {
  /* background: #100f2c; */
  background-image: linear-gradient(#C6FFDD, #FBD786, #f7797d);
  color: aliceblue;
  width: 4rem;
  height: 4rem;
  position: fixed;
  border-radius: 50%;
  right: 32px;
  top: 32px;
  left: unset;
  cursor: pointer;
  transition: all 0.5s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}