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(190,190,200);
  --emphasis-color: rgb(27,211,165);
}



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

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

code {
  line-height: 1.5em;
  background: lightcyan;
}

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

.primary-heading {
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 2rem;
  font-weight: 400;
}


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

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

.centered-container {
  max-width: 800px;
  margin: 0 auto;
}

.box {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
}


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

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

.trans-example-1 {
  margin-left: 0;
  transition: margin-left .5s ease-in-out .5s;
}

.trans-example-1:hover {
  margin-left: 50px;
}

.trans-example-2 {
  width: 400px;
  height: 150px;
  position: relative;
}

.trans-example-2__box {
  width: 100px;
  height: 100px;
  background: rgb(142,87,250);
  border-radius: 3px;
  color: #fff;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  transition-property: transform top left background;
  transition-duration: .5s;
  transition-timing-function: ease-out;
}

.trans-example-2:hover .trans-example-2__box {
  transform: rotate(1turn) scale(.45);
  top: 75px;
  left: 350px;
  background: rgb(252,102,33);
}

.color-box {
  background: rgb(242,244,248);
  transition: background 1s;
}

.color-box:hover {
  background: var(--random-bg);
}


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

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