/* * 

@function p2r($pt) {
  @return $pt / 720 * 10rem;
}

div {
  color: blue;
  height: 100vh;

  h2 {
    color: orange;  lalala
  }
}

li {
  font-size: p2r(32);  
}

h2 {
  font-size: 32pt;
} */
@mixin flexRow{display: flex;flex-direction: row;}
@mixin flexColumn{display: flex;flex-direction: column;}
@mixin flexSpace{display: flex;justify-content: space-between;align-items: center;}
@mixin borderCss{border: 1px solid #e3e3e3;border-radius: 4pt;}
@mixin margin{margin:0 20pt 5pt 20pt}
@mixin pointer{cursor: pointer}
*{margin: 0;padding: 0}

.Page{

  @include flexColumn;
  @include borderCss;
  width:50%;
  height: auto;
  background-color: #f5f5f5;
  margin:auto;
  h2{text-align: center}
  .margin{@include margin}
  .taskItems {
    
    ol{
      margin:20pt 0;
      li{
        @include borderCss;
        background-color: #fff;
        list-style-type: none;
        height: 42pt;
        line-height: 42pt;
        margin:0 20pt -1px;
        .show{display: inline}
        .hide{display: none}
        button{
          @include pointer;
          float: right;
          // border:none;
          background-color: #fff;
          width: inherit;
          height: inherit;
          
        }
      }
    }
    
  }
}


