base.css

@charset "UTF-8";

/* VARIABLES -------------------------------------------------------------- */

:root {
  --heading-font: 'Open Sans', sans-serif;
  --main-font: 'Open Sans', sans-serif;
  --minor-font: 'Open Sans', sans-serif;
  --heading-color: rgba(0,0,50,.9);
  --main-color: rgba(70,70,90,.9);
  --minor-color: rgb(180,180,190);
  --emphasis-color: rgb(27,211,165);
}



/* DEFAULTS --------------------------------------------------------------- */

html {
  font-family: var(--main-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7em;
  color: var(--main-color);
}

h1 {
  font-family: var(--heading-font);
  font-size: 2.6rem;
  font-weight: 300;
  line-height: 1.2em;
  color: var(--heading-color);
  margin: 0 0 25px 0;
}

p {
  margin: 0 0 20px 0;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

/* TYPOGRAPHY ------------------------------------------------------------- */

/* LINKS & BUTTONS -------------------------------------------------------- */

a:link,
a:visited {
  color: var(--minor-color);
  text-decoration-skip: edges;
}

a:hover,
a:active {
  color: var(--emphasis-color);
}

/* LAYOUT ----------------------------------------------------------------- */

.flexible {
  border: solid 2px aquamarine;
  min-width: 380px;
  max-width: 1400px;
  margin: 15px auto;
}

.fixed-height {
  height: 350px;
}

.box {
  background: AliceBlue;
  padding: 25px;
}

.box:nth-child(even) {
  background: MintCream;
}


.container-a {
  display: flex;
  /* flex-direction: column; */
  /* flex-direction: column-reverse; */
  /* flex-direction: row; */
  flex-direction: row-reverse;
}

.container-a__content-a {
}

.container-a__content-b {
  order: 1;
}

.container-a__content-c {
}


.container-b {
  display: flex;
  gap: 5px;
}

.container-b__content-a {
  width: 200px;
  /* flex-grow: 1; */
}

.container-b__content-b {
  width: 200px;
  flex-grow: 1;
}

.container-b__content-c {
  width: 200px;
  /* flex-grow: 1; */
}


.container-c {
  display: flex;
}

.container-c__content-a {
  width: 700px;
  flex-shrink: 50;
}

.container-c__content-b {
  width: 700px;
  flex-shrink: 1;
}

.container-c__content-c {
  width: 700px;
  flex-shrink: 10;
}


.container-d {
  display: flex;
  /* justify-content: flex-start;  */
  /* justify-content: flex-end; */
  /* justify-content: center; */
  /* justify-content: stretch; */
  /* justify-content: space-evenly; */
  /* justify-content: space-around; */
  justify-content: space-between;
}

.container-d__content-a {
  width: 150px;
  height: 150px;
}

.container-d__content-b {
  width: 150px;
  height: 150px;
}

.container-d__content-c {
  width: 150px;
  height: 150px;
}


.container-e {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: stretch; */
  /* align-items: baseline; */
  align-items: center;
}

.container-e__content-a {
  width: 150px;
  height: 150px;
}

.container-e__content-b {
  width: 150px;
  height: 150px;
}

.container-e__content-c {
  width: 150px;
  height: 150px;
}


.container-f {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.container-f__content-a {
  width: 150px;
  height: 150px;
  align-self: flex-end;
}

.container-f__content-b {
  width: 150px;
  height: 150px;
  align-self: center;
}

.container-f__content-c {
  width: 150px;
  height: 150px;
}


.container-g {
  display: flex;
  height: 300px;
}

.container-g__content-a {
  width: 150px;
  height: 150px;
  align-self: flex-end;
}

.container-g__content-b {
  width: 150px;
  height: 150px;
  align-self: flex-end;
  margin-left: auto;
}

.container-g__content-c {
  width: 150px;
  height: 150px;
  align-self: flex-start;
  /* margin: 0 auto; */
  flex-shrink: 0;
}

.container-g__content-d {
  width: 150px;
  height: 150px;
  align-self: flex-end;
  margin-right: auto;
}

.container-g__content-e {
  width: 150px;
  height: 150px;
  align-self: flex-end;
}


.container-h {
  min-height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  /* align-items: center; */
  /* The align-content property has no effect on single-line flex boxes */
  /* align-content: flex-start; */
  /* align-content: flex-end; */
  /* align-content: baseline; */
  /* align-content: first baseline; */
  /* align-content: last baseline; */
  align-content: center;
  /* align-content: stretch; */
  /* align-content: space-around; */
  /* align-content: space-evenly; */
  /* align-content: space-between; */
}

.container-h__content-a {
  /* flex: 300px; */
  width: 200px;
}

.container-i {
  min-height: 400px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  align-content: center;
}

.container-i__content-a {
  /* flex: 200px is shorthand for flex: 1 1 200px; which is shorthand for */
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
  flex: 200px;
}

.container-j {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}

.container-j__content-a {
  /* flex: 200px is shorthand for flex: 1 1 200px; which is shorthand for */
  /* flex-grow: 1; flex-shrink: 1; flex-basis: 200px; */
  /* This max says min width 200px and no more than 3 items per row. */
  flex: max(300px, (100% - 10px) / 3);
  /* Where the above formula has to account for the gap, we can also do this */
  flex: max(300px, 100% / 4 - 0.1%);
  /* Important because we're adding padding elsewhere */
  box-sizing: border-box;
}

/*
Note: as soon as you use flex-basis, the width property (if direction row)
is ignored. Both min-width and max-width can be used to clamp the size.
*/

.container-k {
  border: solid 2px aquamarine;
  display: flex;
  flex-direction: row;
}

.container-k .box {
  padding: 0;
}

.container-k__content-a {
  flex: 0 0 100px;
}

.container-k__content-a p {
  background: gold;
}

.container-k__content-b {
  flex: 1 1 auto;
  min-width: 100px;
  max-width: 300px;
}

.container-k__content-b p {
  background: pink;
}

.container-k__content-c {
  flex: 1 1 auto;
  min-width: 100px;
  max-width: 200px;
  margin-left: auto;
}

.container-k__content-c p {
  background: green;
}



/* COMPONENTS ------------------------------------------------------------- */

/* COSMETIC --------------------------------------------------------------- */

.comment {
  color: var(--minor-color);
}

/* UTILITY ---------------------------------------------------------------- */

/* STATE ------------------------------------------------------------------ */