@media screen and (min-width:768px) and (max-width:1023px) {
body {background-color:#ffe3ff; text-align:justify; margin-left:200px; margin-right:200px; padding-top:30px; overflow:auto;}
.h1{font:40pt serif; color:#7b0094; text-align:center}
.h2{font:15pt comic sans; color:#ff33d3; text-align:center}
.h3{font:40pt serif; color:#4f005f; text-align: center}
.h4 {font:15pt serif; color:#3c0079; text-align: left;}
.h5 {font:20pt serif; color:#4f005f; text-align: center}
.p {font:15pt Comic Sans; color:#000000; text-align:justify}
.p1 {font:12pt Comic Sans; color:#000000; text-align:right}
.p2 {font:18pt Comic Sans; color:#000000; text-align:justify}
a:link {font:30pt serif; color:#9933FF; text-align:center}
a:visited {font:30pt serif; color:#CC00FF; text-align:center}
#box1 {background-color:#ffe3ff; border: 5px solid #cc00ff; height:300px; margin: auto; width: 800px; padding:2%; position:relative; top: 200px; text-align: center}
div.pie {position:fixed; width: 100%; height: 5%; right: 0%; top:95%; background-color: #ffe3ff; padding:2px;}
.sommariosx {position:fixed; width:5%; right:95%; left:0%; top:0%; bottom:0%; overflow: hidden; padding:1%; background-color:#FFFFFF} 
.sommariodx {position:fixed; width:5%; right:0%; left:95%; top:0%; bottom:0%; overflow: hidden; padding:1%; background-color:#FFFFFF}
.button {position: fixed; bottom: 20px;left: 0;width: 100%;display: flex;justify-content: center;gap: 30px;}
.button2 {position: relative; top: 30px; right:60px; width: 100%;display: flex;justify-content: right;}
#boxperbottoni {margin:0}
img {border-radius: 30px;}
#boxperimg {
    display: flex;
    justify-content: center;
    gap: 40px;
 width: fit-content;
    margin: 0 auto;} }