:root {
  --fm-border-width: 2cqw;
  --fm-border-color: #9e2a2b;
  --fm-border-color-dark: #4e1415;
  --fm-border-color-light: #ffe4e4;
  --fm-border-fade: calc(var(--fm-border-width) / 5);
  --fm-border-edge: 0.2cqw;
}

@media (max-width: 800px) {
  :root {
    --fm-border-width: 15px;
  }
}

@font-face {
  font-family: 'segment-display';
  src: url('/fonts/13-segment-display.otf.woff2') format('woff2');
  font-display: swap; /* Improves loading performance */
}

div.fruit-machineshop-container {
  container-type: size;
  width: 100%;
  max-width: 110cqh;
  height: 80vh;
  /*max-height:  50cqw;*/
  position: relative;
}

.main-content-wrapper {
  display: flex;
  padding: 1rem;
}

.main-content-wrapper .about-summary {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 30%;
  padding: 1rem;
}

@media (max-width: 1024px) {
  .main-content-wrapper {
    flex-direction: column;
  }

  .main-content-wrapper .about-summary {
    flex: 1;
  }
}

div.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-colour);
  transition: opacity 1s;
  svg {
    display: none;
    path, polygon {
      fill: #fff;
      stroke: none;
    }
  }
}

.outer-border {
  box-sizing: border-box;
  position: relative;
  background: #9E2A2B;
  width: 100%;
  height: 100%;
  border-radius: var(--fm-border-width);
  padding: var(--fm-border-width);
  box-shadow: inset 0 0 var(--fm-border-edge) var(--fm-border-fade) var(--fm-border-color-dark);
}



div.border-lights {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;


  div.light {
    --size: calc(var(--fm-border-width) / 2);
    --colour-off: #222;
    --colour-on: #ff9;

    position: absolute;
    width: var(--size);
    height: var(--size);
    border-radius: var(--size);
    top: 10px;
    left: 100px;

    background: var(--colour-off);

    --w: 0.3cqw;
    --blur: 0.3cqw;
    --radius: 0.01cqw;

    &.inset {
      box-shadow: 0 calc(-1 * var(--w)) var(--blur) var(--radius) var(--fm-border-color-dark),
      0 var(--w) var(--blur) var(--radius) var(--fm-border-color-light);

    }


    --lights-delay: 1s;
    div {
      animation: lights var(--lights-delay) infinite;
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }

    &:nth-child(odd) div {
      animation-delay: calc(var(--lights-delay) / 2);
    }
  }

  @media (max-width: 800px) {
    div.light {
      --w: 1px;
      --blur: 1px;
      --radius: 1px;
    }
  }
}



@keyframes lights {
  0%, 50% {
    background: black;
    box-shadow: none;
  }
  51%, 100% {
    background: var(--colour-on);
    box-shadow: 0 0 0.5vw 0.1vw rgba(255, 255, 0, 0.7);
  }
}

div.fruit-machineshop-container div.content {
  display: flex;
  height: 100%;
  width: 100%;
  border-radius: calc(var(--fm-border-width) / 2.5);
  box-shadow: 0 0 var(--fm-border-edge) var(--fm-border-fade) var(--fm-border-color-dark);

  background: #000 url("/about/images/background.jpg") center / cover no-repeat;
  flex-direction: row;
}

div.skills, div.roles {
  img {
    filter: brightness(60%);
    &.flash {
      filter: brightness(130%) saturate(65%) hue-rotate(-10deg);
      animation: flash 0.2s infinite ease-in-out alternate;
    }

  }
}

@keyframes flash {
  0%, 50% {
    filter: brightness(60%);
  }
  51%, 100% {
    filter: brightness(130%);
  }
}

@keyframes logo-flash {
  0%, 50% {
    filter: brightness(60%);
  }
  51%, 100% {
    filter: brightness(100%);
  }
}

div.skills {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 20px;
  padding: 10px;
  width: 50cqh;

  img {
    object-fit: contain;
  }
}

