:root {
    /* CSS HEX */
    --independence: #555b6eff;
    --morning-blue: rgb(88, 138, 135);
    --powder-blue: #bee3dbff;
    --cultured: #faf9f9ff;
    --apricot: #ffd6baff;
}

body {
    font-family: 'Hubballi', cursive;
}

.title_font {
    font-family: 'Sacramento', cursive;
    font-size: 2rem;
}

.main_title {
    font-family: 'Sacramento', cursive;
    color: var(--morning-blue);
    font-size: 6rem;
}

.main_subtitle {
    font-size: 1.5rem;
    color: var(--independence);
}


.main_background {
    background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.82), rgba(255, 214, 186, 0.93)), url('img/pexels-tara-winstead-6692936.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    min-height: 100vh;
}

.bg-custom {
  background-color: var(--independence);
}

.display-6 {
  color: var(--morning-blue);
}

/* danger button recolor */

.btn-danger {
  color: #000000;
  background-color: var(--apricot);
  border-color: var(--apricot);
  border-top-color: var(--apricot);
  border-right-color: var(--apricot);
  border-bottom-color: var(--apricot);
  border-left-color: var(--apricot);
}

.btn-danger:hover {
  color: #fff;
  background-color: var(--morning-blue);
  border-color: var(--morning-blue);
  border-top-color: var(--morning-blue);
  border-right-color: var(--morning-blue);
  border-bottom-color: var(--morning-blue);
  border-left-color: var(--morning-blue);
}

/* common */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid var(--morning-blue);
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: var(--morning-blue);
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}

/* top left*/
.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left::before,
.ribbon-top-left::after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left::before {
  top: 0;
  right: 0;
}
.ribbon-top-left::after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 30px;
  transform: rotate(-45deg);
}