/* ========================================
   MAIN BLOCK STYLES
   ======================================== */

/* ========== FLOATING ANIMATIONS ========== */
@keyframes floatLeft {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(-8px); }
}

@keyframes floatRight {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(8px); }
}

@keyframes floatLeftSlow {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(-6px); }
}

@keyframes floatRightSlow {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(6px); }
}

/* ========== DESKTOP - 1441px & more ========== */
@media (min-width: 1441px) {
  .greeting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 104px 0px;
    gap: 10px;
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 732px;
    margin: 56px auto;
  }

  .greeting-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 124px 0px 0px;
    gap: 10px;
    isolation: isolate;
    width: 1004px;
    height: 524px;
    background: #FFFFFF;
    background: color(display-p3 1.000 1.000 1.000);
    box-shadow: 0px 5px 32px rgba(39, 39, 39, 0.02);
    box-shadow: 0px 5px 32px color(display-p3 0.153 0.153 0.153 / 0.02);
    border-radius: 72px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  .greeting-colors {
    position: absolute;
    width: 124px;
    height: 124px;
    right: -32px;
    top: calc(50% - 124px/2);
    background: url(Colors.png);
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
    animation: floatLeft 4s ease-in-out infinite;
  }

  .greeting-introduction {
    width: 660px;
    height: 201px;
    font-family: 'Inria Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 56px;
    line-height: 67px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #1A1A1A;
    color: color(display-p3 0.102 0.102 0.102);
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
  }

  .greeting-cursor {
    position: absolute;
    width: 88px;
    height: 88px;
    left: 64px;
    top: 32px;
    background: url(Cursor.png);
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
    animation: floatRight 3.5s ease-in-out infinite 0.5s;
  }

  .greeting-lamp {
    position: absolute;
    width: 96px;
    height: 96px;
    left: calc(50% - 96px/2);
    top: -22px;
    background: url(Lamp.png);
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 3;
    animation: floatLeftSlow 5s ease-in-out infinite 1s;
  }

  .greeting-computer {
    position: absolute;
    width: 124px;
    height: 124px;
    right: -24px;
    top: -16px;
    background: url(Computer.png);
    flex: none;
    order: 4;
    flex-grow: 0;
    z-index: 4;
    animation: floatRightSlow 4.5s ease-in-out infinite 1.5s;
  }

  .greeting-mouse {
    position: absolute;
    width: 96px;
    height: 96px;
    left: -32px;
    top: calc(50% - 96px/2);
    background: url(Mouse.png);
    flex: none;
    order: 5;
    flex-grow: 0;
    z-index: 5;
    animation: floatRight 3.8s ease-in-out infinite 2s;
  }

  .greeting-user {
    position: absolute;
    width: 306px;
    height: 172px;
    left: calc(50% - 306px/2);
    bottom: -1px;
    flex: none;
    order: 6;
    flex-grow: 0;
    z-index: 6;
    object-fit: cover;
    background: transparent;
  }
}

