@import url('https://fonts.googleapis.com/css2?family=Marck+Script&display=swap'); body{ background: #FFF6EC; height: 100%; } h2,h3,h4,p,img{background-color: #FFF6EC !important} .container-fluid { line-height: 70px; } .navbar { background-color: #90604C; color: #FFF6EC; font-size: 25px; padding-left: 20px; padding-right: 20px; margin-bottom: 6vh; } .navbar-brand { font-family: 'Marck Script', cursive; font-size: 10vw; } a:link, a:hover, a:active, a:visited { color: #fff6ec; padding-right: 20px; } h2 { font-size: 7vw; line-height: 1; color: #3D160B !important; font-weight: normal; } p { margin-top: 5px; font-size: 3vw; line-height: 1; } .image2 { flex: none; border-radius: 40px; margin: auto; width: 30vw; } h1 { text-align: center; font-size: 4vw; color: #3D160B !important; } h3 { text-align: center; color: #3D160B !important; } h4 { font-size: 5vw; text-align: center; color: #3D160B !important; } p{ font-size: 2.4vw; color: #3D160B !important; } /*=======*/ .row{ display: flex; align-items: center; justify-content: center; } .main_pannel{ margin-left: 0; margin-right: 0; max-width: 100%; } .table{ max-width: 100%; } .st2{ width: 50%; } .image1 { flex: none; border-radius: 40px; margin: auto; width: 32vw; float: right; } .image-text { margin: 3vw; font-size: 4vw; background-image: url('images/ellipse.png'); position: relative; border-radius: 80px; width: 30vw; height: 30vw!important; background-size: 30vw; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; } .btn{ background-color: #3D160B !important; border: 3px solid #3D160B; width: 20vw; margin-top: 45px; border-radius: 25px; font-size: 3vw; margin-left: 2vw; padding-right: 8px !important; } .column2 { display: flex; flex-direction: column; align-items: center; } button[type="submit"] { background-color: #3D160B !important; border: 3px solid #3D160B; margin-top: 25px; border-radius: 25px; font-size: 3vw; width: 20vw; color: #fff6ec; height: 10vw; } .admin{ font-size: 3vw; margin-left: 2vw; padding-right: 8px !important; margin-top: 40px; border-radius: 25px; width: 20vw; height: 10vw; } .adminAut{ font-size: 2vw; border-radius: 25px; width: 10vw; } .AdminButton{ border-radius: 25px; width: 20vw; font-size: 1.5vw; margin-left: 40vw; } .cakes{ display: flex; } @media (max-width: 768px) { .btn{ width: 70vw; font-size: 4vw; } h1 { font-size: 8vw; } h4 { font-size: 8vw; } .image1, .image2 { width: 60vw; } .image-text { width: 50vw; height: 50vw!important; background-size: 50vw; font-size: 7vw; } .col-4{ width: 100%; display: flex; align-items: center; } .columnP1{ width: 100%; display: flex; justify-content: center } .columnP2{ width: 80%; display: flex; justify-content: center; flex-direction: column; } .st2, .column1 { width: 80%; } h2{ font-size: 8vw; text-align: center; } p{ font-size: 5vw; text-align: center; } button[type="submit"] { font-size: 4vw; width: 30vw; height: 20vw; } .admin{ font-size: 4vw; width: 30vw; height: 20vw; align-items: center; padding-top: 3vw; margin-top: 23px; } .adminAut{ font-size: 6vw; width: 25vw; } .AdminButton{ width: 30vw; font-size: 3vw; margin-left: 10vw; } } .form-group { display: flex; flex-direction: column; margin-bottom: 10px; } input[type="text"], input[type="phone"], input[type="password"], textarea { border-radius: 25px; padding: 10px; border: 1px solid #f4ecd9; width: 100%; margin: 0 auto; } @media (min-width: 768px) { input[type="text"], input[type="phone"], input[type="password"], textarea { width: 50%; margin: 0 auto; } } .form-text { margin-top: 30px; text-align: center; } form { margin-top: 40px; text-align: center; } form div { margin-bottom: 75px; } table, th, td { font-size: 3vw; width: auto; padding: 20px; margin-top: 30px; margin: auto; border: 3px solid; text-align: center; } .formAdd{ width: 80vw; margin-left: 10vw; }