.modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 1rem 1.5rem;
    width: 24rem;
    border-radius: 0.5rem;
}
.close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
}
.close-button:hover {
    background-color: darkgray;
}
.show-modal {
    opacity: 1;
    visibility: visible;
    transform: scale(1.0);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

.parent {
  display: flex;
}
.parent div {
  outline: 1px solid white;
  flex-grow: 1;
}

body {
  text-align: center;
  background: #D8BFD8;
  font-family: cursive;
  font-family: 'Noto Sans', sans-serif;
}

#awards-container div {
  font-size: 15px;
}

#awards-list {
  border: none;
}

#awards-list div {
  border: none;
  /* border-top: 1px solid; */
}


#welcome {
  margin-right: 50rem;
  font-size: 30px;
  
}

.headings {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 65px;
}

#add-run {
  margin-left: 5rem
}


#grad1 {
  width: 50px;
  height: 200px;
  border: 1px rgb(165, 154, 154);
  margin: auto;
  transform: rotate(180deg);
}

#bar {
  width: 50px;
  height: 0px;
  background: -webkit-linear-gradient(red, yellow, green.purple, lightblue);
  background: -o-linear-gradient(red, yellow, green, purple, lightblue);
  background: -moz-linear-gradient(red, yellow, green, purple, lightblue);
  background: linear-gradient(to bottom right, red, yellow, green, purple, lightblue);
  transition: .5s height;
}

#status {
  font-size: 19px;
  font-weight: bold;
  transform: rotate(180deg);
}


ul {
  list-style-position: inside;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

/* animation for the header text */

/* .glow {
  font-size: 80px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;

} */