/* ========== TABLET - 1024px to 1440px ========== */
@media (min-width: 1024px) and (max-width: 1440px) {
  .greeting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 104px 0px;
    gap: 10px;
    position: relative;
    width: 80%;
    max-width: 1400px;
    height: 696px;
    margin: 0 auto;
  }

  .greeting-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 124px 0px 0px;
    gap: 10px;
    isolation: isolate;
    width: 80%;
    height: 488px;
    background: #FFFFFF;
    background: color(display-p3 1.000 1.000 1.000);
    box-shadow: 0px 5px 32px rgba(39, 39, 39, 0.02);
    box-shadow: 0px 5px 32px color(display-p3 0.153 0.153 0.153 / 0.02);
    border-radius: 72px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  .greeting-colors {
    position: absolute;
    width: 124px;
    height: 124px;
    right: -32px;
    top: calc(50% - 124px/2);
    background: url(Colors.png);
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
    animation: floatLeft 4s ease-in-out infinite;
  }

  .greeting-introduction {
    width: 566px;
    height: 174px;
    font-family: 'Inria Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #1A1A1A;
    color: color(display-p3 0.102 0.102 0.102);
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
  }

  .greeting-cursor {
    position: absolute;
    width: 88px;
    height: 88px;
    left: 64px;
    top: 32px;
    background: url(Cursor.png);
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
    animation: floatRight 3.5s ease-in-out infinite 0.5s;
  }

  .greeting-lamp {
    position: absolute;
    width: 96px;
    height: 96px;
    left: calc(50% - 96px/2);
    top: -22px;
    background: url(Lamp.png);
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 3;
    animation: floatLeftSlow 5s ease-in-out infinite 1s;
  }

  .greeting-computer {
    position: absolute;
    width: 124px;
    height: 124px;
    right: -24px;
    top: -16px;
    background: url(Computer.png);
    flex: none;
    order: 4;
    flex-grow: 0;
    z-index: 4;
    animation: floatRightSlow 4.5s ease-in-out infinite 1.5s;
  }

  .greeting-mouse {
    position: absolute;
    width: 96px;
    height: 96px;
    left: -32px;
    top: calc(50% - 96px/2);
    background: url(Mouse.png);
    flex: none;
    order: 5;
    flex-grow: 0;
    z-index: 5;
    animation: floatRight 3.8s ease-in-out infinite 2s;
  }

  .greeting-user {
    position: absolute;
    width: 306px;
    height: 172px;
    left: calc(50% - 306px/2);
    bottom: -1px;
    flex: none;
    order: 6;
    flex-grow: 0;
    z-index: 6;
    object-fit: cover;
    background: transparent;
  }
}

/* ========== TABLET SMALL - 800px to 1024px ========== */
@media (min-width: 1024px) and (max-width: 1440px) {
  .greeting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 104px 24px;
    gap: 10px;
    position: relative;
    width: 100%;
    max-width: 800px;
    height: 688px;
    margin: 0 auto;
  }

  .greeting-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 132px 0px 0px;
    gap: 10px;
    isolation: isolate;
    width: 100%;
    max-width: 600px;
    height: 480px;
    background: #FFFFFF;
    background: color(display-p3 1.000 1.000 1.000);
    box-shadow: 0px 5px 32px rgba(39, 39, 39, 0.02);
    box-shadow: 0px 5px 32px color(display-p3 0.153 0.153 0.153 / 0.02);
    border-radius: 72px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  .greeting-colors {
    position: absolute;
    width: 124px;
    height: 124px;
    right: -32px;
    top: calc(50% - 124px/2 + 14px);
    background: url(Colors.png);
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
    animation: floatLeft 4s ease-in-out infinite;
  }

  .greeting-introduction {
    width: 410px;
    height: 123px;
    font-family: 'Inria Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 34px;
    line-height: 41px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #1A1A1A;
    color: color(display-p3 0.102 0.102 0.102);
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
  }

  .greeting-cursor {
    position: absolute;
    width: 88px;
    height: 88px;
    left: 64px;
    top: 32px;
    background: url(Cursor.png);
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
    animation: floatRight 3.5s ease-in-out infinite 0.5s;
  }

  .greeting-lamp {
    position: absolute;
    width: 96px;
    height: 96px;
    left: calc(50% - 96px/2);
    top: -22px;
    background: url(Lamp.png);
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 3;
    animation: floatLeftSlow 5s ease-in-out infinite 1s;
  }

  .greeting-computer {
    position: absolute;
    width: 124px;
    height: 124px;
    right: -24px;
    top: -16px;
    background: url(Computer.png);
    flex: none;
    order: 4;
    flex-grow: 0;
    z-index: 4;
    animation: floatRightSlow 4.5s ease-in-out infinite 1.5s;
  }

  .greeting-mouse {
    position: absolute;
    width: 96px;
    height: 96px;
    left: -32px;
    top: calc(50% - 96px/2 + 44px);
    background: url(Mouse.png);
    flex: none;
    order: 5;
    flex-grow: 0;
    z-index: 5;
    animation: floatRight 3.8s ease-in-out infinite 2s;
  }

  .greeting-user {
    position: absolute;
    width: 306px;
    height: 172px;
    left: calc(50% - 306px/2);
    bottom: -1px;
    flex: none;
    order: 6;
    flex-grow: 0;
    z-index: 6;
    object-fit: cover;
    background: transparent;
  }
}

