body {
    color: black;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

/* Homepage Title */

#home-title {
    width: 100%;
    margin-top: 5vh;
    position: relative;
    z-index: 0;
}

#home-title-row {
    text-align: center;
    font-family: monospace;
}

#home-title-col {
    width: 50%;
    margin: 0 auto
}

.home-title-text {
    color: gray;
    /* font-size: 550%; */
}

/* Alerts */

#alert-container {
    margin-top: 0vh;
    position: relative;
    z-index: 1;
}

.alert {
    margin-bottom: 0rem;
}

/* Nav */

.top-nav {
    width: 100;
}

#nav-container {
    max-width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    flex-direction: row;
    border-bottom: 0.15rem solid;
    border-bottom-color: gray;    
}

#nav-col {
    width: 200px;
    text-align: center
}

.bootstrap-overrides #nav-link {
    color: black;
}

.nav-div {
    width: 75%;
    margin: 0 auto;
}

#nav-link {
    text-decoration: none;
    color: black !important;
}

/* Small Nav */

#small-nav-col {
    text-align: center;
    display: flex;
    align-content: center;
    justify-content: space-evenly;
    flex-direction: column;
}

#small-nav-col-hosts {
    color: white;
    text-align: center;
}

.small-nav-div {
    width: 75%;
    margin: 0 auto;
    justify-content: space-evenly;
}

#nav-links {
    margin: 0 auto;
    text-decoration: none;
    color: black !important;
}

#small-nav-links {
    margin: 0 auto;
    display: flex;
    justify-content: center; 
    align-content: center;
    flex-direction: row;
    text-decoration: none;
} 

.bootstrap-overrides #small-nav-link {
    text-decoration: none;
    color: black !important;
    vertical-align: middle;
}

#small-nav-link-hosts {
    text-decoration: none;
    color: white;
}

/* Event Button */

#button-div {
    margin-top: 5vh;
    width: 100%;
}

#button-col {
    text-align: center;
}

#button-row {
    width: 50%;
    margin: 0 auto
}

#create-btn {
    background-color: #34A853;
    border-radius: 45% 45%;
    filter: drop-shadow(5px 5px 4px #3d3d3d);
}

@media (hover: hover) {
  #create-btn:hover {
    background-color: #0a7d00;
  }
}

#icon {
    width: 4em;
    height: 4em;
    vertical-align: -0.125em;
}

/* event.html */

#event-container {
    margin-top: 10vh;
    width: 100%;
}

#event-title-row {
    width: 50%;
    margin: 0 auto
}

#event-participant-row {
    width: 50%;
    margin: 0 auto
}

#event-col {
    margin: 0 auto
}

#event-participant-col {
    margin: 0 auto
}

#participant-list {
    margin-top: 10vh;
    
}

.form-container {
    margin-top: 5vh;
    width: 100%
}

.checkin-container {
    margin-top: 10vh;
    width: 100%
}

.form-group {
    width: 50%;
    margin: 0 auto
}

#participant-card {
    margin-bottom: 3vh;
}

/* index.html */

.events-container {
    margin-top: 10vh;
    width: 100%
}

#events-row {
    width: 50%;
    margin: 0 auto
}

#events-col {
    margin: 0 auto;
}

/* Profile */

#profile-event-card {
    margin-top: 5vh;
}

#profile-container {
    width: 100%
}

#profile-row {
    width: 50%;
    margin: 0 auto;
    
}

#profile-col {
    margin: 0 auto;
}

#delete {
    color: white;
    background: red;
    margin-right: 2vw;
}

#edit {
    color: black;
    background: yellow;
    margin-right: 2vw;
}

#calculate-link {
    color: green;
}

#form-row {
    width: 100%;
    margin-top: 5vh
}

#form-col {
    width: 50%;
    margin: 0 auto
}

/* Log in */

#sign-up-row {
    margin-top: 5vh;
    width: 100%;
}

#sign-up-col {
    width: 50%;
    margin: 0 auto;
    text-align: center;
}