body
{
margin: auto;  
text-align: center;
margin-top: 0px;
}

.iinfo
{
  width: 250px;
  height: 60px;
  background: #0c24c29a;
  color: rgb(255, 255, 255);
  border-radius: 20px;
  margin-right: auto;
  margin-left: auto;
  margin-top: -150px; 
  box-shadow: #FFC127 transparent;
}

.iinfo p
{
  margin: auto;
  text-align: center;
  font-size: 18px;
}


.ibody
{
  margin: auto;
  display: inline-block;
  margin-top: 10px;
  height: 500px;
  width: 250px;
  background-color: black;
  border-radius: 25px;
}

.toggler
{
  display: none;
}

.entph
{
  cursor: pointer;
}

@keyframes phonegrab
{
  from { border: 0px rgb(188, 188, 188) solid;
    border-top: 4px rgb(188, 188, 188) solid;
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-40deg) scale(.5);
    box-shadow: -2px 2px 2px 2px rgb(188, 188, 188), -7px 7px rgb(188, 188, 188), -12px 12px rgb(188, 188, 188), -12px 12px 5px rgba(152, 152, 152, 0.86); }
  to  { border: 2px rgb(188, 188, 188) solid; border-top: 0px rgb(188, 188, 188) solid; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    box-shadow: 0px 0px 0px 0px rgb(188, 188, 188), 0px 0px rgb(188, 188, 188), 0px 0px rgb(188, 188, 188), 0px 0px 0px rgba(152, 152, 152, 0.86); }
}

@keyframes phoneungrab
{
  from { border: 2px rgb(188, 188, 188) solid; border-top: 0px rgb(188, 188, 188) solid; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1);
    box-shadow: 0px 0px 0px 0px rgb(188, 188, 188), 0px 0px rgb(188, 188, 188), 0px 0px rgb(188, 188, 188), 0px 0px 0px rgba(152, 152, 152, 0.86); }
  to { border: 0px rgb(188, 188, 188) solid;
    border-top: 4px rgb(188, 188, 188) solid;
    transform: rotateX(60deg) rotateY(0deg) rotateZ(-40deg) scale(.5);
    box-shadow: -2px 2px 2px 2px rgb(188, 188, 188), -7px 7px rgb(188, 188, 188), -12px 12px rgb(188, 188, 188), -12px 12px 5px rgba(152, 152, 152, 0.86); }
}

#phoneint:checked + .ibody 
{
  animation: 1s phonegrab forwards;
}

#phoneint:not(:checked) + .ibody 
{
  animation: 1s phoneungrab forwards;
}

.itop
{
  display: inline-block;
  height: 50px;
  width: 100%;
}


.iear
{
  margin: auto;
  display: inline-block;
  width: 60px;
  height: 10px;
  background-color: rgba(113, 112, 112, 0.9);
  border-radius: 5px;
  margin-top: 25px;
}

.imiddle
{
  margin: auto;
  display: inline-block;
  height:400px;
  width: 100%;
}

.icontent
{
  display: block;
  margin: auto;
  height: 400px;
  width: 235px;
  background-color: rgba(76, 76, 76, 0.42);
  overflow: hidden;
}

.cont
{
  width: 100%;
  height: 400px;
}

.ibottom
{
  width: 100%;
  height: 40px;
  display: block;
  text-align: center;
  box-shadow
}

.ihomebutton
{
  display: inline-block;
  margin-top: 5px;
  width: 30px;
  height: 30px;
  border-radius: 40px;
  background-color: rgba(134, 134, 134, 0.35);
}