html {
  font-family: 'Jost', sans-serif;
}

body {
  margin: 0;
}

header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  background-color: #e22a2a;
  color: white;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#events {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  margin: 3rem auto;
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 40rem;
}

#events h2 {
  font-size: 2rem;
  border-bottom: 4px solid #ccc;
  color: #4fc08d;
  margin: 0 0 1rem 0;
}

#events p {
  font-size: 1.25rem;
  font-weight: bold;
  border: 1px solid #4fc08d;
  background-color: #4fc08d;
  color: white;
  padding: 0.5rem;
  border-radius: 25px;
}

#events input {
  font: inherit;
  border: 1px solid #ccc;
}

#events input:focus {
  outline: none;
  border-color: #1b995e;
  background-color: #d7fdeb;
}

#events button {
  font: inherit;
  cursor: pointer;
  border: 1px solid #ff0077;
  background-color: #ff0077;
  color: white;
  padding: 0.05rem 1rem;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.26);
  border-radius: 20px;
  margin: 0 1rem;
}

#events button:hover,
#events button:active {
  background-color: #ec3169;
  border-color: #ec3169;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.26);
}

     .bd-placeholder-img {
       font-size: 1.125rem;
       text-anchor: middle;
       -webkit-user-select: none;
       -moz-user-select: none;
       user-select: none;
     }
  
     @media (min-width: 768px) {
       .bd-placeholder-img-lg {
         font-size: 3.5rem;
       }
     }
  
     .b-example-divider {
       height: 3rem;
       background-color: rgba(0, 0, 0, .1);
       border: solid rgba(0, 0, 0, .15);
       border-width: 1px 0;
       box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
     }
  
     .b-example-vr {
       flex-shrink: 0;
       width: 1.5rem;
       height: 100vh;
     }
  
     .bi {
       vertical-align: -.125em;
       fill: currentColor;
     }
  
     .nav-scroller {
       position: relative;
       z-index: 2;
       height: 2.75rem;
       overflow-y: hidden;
     }
  
     .nav-scroller .nav {
       display: flex;
       flex-wrap: nowrap;
       padding-bottom: 1rem;
       margin-top: -1px;
       overflow-x: auto;
       text-align: center;
       white-space: nowrap;
       -webkit-overflow-scrolling: touch;
     }

         /*
     * Globals
     */
    
    
         /* Custom default button */
         .btn-light,
         .btn-light:hover,
         .btn-light:focus {
           color: #333;
           text-shadow: none;
           /* Prevent inheritance from `body` */
         }
    
    
         /*
     * Base structure
     */
    
         body {
           text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
           
         }
    
         .cover-container {
           min-width: 2em;
         }
    
    
         /*
     * Header
     */
    
         .nav-masthead .nav-link {
           color: rgba(255, 255, 255, .5);
           border-bottom: .25rem solid transparent;
         }
    
         .nav-masthead .nav-link:hover,
         .nav-masthead .nav-link:focus {
           border-bottom-color: rgba(255, 255, 255, .25);
           color: #fff !important;
         }
    
         .nav-masthead .nav-link+.nav-link {
           margin-left: 1rem;
         }
    
         .nav-masthead .active {
           color: #fff;
           border-bottom-color: #fff;
         }


         img {
           border: 2px solid #000000;
           box-shadow: 0px 2px 2px #000;
           color: white;
           font-size: 50px;
           border-top-left-radius: 15px;
           border-top-right-radius: 15px;
           border-bottom-left-radius: 15px;
           border-bottom-right-radius: 15px;

          max-width: 100%
         }

         img:hover {
            border: 2px solid #000;
            box-shadow: 0px 6px 6px #000;
            /* border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px; */
         }

         .advantages {
          max-width:500px;
          text-align: left;
         }

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