*{
    padding: 0px;
    margin: 0px;
}
/* middle */
.mid {
    width: 100%;
    height: 100vh;
    background-image: url(./5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.midrap {
    width: 100%;
    height: 100vh;
    margin: auto;
    background-color: rgb(0, 0, 0, 0.8);
}

.midrap1{
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 20px;
}

.midrap h1 {
    padding-top: 55px;
    text-align: center;
    font-size: 45px;
    font-family: 'Raleway', sans-serif;
    font-weight: lighter;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    text-shadow: 1px 1px 2px black, 0 0 25px rgb(32, 32, 34), 0 0 5px rgb(44, 44, 49);
}

@keyframes example {
    0% {
        color: rgb(192, 122, 243);
    }

    25% {
        color: rgb(111, 169, 227);
    }

    50% {
        color: rgb(250, 141, 157);
    }

    75% {
        color: rgb(122, 246, 122);
    }

    100% {
        color: rgb(234, 234, 105);
    }
}

.box h3{
    color: white;
    text-align: center;
    padding-top: 20px;
    font-size: 30px;
    font-family: cursive;
}

.box img{
    width: 80%;
    height: 40vh;
}
.box h2{
    text-align: center;
    font-family: cursive;
    color: white;
    padding-top: 15px;
    font-size: 35px;
    padding-bottom: 20px;
}

#submit{
    color: rgb(255, 0, 217);
    font-weight: bolder;
    margin-top: 15px;
    padding: 10px;
    background-color: rgb(201, 154, 183);
    font-size: 20px;
    margin-right: 20px;
    border-radius: 30px;
}