:root{
    /* Colors */
  --color-gray-100: rgba(0, 0, 0, 0.56);
  --color-darkslateblue-100: #0d285f;
  --color-darkslateblue-200: rgba(13, 40, 95, 0.2);
  --color-white: #fff;
  --color-darkslategray-100: #31506e;
  --color-darkslategray-200: #0d405f;
  --color-purple: #800080;
  --color-orange: #f49d1a;
  --color-black: #000;
  --color-whitesmoke-100: #f5f5f5;
  --color-whitesmoke-200: #ece9e5;
}

body{
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-size: 27px;
    line-height: 33px;
    text-indent: 1.90189px;
}

.grad{
  background: linear-gradient(180deg, rgba(27, 19, 129, 0.98) 0%, rgba(32, 25, 139, 0.9) 0.01%, rgba(190, 19, 33, 0.87) 100%);
}

#login{
    background: #00767D;
    border-radius: 7.57223px;
}

.showcase {
  width: 100%;
  height: 600px;
  position: relative;
  color: white;
  text-align: left;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-size: 60px;
  line-height: 70px;
}

.showcase img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:99
}

.showcase .overlay {
  width: 100%;
  height: 600px;
  background: linear-gradient(180deg, rgba(27, 19, 129, 0.98) 0%, rgba(32, 25, 139, 0.9) 0.01%, rgba(190, 19, 33, 0.87) 100%);
  position: absolute;
  top: 0;
  left: 0;
  z-index:999
}

.showcase h2 {
  margin-top: 320px;
  margin-left: 27px;
  border-bottom: 5px solid rgba(244, 157, 26, 1);
  width: 180px;
}

.showcase p {
  margin-top: 8px;
  font-size: 1.2em;
}

.background-radial-gradient {
  background-color: hsl(218, 41%, 15%);
  background-image: radial-gradient(650px circle at 0% 0%,
      hsl(218, 41%, 35%) 15%,
      hsl(218, 41%, 30%) 35%,
      hsl(218, 41%, 20%) 75%,
      hsl(218, 41%, 19%) 80%,
      transparent 100%),
    radial-gradient(1250px circle at 100% 100%,
      hsl(218, 41%, 45%) 15%,
      hsl(218, 41%, 30%) 35%,
      hsl(218, 41%, 20%) 75%,
      hsl(218, 41%, 19%) 80%,
      transparent 100%);
}