body {
  margin:0;
}


.wrapper {

    position: relative;
    background: #<?php echo $color; ?>;
    max-width: 25em;
    border: 1.95em solid #000;
    margin: 1em auto;
    overflow: hidden;
    top: -35px;
    opacity: 1;


}

.wrapper2 {

    border: 1.95em solid #000;
    margin: 1em auto;
    overflow: hidden;
    opacity: 1;


}

.wrapper3 {

    position: relative;
    background: #<?php echo $color; ?>;
    max-width: 25em;
    border: 1.95em solid #000;
    margin: 1em auto;
    overflow: hidden;
    top: -35px;
    opacity: 1;


}


.wrapper44 {

    position: relative;
    background: #<?php echo $color; ?>;
    max-width: 25em;
    border: .95em solid #000;
    margin: 1em auto;
    overflow: hidden;
    top: -35px;
    opacity: 1;


}




/* The orb container */
.siri-orb {
  /* Set a fixed size and position */
  position: fixed;
  top: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  place-items: center;
  left: -20px;


  /* Style the orb with a blue-to-green gradient and a white border */
  background: linear-gradient(to bottom, #00BFFF, #00FF00);
  border: 5px solid white;
  border-radius: 100%;
  box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);

  /* Add a hover effect that enlarges the orb slightly */
  transition: transform 0.1s ease-in-out;
  &:hover {
    transform: scale(1.1);
  }
}

/* The "listening" animation for the orb */
@keyframes listening {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* Add the "listening" animation to the orb when it has the "listening" class */
.siri-orb.listening {
  animation: listening 1s infinite;
}


.showcase {
  width: 100%; /* Ensures the component is the full screen width */
  height: 100vh; /* We're using this for demo purposes */
  overflow: hidden; /* Allows us to slide the panels outside the container without them showing */
  z-index: -100;
}

.showcase__wrapper {
  width: 100%;
  height: 100%;
  z-index: -100;
}

input[type=checkbox] {
  position: absolute; /* Force the checkbox at the start of the container */
  cursor: pointer; /* Indicate the showcase is clickable */
  width: 100%; /* The checkbox is as wide as the component */
  height: 100%; /* The checkbox is as tall as the component */
  z-index: 100; /* Make sure the checkbox is on top of everything else */
  opacity: 0; /* hide the checkbox */
}

/* Slide the first panel in */
input[type=checkbox]:checked ~ div.showcase__panel--left {
	transform: translateX(0);
}

/* Slide the second panel in */
input[type=checkbox]:checked ~ div.showcase__panel--right {
	transform: translateX(0);
}

.showcase__panel {
  mix-blend-mode: hard-light;
  border: 0.5em solid #000;
  width: 100%;
  background-image: repeating-linear-gradient(90deg,
                      #570759, #073C59 7%, black 10%);  width: 50%; /* Each panel takes up half the container */
  height: 100%; /* Used for demo purposes */
  float: left; /* Makes sure panels are side-by-side */
  position: relative; /* Needed to define the z-index */
  z-index: 2; /* Places the panels in front of the display */
  transition: all 3s ease-out; /* Animates the sliding transition */
}

.showcase__panel--left {
  transform: translateX(-100%);
}

.showcase__panel--right {
	transform: translateX(100%);
}

.showcase__display {
  background:  rgba(255, 0, 0, 0);
  position: absolute; /* Forces the display position into the container start */
  z-index: -1000; /* Places the display behind the panels, which are z-index 2 */
  width: 100%;
  height: 100%;
}


.article {
  width: 100%;
  min-height: 30vh;
  display: grid;
  place-items: center; /* new */
}