/* components.css */

#component-clock {
  width: 100%;

  text-align: center;

  background: var(--yellow-light);

  border: solid var(--gray-darker);

  padding: 8px;

  margin-bottom: 15px;
}

.component-image {
  width: 70px;
  height: 70px;

  object-fit: cover;

  border: solid var(--gray-darker);

  margin-right: 15px;
  margin-bottom: 15px;

  flex-shrink: 0;
}

.component-image:active {
  width: 50%;
  position: fixed;
  
  margin: 25%;

}

.component-text {
  width: 100%;

  background: var(--white-light);

  border: solid;
  border-top-color: var(--gray-darker);
  border-left-color: var(--gray-darker);
  border-right-color: var(--gray-dark);
  border-bottom-color: var(--gray-dark);

  padding: 12px;
  padding-bottom: 50px;
  margin-bottom: 15px;
}

.component-separator {
  display: flex;
  align-items: flex-start;
}