/* ========== MOBILE LARGE - 600px to 800px ========== */
@media (min-width: 600px) and (max-width: 1023px) {
  .greeting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 104px 24px;
    gap: 10px;
    position: relative;
    width: 600px;
    height: 688px;
    margin: 0 auto;
  }

  .greeting-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 132px 0px;
    gap: 10px;
    isolation: isolate;
    width: 552px;
    height: 480px;
    background: #FFFFFF;
    background: color(display-p3 1.000 1.000 1.000);
    box-shadow: 0px 5px 32px rgba(39, 39, 39, 0.02);
    box-shadow: 0px 5px 32px color(display-p3 0.153 0.153 0.153 / 0.02);
    border-radius: 72px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  .greeting-colors {
    position: absolute;
    width: 124px;
    height: 124px;
    right: -32px;
    top: calc(50% - 124px/2 + 14px);
    background: url(Colors.png);
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
    animation: floatLeft 4s ease-in-out infinite;
  }

  .greeting-introduction {
    width: 410px;
    height: 123px;
    font-family: 'Inria Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 34px;
    line-height: 41px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #1A1A1A;
    color: color(display-p3 0.102 0.102 0.102);
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
  }

  .greeting-cursor {
    position: absolute;
    width: 88px;
    height: 88px;
    left: 64px;
    top: 32px;
    background: url(Cursor.png);
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
    animation: floatRight 3.5s ease-in-out infinite 0.5s;
  }

  .greeting-lamp {
    position: absolute;
    width: 96px;
    height: 96px;
    left: calc(50% - 96px/2);
    top: -22px;
    background: url(Lamp.png);
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 3;
    animation: floatLeftSlow 5s ease-in-out infinite 1s;
  }

  .greeting-computer {
    position: absolute;
    width: 124px;
    height: 124px;
    right: -24px;
    top: -16px;
    background: url(Computer.png);
    flex: none;
    order: 4;
    flex-grow: 0;
    z-index: 4;
    animation: floatRightSlow 4.5s ease-in-out infinite 1.5s;
  }

  .greeting-mouse {
    position: absolute;
    width: 96px;
    height: 96px;
    left: -32px;
    top: calc(50% - 96px/2 + 44px);
    background: url(Mouse.png);
    flex: none;
    order: 5;
    flex-grow: 0;
    z-index: 5;
    animation: floatRight 3.8s ease-in-out infinite 2s;
  }

  .greeting-user {
    position: absolute;
    width: 306px;
    height: 172px;
    left: calc(50% - 306px/2);
    bottom: -1px;
    flex: none;
    order: 6;
    flex-grow: 0;
    z-index: 6;
    object-fit: cover;
    background: transparent;
  }
}

/* ========== MOBILE MEDIUM - 420px to 600px ========== */
@media (min-width: 420px) and (max-width: 600px) {
  .greeting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0px 0px 0px;
    gap: 10px;
    position: relative;
    width: calc(100vw - 32px);
    height: 560px;
    margin: 88px auto 0px auto;
  }

  .greeting-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 132px 0px 0px;
    gap: 10px;
    isolation: isolate;
    width: calc(100vw - 32px);
    height: 480px;
    background: #FFFFFF;
    background: color(display-p3 1.000 1.000 1.000);
    box-shadow: 0px 5px 32px rgba(39, 39, 39, 0.02);
    box-shadow: 0px 5px 32px color(display-p3 0.153 0.153 0.153 / 0.02);
    border-radius: 40px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  .greeting-colors {
    position: absolute;
    width: 104px;
    height: 104px;
    right: 0px;
    top: calc(50% - 104px/2 + 26px);
    background: url(Colors.png);
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
    animation: floatLeft 4s ease-in-out infinite;
  }

  .greeting-introduction {
    width: 320px;
    height: 164px;
    font-family: 'Inria Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 34px;
    line-height: 41px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #1A1A1A;
    color: color(display-p3 0.102 0.102 0.102);
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
  }

  .greeting-cursor {
    position: absolute;
    width: 64px;
    height: 64px;
    left: 48px;
    top: 40px;
    background: url(Cursor.png);
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
    animation: floatRight 3.5s ease-in-out infinite 0.5s;
  }

  .greeting-lamp {
    position: absolute;
    width: 88px;
    height: 88px;
    left: calc(50% - 88px/2);
    top: -22px;
    background: url(Lamp.png);
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 3;
    animation: floatLeftSlow 5s ease-in-out infinite 1s;
  }

  .greeting-computer {
    position: absolute;
    width: 104px;
    height: 104px;
    right: -8px;
    top: -24px;
    background: url(Computer.png);
    flex: none;
    order: 4;
    flex-grow: 0;
    z-index: 4;
    animation: floatRightSlow 4.5s ease-in-out infinite 1.5s;
  }

  .greeting-mouse {
    position: absolute;
    width: 56px;
    height: 56px;
    left: -16px;
    top: calc(50% - 56px/2 + 20px);
    background: url(Mouse.png);
    flex: none;
    order: 5;
    flex-grow: 0;
    z-index: 5;
    animation: floatRight 3.8s ease-in-out infinite 2s;
  }

  .greeting-user {
    position: absolute;
    width: 306px;
    height: 172px;
    left: calc(50% - 306px/2);
    bottom: -1px;
    flex: none;
    order: 6;
    flex-grow: 0;
    z-index: 6;
    object-fit: cover;
    background: transparent;
  }
}

