@import "../../shared/styles.less";

@header-bgcolor-opacity: 70%;

body {
    font-family:@font-family;
    margin:0;
    /*padding-top: 5px;*/
}

#content {
    zoom: 1.0 !important;
}

.container {
    text-align: center;
    //margin-top: 20px;
    margin-top: 40px;
    color: @main-color;
}

.icon {
    //font-size: 36px;
    font-size: @font-size * 1.5;
}

.font-icon {
    //font-size: 62px;
    font-size: @font-size * 2.58;
}

.desc {
    //margin-top: 10px;
    //font-size: 30px;
    margin-top: 20px;
    font-size: @font-size * 1.25;
}

.powered-by {
    //font-size: 12px;
    font-size: @font-size / 2;
    clear: both;
}

.day {
    //margin-top: 10px;
    //font-size: 48px;
    margin-top: 20px;
    font-size: @font-size * 2;
}

.title {
  background: @header-bgcolor;
  //font-size: 24px;
  font-size: @font-size;
  font-weight: 600;
  color: @header-fgcolor;

  padding: @header-padding;

  margin: 0;
}

.theme-green {
    &.title {
        background: @header-bgcolor-green;
    }
}

.theme-red {
    &.title {
        background: @header-bgcolor-red;
    }
}

.theme-dark {
    ~ .container {
        color: #fff;
    }
}

.theme-variant-b {
    
    &.title {
        background: @header-bgcolor-variant-b;
        color: @header-fgcolor-variant-b;
    }

    ~ .container {
        color: #000;
    }
}

.theme-variant-c {
    
    &.title {
        background: @header-bgcolor-variant-c;
        color: @header-fgcolor-variant-c;
    }

    ~ .container {
        color: @accent-color-variant-c;
    }
}
