/* #### EXAMPLES ########################################################## */

.example {
  width: 960px;
  height: 480px;
}

#box-model-1 {
  position: relative;
  color: #191919;
  font-size: 0.7em;
}

#box-model-1 div {
  position: absolute;
}

#box-model-1 .margin,
#box-model-1 .border,
#box-model-1 .padding,
#box-model-1 .content {
  border: 0.1em solid #191919;
  border-radius: 0.2em;
}

#box-model-1 .margin {
  background-color: var(--example-orange);
  width: 100%;
  height: 100%;
}

#box-model-1 .border {
  background-color: var(--example-pink);
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
}

#box-model-1 .padding {
  background-color: var(--example-green);
  width: 75%;
  height: 75%;
  top: 12.5%;
  left: 12.5%;
}

#box-model-1 .content {
  background-color: var(--example-blue);
  width: 66.6667%;
  height: 66.6667%;
  top: 16.6667%;
  left: 16.6667%;
}

#box-model-1 .margin-text,
#box-model-1 .border-text,
#box-model-1 .padding-text {
  padding: 0.1em 1em;
}

#box-model-1 .content-text {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#box-model-1 .top,
#box-model-1 .right,
#box-model-1 .bottom,
#box-model-1 .left {
  color: white;
}

#box-model-1 .top {
  left: 50%;
  top: -1em;
  transform: translateX(-50%) translateY(-50%);
}

#box-model-1 .right {
  left: calc(100% + 1em);
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
  width: 5em;
}

#box-model-1 .bottom {
  left: 50%;
  top: calc(100% + 1em);
  transform: translateX(-50%) translateY(-50%);
}

#box-model-1 .left {
  left: -1em;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}

#box-model-1 .width {
  left: 50%;
  top: calc(100% - 1em);
  transform: translateX(-50%) translateY(-50%);
  border-bottom: 2px solid black;
  width: 85%;
}

#box-model-1 .height {
  left: calc(100% - 1em);
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-90deg);
  border-bottom: 2px solid black;
  width: 40%;
}

.example .order::after {
  content: counter(ordering);
  margin-left: 0.53em;
  background-color: tomato;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  font-size: 0.6em;
  display: inline-block;
  position: relative;
  top: -0.1em;
  color: #191919;
}

.example .order {
  counter-increment: ordering 1;
}

.example .left.order::after {
  transform: rotate(90deg);
}

.example .right.order::after {
  transform: rotate(-90deg);
}

/*
 *  Inline och block
 */

#inline-and-block {
  display: flex;
}

#inline-and-block .inline,
#inline-and-block .block {
  flex: 1;
  text-align: left;
}

#inline-and-block .inline div,
#inline-and-block .block div {
  position: relative;
  width: 120px;
  height: 50px;
  border: 5px solid var(--example-orange);
}

#inline-and-block .inline > div::before,
#inline-and-block .block > div::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--example-orange);
  opacity: 0.5;
}

#inline-and-block .inline div {
  display: inline-block;
  margin-bottom: 2px;
  position: relative;
  counter-increment: inline 1;
}

#inline-and-block .inline div::after,
#inline-and-block .block div::after {
  content: counter(inline);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: rgba(25, 25, 25);
  font-size: 0.8em;
}

#inline-and-block .block div {
  display: block;
  margin-bottom: 15px;
  position: relative;
  counter-increment: block 1;
}

#inline-and-block .inline div::after {
  content: counter(inline);
}

#inline-and-block .block div::after {
  content: counter(block);
}

/*
 * Gemensamt för alla 
 */

.example {
  overflow: hidden;
  position: relative;
}

.example .viewport {
  border: 3px dashed var(--example-green);
  box-shadow: 0 0 0 1000px rgba(25, 25, 25, 0.5);
  position: absolute;
  top: 25%;
  width: calc(100% - 6px);
  height: 50%;
}

.example .page {
  position: absolute;
  z-index: -1;
  padding: 20% 5%;
  width: 90%;
  top: -50%;
}

/*
*  position: relative;
*/

@keyframes relative-scroll {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-20%);
  }
}

#pos-relative .page {
  animation: 3s relative-scroll ease-in-out infinite alternate;
}

#pos-relative {
  text-align: left;
  position: relative;
}

#pos-relative .box {
  display: inline-block;
  width: 30%;
  height: 50px;
}

#pos-relative .solid {
  border: 5px solid rgb(150, 150, 150);
  background-color: rgb(80, 80, 80);
}

#pos-relative .dotted {
  border: 5px dotted var(--example-blue);
  position: relative;
}

#pos-relative .dotted::after {
  content: "";
  position: absolute;
  left: 20%;
  top: 20%;
  width: 100%;
  height: 100%;
  border: 5px solid var(--example-orange);
}

/*
 *  position: absolute;
 */

@keyframes absolute-scroll {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(-25%);
  }
}

#pos-absolute .page {
  animation: 3s absolute-scroll ease-in-out infinite alternate;
  position: relative;
  top: -100%;
}

#pos-absolute .box {
  height: 200px;
  margin-bottom: 10px;
}

#pos-absolute .solid {
  border: 5px solid rgb(150, 150, 150);
  background-color: rgb(80, 80, 80);
}

#pos-absolute .ref-box {
  position: relative;
  border: 5px dotted var(--example-blue);
  height: 200px;
}

#pos-absolute .item {
  position: absolute;
  border: 5px solid var(--example-orange);
  top: 40%;
  left: 30%;
  width: 30%;
  height: 30%;
}

/*
 *  position: fixed;
 */

@keyframes fixed-scroll {
  from {
    transform: translateY(-10%);
  }
  to {
    transform: translateY(-20%);
  }
}

#pos-fixed .page {
  animation: 3s fixed-scroll ease-in-out infinite alternate;
  position: relative;
  top: -150%;
}

#pos-fixed .viewport-marking {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: 5px dotted var(--example-blue);
}

#pos-fixed .box {
  height: 150px;
  margin-bottom: 10px;
}

#pos-fixed .solid {
  border: 5px solid rgb(150, 150, 150);
  background-color: rgb(80, 80, 80);
}

#pos-fixed .item {
  position: fixed;
  border: 5px solid var(--example-orange);
  top: 40%;
  left: 50%;
  width: 70%;
  height: 50px;
  transform: translateX(-50%);
}

/*
 *  position: fixed;
 */

@keyframes sticky-scroll {
  from {
    transform: translateY(-200px);
  }
  to {
    transform: translateY(-400px);
  }
}

@keyframes sticky-scroll-item {
  from,
  60% {
    transform: translateY(10px);
  }

  to {
    transform: translateY(90px);
  }
}

#pos-sticky .page {
  animation: 3s sticky-scroll linear infinite alternate;
  position: relative;
  top: -150%;
}

#pos-sticky .viewport-marking {
  width: calc(100% - 10px);
  height: calc(100% - 10px);
}

#pos-sticky .box {
  height: 250px;
  margin-bottom: 10px;
}

#pos-sticky .solid {
  border: 5px solid rgb(150, 150, 150);
  background-color: rgb(80, 80, 80);
}

#pos-sticky .ref-box {
  position: relative;
  border: 5px dotted var(--example-blue);
  height: 200px;
}

#pos-sticky .item {
  animation: 3s sticky-scroll-item linear infinite alternate;
  position: absolute;
  border: 5px solid var(--example-orange);
  right: 10%;
  left: 10%;
  height: 50px;
}