Untitled

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px;
  row-gap: 50px;
  column-gap: 50px;

}
/* #container > .blackBackground {
  border: 1px solid black;
  /* padding: 10px;
  font-size: 30px;
  text-align: center; 
} */

.blackBackground {
  height: 245px;
  width: 280px;
  background-color: black;
  display: flex;
  position:relative;
  justify-content: center;
  align-items: center;
}


/* ------------------------------------------------ */

.cross:before, .cross:after {
    content:'';
    position:absolute;
    width:500px;
    height:50px;
    background-color:white;
    border-radius:2px;
    top:225px;
    box-shadow:0 0 2px 0 #ccc;
}

.cross:before{
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg);
    left:2px;
}

.cross:after{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg);
    right:2px;
}
/* ------------------------------------------------ */

.naughtOuter{

  height: 400px;
  width: 400px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  position:relative;
  justify-content: center;
  align-items: center;
  
}

.naughtInner {

  height: 300px;
  width: 300px;
  background-color: black;
  border-radius: 50%;
  
}