.language-css {
   font-size: .875rem;
   font-family: Consolas, Monaco, 'Andale Mono', monospace;
   color: #080;
}

.token.property {
   color: #606;
}

.token.punctuation {
   color: #3F51B5;
}

.editor-container * {
   margin: 0;
}

.example-choice-button>pre {
   margin: 7px 0px;
   padding-block: 0;
   height: auto;
   display: flex;
   align-items: center;
   width: 100%;
   overflow: auto;
}

.example-choice-button code {
   width: 100%;
   display: inline-block;
   padding: 7px;
}

.example-choice-button code:focus {
   outline: none;
}

.example-choice-button {
   cursor: pointer;
   padding: 0;
   width: 100%;
   background-color: #f9f9fb;
   border-radius: .3rem;
   text-align: start;
   border: 1px solid #cdcdcd;
   transition: all .2s ease-out;
   padding-inline: 0.5rem;
   position: relative;
}

.example-choice-button::before {
   content: "";
   opacity: 0;
   position: absolute;
   right: -10px;
   top: 50%;
   transform: translateY(-50%);
   transition: all .2s ease-out;
   z-index: 1;
   color: #fff;
   border-bottom: 4px solid transparent;
   border-left: 4px solid #40a944;
   border-top: 4px solid transparent;
   display: none;
}

.example-choice-button[aria-selected=true] {
   cursor: text;
   box-shadow: 0px 0px 0px 3px rgba(251, 251, 254, .5);
   border-color: #40a944 !important;
   transition: height .5s;
}
.example-choice-button[aria-selected=true] code {
   border: 1px dotted #a09e9e;
}

.example-choice-button[aria-selected=true]::before {
   opacity: 1;
   right: -1rem;
}

.example-choice-button:hover {
   border: 1px solid #1b1b1b;
}

.example-choice-list {
   display: flex;
   flex-direction: column;
   gap: .35rem;
   margin: 1rem;
}

.editor-container {
   border: 1px solid #cdcdcd;
   border-radius: 5px;
}

.output-heading {
   font-size: 1rem;
   color:#1b1b1b;
}

.reset-button {
   background-color: transparent;
   border: 0;
   color: #1b1b1b;
   cursor: pointer;
   padding: .5rem 1rem;
   text-transform: uppercase;
   border-radius: .5rem;
   font-size: 11px;
}

.reset-button:hover {
   background-color: #eee;
}


.output {
   height: 100%;
   min-height: 18rem;
   display: grid;
   place-content: center;
   border-top: 1px solid #858585;
   align-items: center;
   display: flex;
   justify-content: center;
}

@media (min-width: 600px) {
   .example-choice-button::before {
       display: block;
   }

   .example-choice-list {
       margin-right: 2rem;
   }

   .editor-wrapper {
       display: grid;
       grid-template-columns: 50% 50%;
       align-items: center;
       min-height: 300px;
   }

   .output {
       min-height: auto;
       border-top: 0;
       border-left: 1px solid #cdcdcd;
       overflow: hidden;
       padding: 1em;
       height:300px;
       position: relative;
   }

   #example-element {
       max-height: 225px;
       max-width:340px;
   }
}

.output-header {
   align-items: center;
   display: flex;
   gap: 1rem;
   justify-content: space-between;
   margin: 0;
   padding: .75rem 1rem;
   border-bottom: 1px solid #cdcdcd;
}
@supports (display:flex)
.output section {
    align-items: center;
    display: flex;
    justify-content: center;
}

.output section {
    height: 100%;
    text-align: center;
}