<div class="all"  > 
  <div class="a">
    <div class="a1"></div>
  </div>
  <div class="b"></div>
  <div class="a">
    <div class="a1"></div>
  <div>
</div>

*{margin:0; padding:0; outline:0;box-sizing:border-box;}
:root{
  --background:rgb(27,23,33);
}
body{
  background:var(--background);
  color:white; 
}


.all{
  width:100%;
  botder:solid 1px gray;
  margin:20px;
  padding:4px;
  position:relative;
  display:flex;
  justify-content:space-between;
}

.a,.b{

  height:300px;


}
.a{
  width: 80%;
  background: var(--background);
/*   box-shadow:0px 0px 5px cyan; */
  border:solid 1px cyan;
  border-radius:10px;
  margin:20px;
  padding:20px;
}
.a1{
  width:100%;
  height:100%;
  background:rgb(35,35,35);
/*   margin:20px; */
}

.b{
  width:60px;
  height:60px;
  border:solid 1px cyan;
  border-radius: 100%;
  text-align:center;
  flex-basis:50px;
  background:var(--background);
  position:absolute;
  top:50px;
  left:50%;
  transform:translateX(-50%);
}

.b:after{
  content:"↻";
  padding-top:15px;
  font-size:30px;
  
  display:block;
  position:absolute;
  
  width:40px;
  height:70px;
  
  background:var(--background);
  
  left:9px;
  top:-5px;
}