@import "variables";
@import "mixins";

body {
  margin: 10px;
  font-family: verdana, tahoma, arial, sans-serif;
  font-size: 15px;
}

section {
  border: 2px solid #ddd;
  padding: 5px;
  margin: 5px;
}

#debug {

  position: fixed;
  top: 0;
  right: 0;
  padding: 8px;
  background-color: rgba(0,0,0,0.15);
  border-bottom-left-radius: 5px;
  border: 2px dotted rgba(0,0,0,0.5);
  border-width: 0 0 2px 2px;

  @include xs {
    &:before { content: 'xs: ';}
  }
  @include sm {
    &:before { content: 'sm: ';}
  }
  @include md {
    &:before { content: 'md: ';}
  }
  @include lg {
    &:before { content: 'lg: ';}
  }
  @include xl {
    &:before { content: 'xl: ';}
  }
  @include xxl {
    &:before { content: 'xxl: ';}
  }
}

.flexi {
  border: 1px solid #a00;
  > * {
    background-color: #efefef;
    border: 1px solid cyan;
    min-height: 50px;
    &:nth-child(odd) {
      background-color: #dfdfdf;
      border-color: magenta;
    }
    &:nth-child(even) {

    }
  }
}