.control-pannel-wrapper {


  display: grid;
  grid-template-columns: 5fr 3fr;
  gap: 15px;
  margin: 10px;
  margin-bottom: 25px;
  border-radius: 5px;
  font-size: 18px;
  
  

}

.content-container {

border-radius: 5px;
padding: 6px;
  background-color: rgb(221, 133, 180);
border: solid 5px rgb(235, 235, 238);

} 


.links-container {

border-radius: 5px;
border: solid 5px rgb(234, 233, 238);
  background-color: rgb(238, 209, 225);
} 

.links {

padding: 5px;
border: solid 2px rgb(236, 199, 225);
background-color: rgb(228, 219, 219);
margin: 10px;
border-radius: 10px;
box-shadow: .25em .25em .25em rgb(245, 181, 240);
}


.control-pannel-footer {

  background-color: bisque;
  border: solid 5px firebrick;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 15px;
  margin: 15px;
 
}

.footer-link {

background-color: rgb(209, 223, 223);
margin: 10px;
border: solid 2px rgb(199, 184, 199);
border-radius: 10px;
padding: 3px;
text-align: center;

}


@media (width < 700px) {                   

.control-pannel-footer {

   display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
 

}}







@media (width < 700px) {                   

.footer-link {

  margin: 5% 20% 5% 20%;
 

}}











@media (width < 700px) {                   

.control-pannel-wrapper {

  
  display: grid;
  grid-template-columns: 1fr;

}}