body{
	background-color: rgba(173, 216, 230, 0.3);
	font-family: "Multi", sans-serif;
}
.ans{
	border: 4px; 
	border-color: black; 
	color: green;
	font-weight: bold;
	font-size: 24px;
}
.cont {
  /*background: rgba(176, 224, 230, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px ;
  padding: 1rem;
  box-shadow: 0 5px 20px darkgray;
  height: 53vh;*/
}

.collapsible {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

label, button, input{
	font-size: 18px;
}

input{
	background: rgba(173, 216, 230, 0.9);
	border: none;
	border-bottom: 2px solid darkgray;
	border-radius: 5px;
	padding: 9px 22px;
  margin: 8px 0;
  box-sizing: border-box;
  text-align: center;
}

.formula{
	background: aliceblue;
	font-size: 15px;
}
.sec{
	 margin: 5%; 
	 margin-left: 15%; 
	 margin-right: 15%
}
@media screen and (max-width: 400px) {
  input {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  .formula{
	background: aliceblue;
  	font-size:11.5px;
  }
  .sec{
  	margin: 5%;
  	margin-left: 5%;
  	margin-right: 5%;
  }
}


div.ct1 {
	background: rgba(176, 224, 230, 0.7);
  	display: flex;
  	flex-direction: column;
  	align-items: center;
	justify-content: center;
	border-radius: 5px ;
	padding: 1rem;
	box-shadow: 0 5px 20px darkgray;
  min-height: 30vh;
  	align-self: left;
  	width: content;
}

.ct2 {
	background: rgba(173, 216, 230, 0.7);
  	display: flex;
  	flex-direction: column;
  	align-items: center;
	justify-content: center;
	border-radius: 5px ;
	padding: 1rem;
	box-shadow: 0 5px 20px darkgray;
  min-height: 30vh;
  	align-self: right;
  	width: content;
}

.site-header{
    background-color: rgba(0, 0, 0, .85);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.hero-section {
    background-color: var(--indigo);
}

.hero-section__graphic, .hero-section__graphic:before, .hero-section__graphic:after {
    background-color: rgba(255,255,255,0.1);
    width: 10vh;
    height: 10vh;
    border-radius: 40% 30% 30% 40% / 60% 40% 60% 40%;
}

.hero-section__graphic:before, .hero-section__graphic:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    animation: float 10s infinite linear;
}
.hero-section__graphic:after {
    animation-direction: reverse;
    animation-delay: 500ms;
}

.hero-section__icon{
    fill: var(--light);
    width: 100%;
    height: auto;
}


@keyframes float {
    0% {
        transform: translate(0%, 0%) rotate(0);
    }

    33% {
        transform: translate(2%, 2%) rotate(120deg);
    }

    66% {
        transform: translate(2%, -2%) rotate(240deg);
    }


    to {
        transform: translate(0%, 0%) rotate(360deg);
    }
}

