body{
  /* background-image: linear-gradient(to right, #434343 0%, black 100%); */
  background-image: linear-gradient(to right, #09203f 0%, #537895 100%);
  background-repeat: no-repeat;
  font-family: 'customFont', sans-serif;
  max-width: 100%;
  width:100%;
  overflow-x: hidden;
}

.content{
  position: relative;
  z-index: 1;
  top:0;
  left:0;
  width: 100%;
}

@font-face {
  font-family: customFont; /* set name */
  src: url("../assets/Arago-Medium.otf") format("opentype"); /* url of the font */
}

#cianna-title{
  position:relative;
  left:0%;
  top:0%;
  height:20vh;
}

.intro-text{
    text-align: center;
    font-size: 1.2rem;
    font-weight: 600;
    color:#09203f;
}

.bg-trapezoid{
  position: fixed;              /* overlay; not in normal layout flow */
  top: 10vh;                    /* move it where you want */
  left: 0;
  right:0;
  width: auto;                  /* trapezoid width */
  height: 87vh;                 /* trapezoid height */
  background: rgb(255, 255, 255);

  /* Trapezoid: thinner on the LEFT, thicker on the RIGHT */
  clip-path: polygon(
    0% 13%,   /* top-left  */
    100% 0%,  /* top-right */
    100% 100%,/* bot-right */
    0% 86%    /* bot-left  */
  );

  pointer-events: none;         /* interacts with nothing */
  z-index: 0;                   /* sits above the background */
}

@media (min-aspect-ratio: 1/1) {

  body{
    overflow:hidden;
  }

  .content {
    height: 100vh;
    }

  .bg-trapezoid-mobile-up,
  .bg-trapezoid-mobile-down{
    display: none;
  }
}
@media (max-aspect-ratio: 1/1) {

  body{
    /* background-color: white; */
    background-image: none;
    padding: 0;
    margin: 0;
  }
  #cianna-title{
    height:auto;
    width: min(100vmin,500px);
  }
  .intro-text{
    padding-left: 5px;
    font-size: 1rem;
  }
  .bg-trapezoid{
    display: none;
  }
  .bg-trapezoid-mobile-up{
    background-image: linear-gradient(to right, #09203f 0%, #537895 100%);
    top:0;
    height: 200px;
    margin-bottom: -200px;
      clip-path: polygon(
        0% 0%,   /* top-left  */
        100% 0%,  /* top-right */
        100% 80%,/* bot-right */
        0% 100%    /* bot-left  */
      );

      pointer-events: none;         /* interacts with nothing */
      z-index: 0;                   /* sits above the background */
    }

  .bg-trapezoid-mobile-down{
    background-image: linear-gradient(to right, #09203f 0%, #537895 100%);
    bottom:0;
    height: 12vh;
    margin-top: -12vh;
      clip-path: polygon(
        0% 0%,   /* top-left  */
        100% 20%,  /* top-right */
        100% 100%,/* bot-right */
        0% 100%    /* bot-left  */
      );

      pointer-events: none;         /* interacts with nothing */
      z-index: 0;                   /* sits above the background */
    }

}