@import url('https://fonts.googleapis.com/css2?family=Lavishly+Yours&family=Mrs+Saint+Delafield&display=swap');

html {
  scroll-behavior: smooth;
  body {
    padding-top: 3.5rem;

    .cursive {
      font-family: "Lavishly Yours", cursive;
    }

    @media screen and (max-width:390px) {
      a.btn {
        margin-bottom: 1rem;
      }
    }
    a.btn-primary, button.btn-primary {
      border: 2px solid #EFCA6F;
      background-color: #023641;
      color: #fff;
      &:hover, &:active {
        border: 2px solid #EFCA6F;
        background-color: #EFCA6F;
        color: #060C30;
      }
    }
    a.btn-secondary, button.btn-secondary {
      border: 2px solid #EFCA6F;
      background-color: #EFCA6F;
      color: #060C30;
      &:hover, &:active {
      border: 2px solid #EFCA6F;
      background-color: #023641;
      color: #fff;
      }
    }

    nav {
      background-color: #023641;
      border-bottom: 5px solid #EFCA6F;
      &.navbar-dark {
        .navbar-toggler-icon {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
      }
      a.navbar-brand {
        color: #EFCA6F !important;
        font-weight: 400;
        font-style: normal;
      }
      .navbar-nav .nav-link {
        color: #fff !important;
        &:hover, &.active {
          color: #EFCA6F !important;
        }
      }
    }

    main {
      .jumbotron {
        background-color: #060C30;
        border-bottom: 5px solid #EFCA6F;
        background-image: url(../images/confetti.png), linear-gradient(#060C30, #023641);
        background-position: left top;
        background-repeat: repeat-x;
        background-size: contain;
        margin-bottom: 0;
        h1 {
          color: #EFCA6F;
        }
        p {
          color: #fff;
          @media (min-width: 768px) {
             span#intro {
              display:block;
            }
          }
        }
        #displayInvite {
          .modal-header {
            background-color: #023641;
            color: #EFCA6F;
            border-bottom: none;
            .close {
              color: #fff;
            }
          }
          .modal-body {
            background-image: linear-gradient(#023641, #060C30);
            img#invite {
              border: 2px solid #EFCA6F;
              width: 100%;
              height: auto;
            }
          }
          .modal-footer {
            background-color: #060C30;
            border-top: none;
          }
        }
      }

      
      #time, #map, #gift {
        scroll-margin-top: 60px;
      }

      .section-heading {
        font-size: 5rem;
      }

      #time {
        margin-bottom: -2rem;
        padding-bottom: 2rem;
      }

      #time, #gift {
        background-color: #EEEDDB;
        h2 {
          background-color: #EFCA6F;
          color: #060C30;
        }
      }

      #map {
        background-color: #023641;
        color: #fff;
        padding-bottom: 2rem;
        h2 {
          color: #EFCA6F;
        }
        .map-responsive {
          overflow:hidden;
          padding-bottom:50%;
          position:relative;
          height:0;
          min-height: 250px;
        }
        .map-responsive iframe{
          left:0;
          top:0;
          height:100%;
          width:100%;
          position: absolute;
          padding-bottom: 3rem;
        }
      }
    }

    #gift {
      .row {
        padding: 2rem 0;
      }
    }
  } 
}

footer {
  background-color: #023641;
  color: #EFCA6F;
  .container {
    p {
      padding: 1rem 0;
      margin: 0;
    }
  }
}