* {font-family: Bahnschrift, sans-serif; font-size: 20px; background-color: #818bc4; color: white;}
html {scroll-behavior: smooth;}

p {margin: 24px 24px 0 24px;}
h3 {font-size: 40px; margin:0;}
h1 {font-size:40px;}
h2 {font-size:30px;}
strong {background-color: transparent; font-size: 24px;}

.menu {width:100%; height: 50px; z-index: 100; background-color: transparent; margin-top: -10px;}
.nav {width: 54%; height:50px; min-width: 820px; background-color:#F197c0; margin: 0 auto; border-radius: 0 0 10px 10px;}
ul {list-style-type: none; margin: 0; padding: 0;}
.li_1 {border-radius: 0 0 10px 0; padding-left: 15px; padding-right: 15px;}
li {width: 110px; height: 50px; align-content: center; text-align: center; float: right; background-color: #F197c0;}
li:hover {background-color: #F8B9D6; color: #E6E8F3;}
li:active {background-color: #E6E8F3;}

.mainbox1 {width: 100%; height: 541px; margin-top:30px; position: relative;}
.imagem1 {width:54%; height: 541px; min-width: 820px; z-index: 2; margin: 0 auto;}
.PUZZLE {width:100%; height: 100%; object-fit: cover;}
.piecespzz {width: 54%; height: 541px; min-width: 820px; z-index: 3;  position:absolute; place-self: center; inset: 0; opacity: 30%; background-color: #818bc4;}
.b1 {width: 15.1%; height: 33.3%; float: left; z-index: 4; position:absolute;}
.b2 {width: 22.4%; height: 33.3%; float: left; z-index: 4; position:absolute; margin-left: 15.1%; transform-style: preserve-3d; transition: all 0.5s ease;}
.b3 {width: 48.9%; height: 33.3%; float: left; z-index: 4; position:absolute; margin-left: 37.5%;}
.b4 {width: 13.6%; height: 33.3%; float: left; background-color: transparent; z-index: 4; position:absolute; margin-left: 86.4%; transform-style: preserve-3d; transition: all 0.5s ease;}
.c1 {width: 29.7%; height: 33.3%; float: left; z-index: 4; position:absolute; margin-top: 22%;}
.c2 {width: 17.6%; height: 33.3%; float: left; z-index: 4; position: absolute; margin-top: 22%; margin-left: 29.7%; transform-style: preserve-3d; transition: all 0.5s ease;}
.c3 {width:52.7%; height: 33.3%; float: left; z-index: 4; position: absolute; margin-top: 22%; margin-left: 47.3%;}
.d1 {width: 66.8%; height: 33.3%; float: left; z-index: 4; position:absolute; margin-top: 44%;}
.d2 {width:23.5%; height:33.3%; float: left; z-index: 4; position:absolute; margin-top: 44%; margin-left: 66.8%; transform-style: preserve-3d; transition: all 0.5s ease;}
.d3 {width: 9.6%; height: 33.3%; float: left; z-index: 4; position:absolute; margin-top: 44%; margin-left: 90.3%;}
.b2:hover{transform: rotateY(180deg);}
.b4:hover{transform: rotateY(180deg);}
.c2:hover{transform: rotateY(180deg);}
.d2:hover{transform: rotateY(180deg);}
.frente1 {position:absolute; width: 100%; height: 100%; backface-visibility: hidden;}
.verso1 {position:absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotateY(180deg);}
.btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: black; font-size: 22px; text-decoration-line: underline; border: none; cursor: pointer; margin-top: 3px;}
.btn1 {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: black; font-size: 22px; text-decoration-line: underline; border: none; cursor: pointer; margin-top: 3px; margin-left: 10px;}
.btn:hover {background-color: black; color:#F197c0;}
.btn1:hover {background-color: black; color:#F197c0;}
.btn:active {color: #818bc4;}
.btn1:active {color: #818bc4;}

.footertext {width: 100%; height: 55px; float: left; background-color: transparent; margin-top: 13px;}
.footer {width: 54%; height: 100%; min-width: 820px; margin: 0 auto; overflow: hidden;}
.textright {width: 20%; height: 100%; float: left; background-color: #818bc4;}
.logomain {width: 100%; height: 100%; object-fit: scale-down;}
.space {width: 2%; height: 100%; float: left;}
.textleft {width:65%; height: 100%; min-width: 410px; float: right;}


@keyframes solve {from{transform: translateX(550px);} to{transform: translateX(0);}}
.solve {animation: solve 3s ease-in-out; margin-top: -7px;}




.aboutmesection {width: 100%; height:1400px; float:left; margin: 0 auto; margin-top:50px;}
.fix {width:100%; height: 100%; min-width: 820px; margin: 0 auto;}
.imageaboutme {width:60%; height:100%; min-width: 420px; float: left; overflow: hidden;}
.hand {width:100%; height: 100%; object-fit: cover; min-width: 420px;}
.textaboutme {width:40%; height:100%; float: left;}
.boutme {width:90%; height: 500px; min-width: 400px; margin-top:300px; padding:0 20px 0 30px;}
.contacts {width:90%; height:150px; margin-top: 330px; min-width: 400px; padding:0 20px 0 30px;}