@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
      }
    #menu-container {
        display: none !important;
    }
    #content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }
    #video-background {
        height: 100vh;
    }
    #video-overlay {
        max-width: 300px;
        width: 80%;
    }
    #video-overlay h1{
        font-size: 30px;
        font-weight: 400px;
    }
    #event-type-picker {
        display:none;
    }
    
    #quote-form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    #about-heading-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 15px;
    }
    #about-heading {
        font-size: 25px;
        font-weight: 600;
    }
    #about-heading-block {
        width: 20px;
        height: 100%;
        background-color: #e59fa0;
        margin-right: 20px;
    }
    #about-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px 15px;
        text-align: justify;
        font-size: 13px;
        line-height: 1.6;
    }
    #about-paragraph-end {
        color: #e98688;
        display: flex;
        text-align: justify;
        font-size: 13px;
        font-weight: 600;
    }
    .carousel-item {
        margin: 10px !important;
    }
    #blog-heading {
        font-size: 25px;
        font-weight: 600;
        color: #ffffff;
        background-color: #f2d4b5;
        padding: 0px 10px;
        margin-top: 20px;
        margin-bottom: 10px;
        width: fit-content;
        padding: 10px;
    }
    #blog-subheading {
        display: flex;
        align-items: center;
        font-size: 15px;
        font-weight: 600;
        color: #ffffff;
        padding: 0px 10px;
        margin-bottom: 20px;
    }
    #blog-text-container {
        width: 100%;
        height: 100vh;
        padding-left: 20px;
        color: #ffffff;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 300;
    }
    .form-group {
        display: flex;
        flex-direction: column;
        margin-top: 3px;
        margin-bottom: 3px;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    #event-data {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .form-group input {
        width: 90%;
        background-color: transparent;
        margin-top: 5px;
        margin-bottom: 5px;
        border: white 1px solid;
        border-radius: 5px;
        height: 20px;
        font-size: 15px;
        color: white;
    }
    .form-group label {
        width: 100%;
        font-size: 15px;
        margin-top: 2px;
        margin-bottom: 2px;
        padding-left: 15px;
        text-align: left;
    }
    #event-comment {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .form-comment {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        margin-top: 3px;
        margin-left: 0px;
        align-items: center;
        justify-content: center;
    }
    .form-comment label {
        width: 100%;
        font-size: 15px;
        margin-left: 15px;
        margin-top: 2px;
        margin-bottom: 2px;
        text-align: left;
        padding-left: 5px;
    }
    .form-comment textarea {
        height: 400px;
        resize: none;
        background-color: transparent;
        border: white 1px solid;
        border-radius: 5px;
        font-size: 15px;
        color: white;
        width: 86%;
    }
    #whole-form {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: hidden !important;
    }
    #content-layer {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #submit-button  {
        width: 100px;
        background-color: #e59fa0;
        border: white 1px solid;
        border-radius: 5px;
        font-size: 20px;        
        color: white;
        cursor: pointer;
    }
    #event-picker-title {
        display: none;
    }
    #event-selector {
        display: flex;
    }
    .form-group select {
        width: 90%;
        margin-top: 2px;
        margin-bottom: 2px;
        border: white 1px solid;
        border-radius: 5px;
        height: 20px;
        font-size: 15px;
        color: Black;
    }
    #button-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    #data-form-container {
        display: flex;
        flex-direction: column;
    }
}