/* ========== MOBILE SMALL - 320px to 420px ========== */
@media (min-width: 320px) and (max-width: 420px) {
  .greeting-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 104px 0px 104px;
    gap: 10px;
    position: relative;
    width: calc(100vw - 32px);
    height: 536px;
    margin: 0 auto;
  }

  .greeting-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 132px 0px 0px;
    gap: 10px;
    isolation: isolate;
    width: calc(100vw - 32px);
    height: 400px;
    background: #FFFFFF;
    background: color(display-p3 1.000 1.000 1.000);
    box-shadow: 0px 5px 32px rgba(39, 39, 39, 0.02);
    box-shadow: 0px 5px 32px color(display-p3 0.153 0.153 0.153 / 0.02);
    border-radius: 40px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }

  .greeting-colors {
    position: absolute;
    width: 104px;
    height: 104px;
    right: -24px;
    top: calc(50% - 104px/2 + 26px);
    background: url(Colors.png);
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
    animation: floatLeft 4s ease-in-out infinite;
  }

  .greeting-introduction {
    width: 240px;
    height: 116px;
    font-family: 'Inria Serif', serif;
    font-style: italic;
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    display: flex;
    align-items: center;
    text-align: center;
    color: #1A1A1A;
    color: color(display-p3 0.102 0.102 0.102);
    flex: none;
    order: 1;
    flex-grow: 0;
    z-index: 1;
  }

  .greeting-cursor {
    position: absolute;
    width: 64px;
    height: 64px;
    left: 48px;
    top: 40px;
    background: url(Cursor.png);
    flex: none;
    order: 2;
    flex-grow: 0;
    z-index: 2;
    animation: floatRight 3.5s ease-in-out infinite 0.5s;
  }

  .greeting-lamp {
    position: absolute;
    width: 88px;
    height: 88px;
    left: calc(50% - 88px/2);
    top: -22px;
    background: url(Lamp.png);
    flex: none;
    order: 3;
    flex-grow: 0;
    z-index: 3;
    animation: floatLeftSlow 5s ease-in-out infinite 1s;
  }

  .greeting-computer {
    position: absolute;
    width: 104px;
    height: 104px;
    right: -8px;
    top: -24px;
    background: url(Computer.png);
    flex: none;
    order: 4;
    flex-grow: 0;
    z-index: 4;
    animation: floatRightSlow 4.5s ease-in-out infinite 1.5s;
  }

  .greeting-mouse {
    position: absolute;
    width: 56px;
    height: 56px;
    left: -16px;
    top: calc(50% - 56px/2 + 20px);
    background: url(Mouse.png);
    flex: none;
    order: 5;
    flex-grow: 0;
    z-index: 5;
    animation: floatRight 3.8s ease-in-out infinite 2s;
  }

  .greeting-user {
    position: absolute;
    width: 235px;
    height: 132px;
    left: calc(50% - 235px/2);
    bottom: -1px;
    flex: none;
    order: 6;
    flex-grow: 0;
    z-index: 6;
    object-fit: cover;
    background: transparent;
  }
}