/*
CSS for the example component.

Since CSS uses a global name space for classes we use a naming convention that includes the
React application and the component in the class name.  The hope is any other stylesheets
you use won't conflict with these names.
*/
.cs142-example-code {
    font-family: Courier New, monospace;
    line-height: 1.3;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    display: inline-block;
    box-sizing: border-box;
    background: #f4f4f4;
    width: 100%;
    overflow-x: auto;
}

.cs142-example-output {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px dashed #722b00;
    display: inline-block;
    box-sizing: border-box;
}

.cs142-code-name {
  font-family: Courier New, monospace;
}

.motto-update {
  background-color: #F8F8F8;
  font-size: larger;
  border: 1px dotted black;
  padding: 10px 10px 10px 10px;
}

#motto-name {
  font-weight: bold;
}