/* Blob */
body {
  padding: 0;
  margin: 0;
  background-color: rgb(0,0,0);
  width: 100vw;
  height: 100vh;
  display: table-cell;
  vertical-align: middle;
  font-family: Arial, Helvetica, sans-serif;
}

#blob,
button {
  margin: auto;
  display: block;
}

#container {
  position: relative;
  width: 50vmin;
  height: 50vmin;
  background-color: transparent;
  margin:auto;
  /* border: 1px solid red; */
}

#blob, #blob1 {
  z-index:0;
  position: absolute;
  width: 50vmin;
  height: 50vmin;
  border-radius: 50%;
  overflow: hidden;
  background-color: #FFFFFF;
 /* border: 3px solid black; */
}

/* ANIM */
#blob
button {
  transition: all ease 1s;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0);
}

/*Menu*/
body{
font-family:Helvetica,Arial;
}
ul#menu a {
color:#FFF;
}
ul#menu{
position:relative;
list-style:none;  
margin:auto;
width: max-content;
text-align:left;
/*  box-shadow:0 0 3px rgba(100,100,100,.9),
       0 0 0 5px rgba(100,100,100,.3);
border-radius:5px; */
background-color:#000;  
z-index: 1; 
}
ul#menu li{
display:block;
height: 2rem;  
background:rgba(0, 0, 0, 0.9);
padding:1rem;
color:white;
/* border-top:1px solid rgba(255,255,255,.1); */
}
ul#menu li:hover{
background:rgba(22, 160, 133,0.8);
}
ul li:last-child{
border-bottom-left-radius:0.4rem;
border-bottom-right-radius:0.4rem;
}
label.menu:before{
height:0.2rem;
width:2rem;
background:white;
display:inline-block;
content:"";
box-shadow:0px -5px 0px 0px  white,
       0px -10px 0px 0px white;
margin-right:10px;
transition:all .5s;
position:relative;
opacity:0.5;
}
label.menu {
display:block;
background:rgb(22, 160, 133);
padding:0.2rem;
color:white;  
cursor:pointer; 
}
input[type="checkbox"]{
visibility:hidden;
position:absolute;
}
#collapse:checked ~ li{
display:none;
margin-top:0; 
}
#collapse:checked + label:before{
position:relative;
right:calc(-160px);
opacity:1;

}

/* Collapsible div */
input[type='checkbox'] { display: none; }

.wrap-collabsible {
position: absolute;
top: 0;
width:100%;
text-align: right;
}

.lbl-toggle {
display: block;
font-weight: bold;
font-family: monospace;
font-size: 1.5rem;
text-transform: uppercase;
text-align: right;
padding: 1rem;
color: #DDD;
cursor: pointer;
border-radius: 7px;
transition: all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #FFF;
}

.lbl-toggle::before { content: ' '; display: inline-block; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid currentColor; vertical-align: middle; margin-right: .7rem; transform: translateY(-2px); transition: transform .2s ease-out; } .toggle:checked+.lbl-toggle::before { transform: rotate(90deg) translateX(-3px); }
.collapsible-content { max-height: 0px; overflow: hidden; transition: max-height .25s ease-in-out; }

.toggle:checked + .lbl-toggle + .collapsible-content {
max-height: 100%;
}

.toggle:checked+.lbl-toggle { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .collapsible-content .content-inner { background: rgba(0, 105, 255, .2); border-bottom: 1px solid rgba(0, 105, 255, .45); border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; padding: .5rem 1rem; } .collapsible-content p { margin-bottom: 0; }

/* Switch */
.switch {
position: relative;
display: inline-block;
width: 4rem;
height: 2rem;
vertical-align: middle;
}

.switch input { 
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}

input:checked + .slider {
background-color: #2196F3;
}

input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
border-radius: 34px;
}

.slider.round:before {
border-radius: 50%;
}

/* Overlay */
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 2;
cursor: pointer;
}

#text{
position: absolute;
top: 50%;
left: 50%;
font-size: large;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}