@font-face {font-family: Regular; src: url("../font/Poppins-Regular.woff2");}
:root {--main: #000000; --sec: #5F5F5F; --green: #832BB3; --bg: #ffffff; --bg2: #F7F7F7; --invert: 0;}
body {cursor: default; font-family: Regular; margin: 0px; background-color: var(--bg);}
body svg {filter: invert(var(--invert));}
p {color: var(--sec);}
h1 {color: var(--main); font-weight: normal;}
a {text-decoration: none;}
.s{flex-grow: 1;}
header {display: flex; flex-direction: column; height: 90vh;}
header .top {display: flex; padding: 25px;}
header .top img {filter: invert(var(--invert));}
header .top img:hover {filter: invert(var(--invert)); cursor: pointer;}
header .middle {display: flex; flex-direction: column; flex-grow: 1; text-align: center; font-size: 2rem; color: var(--main); justify-content: center; align-items: center;}
header .middle h1 {font-size: 2rem; margin: 0px;}
header .adv {color: var(--green); margin-left: 7px;}
header .bottom {text-align: center; padding: 20px;}
header .bottom img {filter: invert(var(--invert));}
.container_half {display: flex; height: 50vh;}
.container_half .text_bg {background-color: var(--bg2); width: 100%; height: 100%; flex-grow: 1;}
.container_half .text_bg_rev {background-color: var(--bg2); width: 100%; height: 100%; flex-grow: 1; order: 2;}
.container_half .text {padding: 10%;}
.container_half .text h2 {color: var(--main);}
.container_half .img_bg {overflow: hidden; background-color: var(--bg); flex-grow: 1; width: 100%; height: 100%; object-position: center;}
.container_half .img_bg img {overflow: hidden; width: 100%; height: 100%; object-fit: cover;}
.contact {display: flex; flex-direction: column; width: 100%; height: 100%; text-align: center; justify-content: center; align-items: center;}
.contact a {display: flex; align-items: center; width: 20%; justify-content: center; width: 100%;}
.contact .adv {color: var(--sec); margin-left: 7px;}
.contact .c {display: flex; color: var(--bg); background-color: var(--green); cursor: pointer; padding: 5px;}
@keyframes slide-in {from {opacity: 50%; transform: translateY(20px);} to {opacity: 100%; transform: translateY(0);}}
@keyframes zoom-in {from {transform: scale(1.2);} to {transform: scale(1);}}
@keyframes color-in {0% {background-color: var(--bg); color: var(--sec);} 50% {opacity: 1; background-color: var(--bg); color: var(--sec);} 100% {opacity: 1; color: var(--bg);}}
@media only screen and (max-width: 600px) {
header {height: 100vh;}
header .middle {font-size: 1.875rem;}
.container_half {flex-direction: column; height: fit-content; margin-bottom: 10px;}
.container_half .text_bg_rev {order: 1;}
.container_half .text_bg {order: 1;}
.contact {padding: 20% 0 30% 0;}
}