div.fruit-machineshop-container main {
  flex-grow: 1;
  /*flex-shrink: 1;*/
  display: flex;
  flex-direction: column;
  /*width: 100%;*/

  img {
    height: 100%;
    width: auto;
    object-fit: contain;
  }

  div {
    display: flex;
    justify-content: center;

    &.machineshop {
      height: 20%;
      img.flash {
        animation: logo-flash 0.25s infinite ease-in-out alternate;
      }
    }

    &.roles {
      height: 15%;
      margin-top: -10px;

      display: flex;
      justify-content: space-around;
      gap: 20px;

      div:first-child, div:last-child {
        flex-grow: 1;
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    &.segments {
      height: 15%;
      position: relative;
      align-items: center;

      >div {
        position: relative;
        display: flex;
        margin: 10px;


        div.segment-display {
          position: absolute;
          top: 37%;
          bottom: 19%;
          left: 5%;
          right: 5%;
          svg {
            height: 100%;
            width: auto;
          }
        }
      }
    }

    &.wheels {
      height: 45%;
      display: flex;
      align-items: center;

      >div {
        position: relative;

        max-width: 100%;
        max-height: 100%;
        --fm-border-width: 2cqw;
        --edge-width: calc(var(--fm-border-width) / 10);

        background: var(--fm-border-color);
        border-radius: calc(var(--fm-border-width) * 1.2);
        padding: var(--fm-border-width);
        box-shadow: inset 0 0 0px var(--edge-width) var(--fm-border-color-light);


        >div:not(.border-lights) {
          width: 100%;
          border-radius: calc(var(--fm-border-width) / 1.5);
          /*this creates rendering issues where the canvas is over the corners */
          box-shadow: 0 0 0 var(--edge-width) var(--fm-border-color-light);
          background: #000;
        }

        div.canvas-container {
          border-radius: calc(var(--fm-border-width) / 1.5);
          border: calc(var(--fm-border-width) / 4) solid #2a1b3a;
          width: 100%;
          height: 100%;
          canvas {
            width: 100%;
            height: 100%;
            border-radius: calc(var(--fm-border-width) / 2);
          }
        }

        div.complete {
          width: 100%;
          display: none;
          padding: 1cqw;
          flex-direction: column;
          align-items: center;
          background: var(--fm-border-color-dark);
          z-index: 1;

          img.jackpot {
            height: 25%;
          }
          img.enter-email {
            height: 25%;
          }
          input {
            font-family: 'segment-display', sans-serif;
            height: 25%;
            font-size: 1.8cqw;
            padding: 5px;
            box-sizing: border-box;
            border-radius: 1cqw;
            width: 50%;
            color: #f00;
            background: #2A1B3A;
            border: 0.5cqw solid #9F2B2C !important;
            box-shadow: inset 0 0 1px calc(1cqw / 4) #fff, 0 0 1px calc(1cqw / 4) #fff;
          }
          input::placeholder {
            color: #fff;
          }
          img.submit {
            margin-top: 2%;
            height: 20%;

            &:hover {
              cursor: pointer;
            }
          }
        }

        img.gif {
          position: absolute;
          height: 123%;
          top: -25%;
          display: none;
        }
      }
    }
    &.bottom-text {
      height: 5%;
      >div {
        margin: 4px;
      }
    }
  }

  img {
    max-width: 100%;
  }
}

/* portrait */
@container (aspect-ratio < 1/1) {
  div.fruit-machineshop-container div.content {
    flex-direction: column;

    main {
      height: 70cqh;
      .bottom-text {
        height: 5cqh;
        margin: 1cqh;
        img {
          max-width: 90%;
        }
      }
    }

    div.skills.landscape {
      display: none;
    }

    div.skills {
      flex-grow: 1;
      display: flex;
      flex-direction: row;
      height: 10%;
      width: 100%;
      gap: 10px;

      justify-content: center;
      align-items: center;
      padding: 0;

      img {
        max-height: calc(100% - 10px);
        max-width: calc(20% - 20px);
        object-fit: contain;
      }

    }
  }
}

/* landscape */
@container (aspect-ratio >= 1/1) {
  div.fruit-machineshop-container div.content {
    div.skills {
      &.portrait {
        display: none;
      }
      img {
        height: calc(20% - 16px);
      }
      width: auto;
    }
  }

  div.fruit-machineshop-container.firefox div.content {
    div.skills {
      width: 50cqw;
    }
  }
}

@container (aspect-ratio >= 1/1.2) {
  .segments {
    align-items: normal !important;
  }
}

@container (aspect-ratio < 1200/1000) {
  div.content {
    background-size: auto 100%;
  }
}
@container (aspect-ratio >= 1200/1000) {
  div.content {
    background-size: 100% auto;
  }
}
</style>