/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 966px) {
  .heroBanner {
    padding: 2rem;
  }
}

.buttons {
  display: flex;
  align-items: normal;
  justify-content: center;
}

.features {
  display: flex;
  align-items: center;
  padding: 2rem 0;
  width: 100%;
}

.media {
  display: flex;
  justify-content: center;
  align-Items: center;
}

.featureImage {
  height: 200px;
  width: 200px;
}

.main {
  margin: 0 0 0 300px;
  padding: 33px;
  border-left: 1px solid lightgrey;
}

.playgroundMain {
  padding: 33px;
}

.heading {
  font-size: 3em;
}

.spinner {
  border: 2px solid lightgrey;
  border-top: 2px solid red;
  border-radius: 50%;
  margin: 5px 5px -2px -5px;
  width: 15px;
  height: 15px;
  display: inline-block;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.card {
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 1px 1px 4px rgba(0,0,0,.25), 1px 1px 1px rgba(0,0,0,.1);
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 10px;
  width: 60%;
  float: left;
}

.getStarted {
  margin: 5px;
}

.runPysa {
  float: right;
}

.resultsCard {
  float: right;
  width: 38%;
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .card, .resultsCard {
    float: none;
    width: 98%;
  }
}

.topBannerContainer {
  background-color: rgb(15, 15, 15);
}

.topBanner {
  display: flex;
  justify-content: center;
  align-items: center;
}

.topBannerTitle {
  font-size: 54px;
  font-weight: bold;
  margin-bottom: 0.4rem;
  align-items: center;
  text-align:center;

}

@media only screen and (max-width: 768px) {
  .topBannerTitle {
    font-size: 40px;
  }
}

.topBannerTitleText {
  background: linear-gradient(
    90deg,
    rgb(131 58 180 / 100%) 0%,
    rgb(253 29 29 / 100%) 50%,
    rgb(252 176 69 / 100%) 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.topBannerTitleText:hover {
  text-decoration: underline;
  text-decoration-color: rgb(152 0 255);
}
