@margy: var(--fs);
@margx: ~"calc(var(--fs) * 1.5)";
@margm: ~"calc(var(--fs) * 0.75)";

@m: ~"(max-aspect-ratio: 10/1)";
@d: ~"(min-aspect-ratio: 10/1)";

main {
  display: table;
  position: relative;
  background-color: white;
}

.selected {
  background-color: black;
}

body.started {
  #intro {
    display: none;
  }


  #container {
    display: block;
    min-height: ~"calc(var(--vh) * 100)";

    // SCENES

    &[scene="15"],
    &[scene="16"],
    &[scene="17"],
    &[scene="18"],
    &[scene="19"],
    &[scene="20"],
    &[scene="21"],
    &[scene="22"],
    &[scene="23"],
    &[scene="24"] {
      p {
        display: inline;
      }
    }

    &[scene="1"] {
      display: table-cell;
      vertical-align: top;
      padding: @margm;
      @media @m {
        br {
          display: none;
        }
      }
    }
    &[scene="2"] {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    &[scene="3"] {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      font-size: 230%;
      @media @m {
        font-size: 220%;
      }
    }
    &[scene="4"],
    &[scene="5"] {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      padding: 0 ~"calc(var(--fs) * 4)";
    }

    &[scene="6"] {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      font-size: 50%;
      p {
        margin: 0 auto;
      }
      font {
        min-width: 0;
        transition: min-width 0.15s ease;
      }
      [glitch="3"] {
        color: blue !important;
        &, * { text-decoration: underline !important; }
      }
    }

    &[scene="7"] {
      font-size: 25%;
      padding: 0;
      position: relative;
      overflow: hidden;
      p {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        display: grid;
        width: fit-content;
        margin: 0 auto;
        grid-template-columns: repeat(10, fit-content(1));
        @media @m {
          grid-template-columns: repeat(7, fit-content(1));
        }
        span {
          color: black;
          padding: 0;
          border: ~"calc(var(--vw) * 0.14)" solid black;
          margin: ~"calc(var(--fs) * -0.07)";
          font {
            min-width: 0;
            min-height: 0;
            white-space: nowrap;
            transition: min-width 60ms ease, min-height 60ms ease;
          }
          font {
            background: transparent !important;
          }
          &.selected {
            background-color: blue !important;
            color: white !important;
          }
        }
      }
      [glitch="2"] {
        background-color: yellow !important;
        color: blue !important;
        // background-color: red !important;
        // color: black !important;
      }
      [glitch="3"] {
        color: white !important;
      }
      [decor="6"] {
        color: blue !important;
      }
    }
    &[scene="8"] {
      color: black;
      font-size: 800%;
      @media @m {
        font-size: 600%;
      }
      padding: ~"calc(var(--vh) * 40)" 0 ~"calc(var(--vh) * 15)";
      text-align: left;
      span {
        padding: 0 0.2em 0 0.03em;
      }
      font {
        display: inline-block;
        line-height: 0.75em;
        &.selected {
          background-color: blue;
          color: white;
        }
      }
    }
    &[scene="9"] {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      padding: var(--fs);
      font-size: 180%;
      @media @m {
        font-size: 140%;
      }
      width: ~"calc(var(--vw) * 100)";
    }
    &[scene="10"] {
      display: block;
      margin: 0 auto;
      padding: 0;
      font-size: 50%;
      width: ~"calc(var(--vw) * 100)";
      transition: width 0.2s ease;
      [glitch="4"] {
        background-color: white !important;
        color: black !important;
        font-family: "Wingdings", serif;
      }
    }
    &[scene="11"] {
      padding: 0;
      font-size: 80%;
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      p {
        width: 0;
        min-width: 25%;
        transition: width 0.12s ease;
      }
      .selected {
        color: black !important;
      }
    }
    &[scene="12"] {
      font-size: 50%;
      display: flex;
      width: 100%;
      flex-wrap: wrap;
      padding: 0;
      p {
        min-width: 20%;
        width: ~"calc(var(--vw) * 50)";
        text-align: left;
        padding: 0.14em ~"calc(var(--vw) * 2)" 0.14em 0;
        transition: width 0.12s ease;
        span {
          line-height: 0.8em;
        }
        &.selected {
          background-color: black !important;
          color: white;
        }
      }
    }
    &[scene="13"] {
      display: block;
      font-size: 33.333%;
      text-align: left;
      p {
        display: inline;
      }
      span {
        padding: 0;
        font:last-child {
          min-width: ~"calc(var(--fs) * 3)";
        }
      }
      font {
        padding: 0.12em 0 0.22em;
        display: inline-block;
        color: black;
        min-width: ~"calc(var(--fs) * 1.5)";
        transition: min-width 0.15s ease;
      }
      .selected font {
        background-color: black !important;
        color: white !important;
      }
    }
    &[scene="14"] {
      font-size: ~"calc(var(--vw) * 8.3)" !important;
      @media @m {
        font-size: ~"calc(var(--vw) * 12)" !important;
      }
    }


    &[scene="15"] {
      transition: font-size 6s ease;
      span {
        padding: 0;
        font {
          padding: 0 0.14em 0.14em;
        }
      }
      .selected {
        background-color: black;
      }
    }

    &[scene="16"],
    &[scene="17"] {
      font-size: ~"calc(var(--fs) * 1.6)";
    }
    &[scene="16"] {
      color: black;
      [glitch="2"] {
        background-color: red !important;
        color: black !important;
      }
      [glitch="3"] {
        color: white !important;
      }
      [glitch="4"] {
        color: black !important;
      }
    }
    &[scene="17"] {
      color: #222;
      .selected {
        background-color: transparent !important;
        color: white !important;
        font {
          color: white !important;
        }
      }
    }




    &[scene="18"] {
      height: 100%;
      font-size: ~"calc(var(--fs) * 1.27)";
      [glitch="2"] {
        background-color: yellow !important;
        color: blue !important;
      }
      font {
        min-width: 0;
      }
    }


    &[scene="19"],
    &[scene="20"] {
      display: block;
      font-size: ~"calc(var(--fs) * 1.27)";
      height: 100%;
      span {
        display: inline-block;
        padding: 0;
        font {
          padding: 0 0.14em 0.14em;
        }
      }
      .selected {
        color: blue;
      }
      [glitch="2"] {
        background-color: yellow !important;
        color: blue !important;
      }
      [glitch="3"] {
        color: white !important;
      }
      [glitch="4"] {
      }
    }

    &[scene="19"] {
      font {
        min-width: 0;
        transition: min-width 2s ease;
      }
    }

    &[scene="20"] {
      background-color: black;
      span {
        min-width: ~"calc(var(--fs) * 8)";
      }
      font {
        min-width: 0;
        transition: min-width 100ms ease;
      }
    }

    &[scene="21"],
    &[scene="22"],
    &[scene="23"],
    &[scene="24"] {
      background-color: black;
      font-size: ~"calc(var(--fs) * 1.27)";
      display: block;
      span {
        padding: 0;
        font {
          padding: 0.1em 0.2em 0.2em;
        }
      }
      [glitch]:not([glitch="0"]) font {
        background-color: transparent !important;
      }

      [glitch="1"] {  
        background-color: yellow !important;
        font { color: blue !important; }
      }
      [glitch="2"] {
        font { color: white !important; }
      }
      [glitch="3"] {
        font { color: white !important; }
      }
      [glitch="4"] {
        font { color: black !important; }
      }

    }
    &[scene="22"],
    &[scene="23"],
    &[scene="24"],
    &[scene="25"] {
      font-size: ~"calc(var(--fs) * 1.27)";
    }

    &[scene="23"],
    &[scene="24"] {
      span {
        padding: 0;
        font {
          padding: 0.1em 0.2em 0.2em;
        }
      }
    }
    &[scene="24"] {
      .selected {
        color: white !important;;
        background-color: transparent !important;
      }
    }

    &[scene="25"] {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      background-color: black;
      color: white;
      p {
        display: inline;
      }
    }

    &[scene="26"] {
      background-color: #000;
    }



    // LAYOUTS

    &[layout="1"] {
      text-transform: uppercase;
      p {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }

    &[layout="2"] {
      p {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }

    &[layout="1"],
    &[layout="2"] {
      font {
        padding: 0.05em !important;
      }
    }

    &[layout="3"] {
      p {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        span {
          margin: 0 0.15em;
        }
      }
    }

    &[layout="4"] {
      p {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
        background-color: white;
        span {
          padding: 0 0.1em 0 0;
          font {
            background-color: #ddd;
          }
        }
      }
    }

    &[layout="5"] {
      span {
        background-color: white;
        color: black;
        padding: 0 0.14em;
      }
    }

    &[layout="6"] {
      span {
        background-color: black;
        color: white;
        padding: 0;
        margin: 0 ~"calc(var(--fs) * 1.5)";
      }
      &[borders]:not([borders="0"]) font {
        margin: 0 auto;
      }
    }

    &[layout="7"] {
      p {
        text-align: left;
      }
    }

    &[layout="8"] {
      p {
        text-align: right;
        padding-right: 0;
        padding-left: ~"calc(var(--fs) * 2)";
      }
    }

    &[layout="9"] {
        align-items: flex-end;
    }

    &[layout="10"] {
        justify-items: right;
        align-items: flex-end;
    }

    &[layout="11"] {
      display: inline-block;
      text-align: right;
      p {
        display: inline-block;
      }
    }

    &[layout="12"] {
      display: inline-block;
      text-align: right;
      p {
        display: inline-block;
        vertical-align: middle;
      }
    }

    &[layout="13"] {
      display: inline-block;
      text-align: right;
      p {
        display: inline-block;
        vertical-align: top;
      }
    }

    &[layout="14"] {
      justify-content: space-between;
    }

    &[layout="15"] {
      justify-content: space-evenly;
    }

    &[layout="16"] {
      grid-template-columns: repeat(16,1fr);
    }

    &[layout="17"] {
      grid-template-columns: repeat(4,1fr);
    }

    &[layout="18"] {
      grid-template-columns: repeat(6,1fr);
    }

    &[layout="19"] {
      grid-template-columns: repeat(8,1fr);
    }

    &[layout="20"] {
      grid-template-columns: repeat(12,1fr);
    }

    &[layout="21"] {
      vertical-align: bottom;
      p {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    }    
    &[layout="22"] {
      vertical-align: bottom;
      text-align: right;
    }
    &[layout="23"] {
      vertical-align: top;
      text-align: right;
    }
    &[layout="24"] {
      vertical-align: middle;
      p {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
      }
    }


    &[layout="25"] {
      vertical-align: middle;
      text-align: center;
    }
    &[layout="26"] {
      display: grid;
      height: 100%;
      justify-items: end;
      align-items: start;
      p {
        width: 60%;;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        text-align: right;
      }
    }
    &[layout="27"] {
      display: grid;
      height: 100%;
      align-items: start;
      p {
        width: 60%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        text-align: left;
      }
    }
    &[layout="28"] {
      span {
        width: ~"calc(var(--vw) * 50)";
      }
    }
    &[layout="29"] {
      p {
        width: 30%;
        margin: 0 auto;
        @media @m {
          width: 50%;
        }
      }
    }
    &[layout="30"] {
      p {
        width: ~"calc(var(--vw) * 50)";
        margin: 0 auto;
      }
    }




    &[borders="1"] {
      [word] {
        margin: 0 0.14em;
      }
      font {
        border: 0.02em solid black;
        margin-right: -0.02em;
        margin-top: -0.02em;
        padding: 0 0.04em 0.14em;
      }
    }
    &[borders="2"] {
      [word] {
        margin: 0 0.14em;
      }
      font {
        border: 0.05em solid black;
        margin-right: -0.05em;
        margin-top: -0.05em;
        padding: 0 0.04em 0.14em;
      }
    }
    &[borders="3"] {
      [word] {
        margin: 0 0.14em;
      }
      font {
        border: 0.1em solid black;
        margin-right: -0.1em;
        margin-top: -0.1em;
        padding: 0 0.04em 0.14em;
      }
    }
    &[borders="4"] {
      [word] {
        margin: 0 0.14em;
      }
      font {
        border-right: 0.1em solid blue;
      }
    }

  }

}



[glitch="1"] {  
  background-color: #ccc !important;
  color: black !important;
}
[glitch="2"] {
  background-color: black !important;
  color: white !important;
}
[glitch="3"] {
  color: black !important;
}
[glitch="4"] {
  background-color: blue !important;
  color: white !important;
}
[glitch="5"] {
  font-family: "Wingdings", serif;
}


// TO ELEMENT

[decor="1"] {
  text-transform: uppercase;
}
[decor="2"] {
  text-decoration: underline;
}
[decor="3"] {
  font-family: "Wingdings", serif;
}
[decor="4"] {
  font-style: italic;
}
[decor="5"] {
  letter-spacing: 0.2em;
  padding-left: 0.2em !important;
}
[decor="6"] {
  color: white !important;
}
[decor="7"] {
  background-color: white !important;
}
[decor="8"] {
  padding: 0.5em !important;
}
[decor="9"] {
  padding-left: 0.5em !important;
  padding-right: 0.5em !important;
}
[decor="10"] {
  padding-top: 0.5em !important;
  padding-bottom: 0.5em !important;
}