/* ---- Particles container ---- */
  body,
  html {
      width: auto;
      height: auto;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
      overflow: hidden;
    }
  


  #particles-js{

    width: 100%;

    height: 100%;

    background-color: #000000;

    background-size: cover;

    background-position: 100% 100%;

    background-repeat: no-repeat;

    overflow: hidden;

    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
  }

  #particles-js canvas {
    display: block;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease;
    animation: fadeIn 1.6s;
  }
    

    .main {
      display: flex;
      height: 83vh;
      align-items: center;
      justify-content: center;	
        background-color: #000000;
    }
    
    .center-container {
      display: flex;
      align-items: center;
      animation: fadeIn 1.6s;
    }
    
    .center-container > :not([hidden]) ~ :not([hidden]) {
      --tw-space-x-reverse: 0;
      margin-right: calc(2.5rem * var(--tw-space-x-reverse));
      margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
    }
    
    .center-container {
      border-radius: 0.5rem;
      background-color: rgb(0 0 0 / 0.4);
      padding-top: 6rem;
      padding-bottom: 6rem;
      padding-left: 6rem;
      padding-right: 6rem;
      --tw-text-opacity: 1;
      color: rgb(255 255 255 / var(--tw-text-opacity));
      --tw-backdrop-blur: blur(4px);
      -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
              backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
              animation: fadeIn 1.6s;
    }


    .size-pirate {
      width: 7rem;
      height: 7rem;
      animation: fadeIn 1.6s;
    }

    

    @keyframes fadeIn {
      0% {opacity:0;}
      100% {opacity:1;}
    }

    @media only screen and (min-width: 768px) {
      .main {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;	
          background-color: #000000;
      
      }
      .size-pirate {
        width: 9rem;
        height: 9rem;
        animation: fadeIn 1.6s;
      }
    }
    /*Nest Hub*/
    @media only screen and (min-width: 1023px) {
      .main {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;	
          background-color: #000000;
      
      }
      .size-pirate {
        width: 9rem;
        height: 9rem;
        animation: fadeIn 1.6s;
      }
    }
    
    /*Desktop*/
    @media only screen and (min-width: 1420px) {
      .main {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;	
          background-color: #000000;
      
      }
      .size-pirate {
        width: 9rem;
        height: 9rem;
        animation: fadeIn 1.6s;
      }
    }