html {
  scroll-behavior: smooth;
}
.bg-primary {
  background-color: transparent !important;
}
.text-danger {
  color: crimson;
}
.bg-light:hover, .btn-danger {
  background-color: crimson !important;
}
.nav-link:hover {
  background-color: lightgray;
}
.pt-5, .py-5 {
  padding-top: 4rem!important;
}

a {
  color: crimson;
}
a.nav-link {
  color: black;
  text-transform: uppercase;
  font-weight: bold;
}

.left-square {
  left: 0;
}

.right-square {
  right: 0;
}

.square-background {
  position: absolute;
  top: 0;
  padding: 10px 10px;
  height: 100%;
  z-index: 1;
  width: 80%;
  max-width: 640px;
  background-color: crimson !important;
}

.square-content {
  position: relative;
  padding: 90px 0;
  justify-content: flex-end;
  z-index:5;
}

.square-title {
  color: white;
  opacity: 0.9;
  letter-spacing: .2rem;
}

.no-border {
  border: none;
}

.square-card-deco {
  position: absolute;
  right: 15px;
  top: 10px;
  width: 15px;
  height: 15px;
  z-index: 20;
  /*background-color:crimson;*/
  border: solid crimson ;
}

.square-card-deco2 {
  position: absolute;
  right: 10px;
  top: 15px;
  width: 15px;
  height: 15px;
  z-index: 21;
  /*background-color:crimson;*/
  border: solid crimson ;
}

.gray-background {
  background-color: lightgray;
}

.square-card {
  height: 100%;  
}

.card {
  border: none;
  border-radius: unset;
}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
  [class*="col-"] {
      width: 100%;
      margin-bottom: 20px;
  }
  h1.square-title {
    font-size: 1.9rem;
    text-align: center;
  }
  .embed-responsive {
    margin-top: 20px;
  }
  .gray-background {
    background-color: white;
  }
  .social-link {
    text-align: center;
  }
  .left-square {
    right: 0;
    left: unset;
  }
  .form-check-input {
    position: unset;
    margin-left: unset;
  }
}