* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: linear-gradient(rgb(221, 212, 212), rgb(152, 174, 247)) fixed;
}
/* .container {
    position: absolute;
    max-width: 800px;
    height: 500px;
    /* margin: auto; */
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
/* }  */

.myRightCtn {
    position: relative;
    border-radius: 25px;
    height: 100%;
    padding: 25px;
    color: rgb(192, 192, 192);
    font-size: 12px;
    justify-content: center;
    align-items: center;
}
.myLeftCtn {
    position: relative;
    background: #fff;
    border-radius: 25px;
    height: 100%;
    padding: 25px;
    padding-left: 30px;
}
.row {
    height: 100%;
}
.myCard {
    position: relative;
    background: #fff;
    height: 100%;
    border-radius: 25px;
    -webkit-box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 10px 40px -10px rgba(0, 0, 0, 0.7);
}
.myRightCtn header {
    color: #fff;
    font-size: 44px;
}
.box {
    position: inherit;
    margin: 20px;
    border-radius: 25px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.myLeftCtn .myInput {
    width: 230px;
    border-radius: 25px;
    padding: 10px;
    padding-left: 2rem;
    border: none;
    -webkit-box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
}
.myLeftCtn .myInput:focus {
    outline: none;
}
.myForm {
    position: relative;
    margin-top: 50px;
}
.myLeftCtn .butt {
    background: linear-gradient(45deg, #6d8df7, #3664fd);
    color: #fff;
    width: 230px;
    border: none;
    border-radius: 25px;
    padding: 10px;
    -webkit-box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
}
.myLeftCtn .butt:hover {
    transform: scale(0.98);
    /* make gradient move fastly */
    background-size: 300%;
    animation: gradient 6s linear infinite;
}
.myLeftCtn .butt:focus {
    outline: none;
}

.myLeftCtn .butt-guest {
    outline: 2px solid transparent;
    background-image: linear-gradient(45deg, #6d8df7, #3664fd);
    background-clip: border-box;
    box-decoration-break: clone;
    -webkit-background-clip: text;
    color: transparent;
    width: 230px;
    padding: 10px;
    border-radius: 25px;
    -webkit-box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 10px 41px -11px rgba(0, 0, 0, 0.7);
}
.myLeftCtn .butt-guest:hover {
    transform: scale(0.98);
    /* make gradient move fastly */
    background-size: 300%;
    animation: gradient 6s linear infinite;
}
.myLeftCtn .fas {
    position: relative;
    color: #3664fd;
    left: 36px;
}
.butt_out {
    background: transparent;
    color: #fff;
    width: 120px;
    border: 2px solid#fff;
    border-radius: 25px;
    padding: 10px;
    -webkit-box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 10px 49px -14px rgba(0, 0, 0, 0.7);
}
.butt_out:hover {
    border: 2px solid#95acf7;
}

.butt_out:focus {
    outline: none;
}