/* Code for The Bubble Animation */

.bubbles {
	display: flex;
	width: 100%;
	justify-content: space-around;
	position: absolute;
	top: 0;
	--transform-duration: 6s;
	--transform-y: 100vh;
}

.bubbles img {
	opacity: 0;
	animation-name: bubble;
	animation-timing-function: linear;
	animation-duration: var(--transform-duration);
	animation-iteration-count: infinite;
}

@keyframes bubble {
	0% {
		transform: translateY(0);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	100% {
		transform: translateY(var(--transform-y));
		opacity: 1;
	}
}

.bubbles img:nth-child(1) {
	animation-delay: 2s;
}

.bubbles img:nth-child(2) {
	animation-delay: 5s;
}

.bubbles img:nth-child(3) {
	animation-delay: 3s;
}

.bubbles img:nth-child(4) {
	animation-delay: 6s;
}

.bubbles img:nth-child(5) {
	animation-delay: 1s;
}

.bubbles img:nth-child(6) {
	animation-delay: 4s;
}

.bubbles img:nth-child(7) {
	animation-delay: 6s;
}

@media screen and (max-width: 650px) {
	.bubbles img:nth-child(1) {
		animation-delay: 0s;
	}

	.bubbles img:nth-child(2) {
		animation-delay: 10s;
	}

	.bubbles img:nth-child(3) {
		animation-delay: 6s;
	}

	.bubbles img:nth-child(4) {
		animation-delay: 12s;
	}

	.bubbles img:nth-child(5) {
		animation-delay: 2s;
	}

	.bubbles img:nth-child(6) {
		animation-delay: 8s;
	}

	.bubbles img:nth-child(7) {
		animation-delay: 13s;
	}

}

.footer {
	width: 100%;
	background: #22072A;
	text-align: center;
	padding: 10px 0px;
	color: white;
}

.footer span {
	color: white;
	padding: 10px 0px;
}

.wrapper {
	margin: 5px;
}

.wrapper .social-media {
	display: inline-block;
	height: 50px;
	width: 50px;
	margin: 0 5px;
	overflow: hidden;
	background: #fff;
	border-radius: 50px;
	cursor: pointer;
	box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease-out;
}

.wrapper .social-media:hover {
	width: 11rem;
	text-align: left;
}

.wrapper .social-media:hover i {
	transform: rotate(360deg);
}

.wrapper .social-media .icon {
	display: inline-block;
	height: 50px;
	width: 50px;
	text-align: center;
	border-radius: 50px;
}

.wrapper .social-media .icon i {
	font-size: 25px;
	line-height: 50px;
	color: #fff;
	transition-duration: 0.8s;
	transition-property: transform;
}

.wrapper .social-media:nth-child(1) .icon {
	background: #0072b1;
}
.wrapper .social-media:nth-child(2) .icon {
	background: rgb(0,138,255);
	background: linear-gradient(45deg, rgba(0,138,255,1) 25%, rgba(255,201,0,1) 75%);
}
.wrapper .social-media:nth-child(3) .icon {
	background: #171515;
}
.wrapper .social-media:nth-child(4) .icon {
	background: linear-gradient(to right, rgb(5, 117, 230), rgb(2, 27, 121));
}

.wrapper .social-media span {
	font-size: 18px;
	font-weight: 500;
	margin-left: 5px;
	transition: all 0.3s ease-out;
}

.wrapper .social-media:nth-child(1) span {
	color: #0072b1;
}
.wrapper .social-media:nth-child(2) span {
	color: #171515;
}
.wrapper .social-media:nth-child(3) span {
	color: #171515;
}
.wrapper .social-media:nth-child(4) span {
	color: #0d4db4;
}

/* To prevent animation in mobile view */
@media screen and (max-width: 500px) {
	.wrapper .social-media:hover {
		width: 50px;
	}
}

details{
  margin-bottom: 1em;
  padding:1em;
  border:1px solid #000;
  --transition-duration: 500ms;
}

summary{
  cursor: pointer;
}

.details-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-duration);
}

.expanded > .details-content {
  grid-template-rows: 1fr;
}

.details-content-inner {
  /* *********** overflow-y: hidden; */
}

.details-init > .details-content{
  transition:none!important
}

.summary{
  list-style-type: none;
}
.summary::marker,
.summary::-webkit-details-marker {
  display: none;
}

.summary-marker {
  display: inline-block;
  align-items:center;
  color: inherit;
  transition: 0.3s;
  font-size: 1em;
  margin-right:0.3em;
  overflow:visible;
  text-align:center;
}

.summary-marker:before{
  content:'▶';
}

.expanded > summary .summary-marker {
  transform: rotate(90deg);
}

/* details summary { */
  /* list-style-type: none */
/* } */
/* details summary::-webkit-details-marker { */
  /* display: none */
/* } */
/* details summary::before { */
  /* content: '▶'; */
  /* transition: transform .3s; */
  /* margin-right: .5em; */
  /* display: inline-block */
/* } */
/* details[open]:not(.closing) summary::before { */
  /* transform: rotate(90deg) */
/* } */
/* details[open] summary ~ * { */
  /* animation: sweepIn .3s ease-in-out; */
/* } */

/* @keyframes sweepIn { */
  /* 0%    {opacity: 0; transform: translateY(-10px); margin-bottom: -10px} */
  /* 100%  {opacity: 1; transform: translateY(0)} */
/* } */
/* details.closing section { */
  /* animation: sweepOut .3s ease-in-out; */
/* } */

/* @keyframes sweepOut { */
    /* 0%    {opacity: 1; transform: translateY(0);} */
    /* 100%  {opacity: 0; transform: translateY(-10px); margin-bottom: -1.5em} */
/* } */