:root {
	--r: rotate(-40deg);
}
.masthead {
	/*padding-top: 10.5rem;*/
	display: flex;
	/*padding-bottom: 6rem;*/
	overflow: clip;
	text-align: center;
	justify-content: center;
	align-items: center;
  height: 100vh;
}

#splash {
	background: linear-gradient(#84d3dd, #5a64e7);
	overflow: hidden;
	width: 100vw;
	height: 100vh;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
  }

  .circle{
    width:fit-content;
    border-radius: 50%;
    border: none;
    background: white;
    padding: 0;
  }
  
  .thick{
	height: 100%;
	width: 18%;
	min-width: 180px;
	background: #8f99f2;
	position: relative;
	display: flex;
	align-items:center;
	justify-content: center;
  }
  .thick, .thick > *{
	  z-index: 0;
  }
  #t1{
	  transform-origin: right;
	  transform: var(--r) translate(-50%, 15%) 
  }
  #t2{
	transform-origin: left;
	  transform: var(--r) translate(50%, -15%);
	/* transform: rotate(180deg) var(--r)*/
  }
  #t1::before, 
  #t2::after{
	content: '';
	border-radius: 50%;
	width: 100%;
	aspect-ratio: 1;
	position: absolute;
	background: #8f99f2;
	transform: translateY(-50%)
  }
  #t1::before{
	top: 0;
  }
  #t2::after{
	bottom: 0;
	transform: translateY(50%)
  }
  
  .rain{
	width: 5%;
	max-width: 4px;
	height: 110%;
	transform-origin: center;
	background-image: linear-gradient(#84d3dd, #5a64e7);
	z-index: 1;
  }
  
  #r1{
	transform: var(--r)
  }
  #r2{
	background-image: linear-gradient(#5a64e7, #84d3dd);
  }
  .high {
    z-index: 5;
    position: relative;
  }
  h1, h2{
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #eee;
  }