/*?ALL variables and layout classes (margin, font-size, etc.)*/
/*!basic point size for margins etc -0.25 rem, for font size point is 0.1 rem*/

:root {
  --icon-size-base: 2rem;
  --icon-size-big: 3rem;
  --font-size-inline: 0.7rem;
  --font-size-base: 1rem;
  --font-size-topic: 1.2rem;
  --font-size-accent: 1.5rem;
  --font-size-heading: 3rem;
  --clr-font-light: #171717;
  --clr-bg-light: #f8f8f8;
  --clr-mid-grey: #808080;
  --clr-light-grey: #d0d0d0;
  --clr-lightest-grey: #f0f0f0;
  --clr-faded-text-lbg: #b0b0b0;
  --clr-black: #000000;
  --clr-white: #ffffff;
  --clr-warning-text: #a00000;
  --clr-clear-text: #00a000;
  --clr-softwarn-text: #ffa500;
  --clr-mid-grey-triple: 128, 128, 128;
  --clr-black-triple: 248, 248, 248;
  --opacity-full: 1;
  --opacity-none: 0;
  --opacity-low: 0.25;
  --opacity-mid: 0.5;
  --opacity-high: 0.75;
}

/**main layout items directions
  ------------------------------------------------------------------------------------*/
.relative {
  position: relative;
}
.svgs {
  display: none;
}
.portrait {
  /*screen is landscape by default thus hide portrait only items*/
  display: none;
}
.landscape {
  /*screen is landscape by default thus show landscape items*/
  display: block;
}

/** basic look classes */
.bnone {
  border: none;
}
.cp {
  cursor: pointer;
}
.f-base {
  font-size: var(--font-size-base);
}
.f-inline {
  font-size: var(--font-size-inline);
}
.f-topic {
  font-size: var(--font-size-topic);
}
.f-accent {
  font-size: var(--font-size-accent);
}
.f-heading {
  font-size: var(--font-size-heading);
}
.fw3 {
  font-weight: 300;
}
.fw4 {
  font-weight: 400;
}
.fw5 {
  font-weight: 500;
}
.fw6 {
  font-weight: 600;
}
.op1 {
  opacity: 0.25;
}
.op2 {
  opacity: 0.5;
}
.op3 {
  opacity: 0.75;
}
.op4 {
  opacity: 1;
}

.f5 {
  font-size: 0.5rem;
}

.f7 {
  font-size: 0.7rem;
}
.f8 {
  font-size: 0.8rem;
}
.f9 {
  font-size: 0.9rem;
}
.f10 {
  font-size: 1rem;
}
.f15 {
  font-size: 1.5rem;
}
.f20 {
  font-size: 2rem;
}
.f25 {
  font-size: 2.5rem;
}
.f30 {
  font-size: 3rem;
}
.f8d {
  font-size: 80%;
}
.f9d {
  font-size: 90%;
}
.f12d {
  font-size: 120%;
}
.f15d {
  font-size: 150%;
}
.cau {
  text-transform: uppercase;
}
.cal {
  text-transform: lowercase;
}
.cap {
  text-transform: capitalize;
}
.l4 {
  line-height: 1rem;
}
.l5 {
  line-height: 1.25rem;
}
.l6 {
  line-height: 1.5rem;
}
.l8 {
  line-height: 2rem;
}
.l10 {
  line-height: 2.5rem;
}
.l12 {
  line-height: 3rem;
}
.l14 {
  line-height: 3.5rem;
}
.l16 {
  line-height: 4rem;
}
.nowrap {
  white-space: nowrap;
}
.nostyle,
.nostyle:hover {
  text-decoration: none;
}
.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
}

/**basic layout classes*/
.pl2 {
  padding-left: 0.5rem;
}
.pl4 {
  padding-left: 1rem;
}
.pl8 {
  padding-left: 2rem;
}
.pl12 {
  padding-left: 3rem;
}
.pb1 {
  padding-bottom: 0.25rem;
}
.pb2 {
  padding-bottom: 0.5rem;
}
.pb4 {
  padding-bottom: 1rem;
}
.pb8 {
  padding-bottom: 2rem;
}
.pb12 {
  padding-bottom: 3rem;
}
.p2 {
  padding: 0.5rem;
}
.p4 {
  padding: 1rem;
}
.p8 {
  padding: 2rem;
}
.p12 {
  padding: 3rem;
}
.ml2 {
  margin-left: 0.5rem;
}
.ml4 {
  margin-left: 1rem;
}
.ml8 {
  margin-left: 2rem;
}
.ml12 {
  margin-left: 3rem;
}
.mb4 {
  margin-bottom: 1rem;
}
.mb8 {
  margin-bottom: 2rem;
}
.mb12 {
  margin-bottom: 3rem;
}
.mt2 {
  margin-top: 0.5rem;
}
.mt4 {
  margin-top: 1rem;
}
.mt8 {
  margin-top: 2rem;
}
.mr2 {
  margin-right: 0.5rem;
}
.mr4 {
  margin-right: 1rem;
}
.mr8 {
  margin-right: 2rem;
}

.m2 {
  margin: 0.5rem;
}
.m4 {
  margin: 1rem;
}
.m8 {
  margin: 2rem;
}
.m12 {
  margin: 3rem;
}

.w10 {
  width: 100%;
}
.w9 {
  width: 90%;
}
.w8 {
  width: 80%;
}
.w7 {
  width: 70%;
}
.w5 {
  width: 50%;
}

/**flex and grid layouts*/
.g1 {
  gap: 0.25rem;
}
.g2 {
  gap: 0.5rem;
}
.g4 {
  gap: 1rem;
}
.g8 {
  gap: 2rem;
}
.g16 {
  gap: 4rem;
}
.g24 {
  gap: 6rem;
}
.g32 {
  gap: 8rem;
}
.fg1 {
  flex-grow: 1;
}
.fg0 {
  flex-grow: 0;
}

.flexs0 {
  flex-shrink: 0;
}
.flexs1 {
  flex-shrink: 1;
}
.frow {
  display: flex;
  flex-direction: row;
}
.fcol {
  display: flex;
  flex-direction: column;
}

.fac {
  align-items: center;
}
.fab {
  align-items: baseline;
}
.fas {
  align-items: flex-start;
}
.fjfe {
  justify-content: flex-end;
}
.fjfs {
  justify-content: flex-start;
}
.fjsa {
  justify-content: space-around;
}
.fjsb {
  justify-content: space-between;
}
.fjc {
  justify-content: center;
}
.fjse {
  justify-content: space-evenly;
}
.fjsb {
  justify-content: space-between;
}
.fnw {
  flex-wrap: nowrap;
}

@media (orientation: portrait) {
  .portrait {
    display: block;
  }
  .landscape {
    display: none;
  }
}