@font-face {
                    font-family: 'Embolism spark';
                    src: url('Font/Embolism Spark.ttf') format('truetype');
                    font-weight: normal;
                    font-style: normal;
                }

            #top {
                top: 20px;
                left: 20px;
                background-color: #181818;
                background-image: url('solarium.jpg');
                background-size: 100% auto;
                background-position: center;
                background-repeat: no-repeat;
                font-family: Arial, sans-serif;
                text-align: center;
                padding: 50px;
                position: absolute;
                width: 1107.4px;
                height: 170px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                box-sizing: border-box;
            }

            body {
                margin: 0;
                background-color: #F5E6C8;
                width: 100%;
                height: 100%;
                position: relative;
                font-family: 'Embolism spark', "Comic Sans MS", cursive, sans-serif;
            }
            
            #mapa {
                    
                position: absolute;
                top: 20px;
                left: 1147.4px;
                width: 747.4px;
                height: 900px;
                background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }

                        #mapa img {
                            position: absolute;
                            top: 20px;
                            left: 20px;
                            right: 20px;
                            scale: auto;
                            max-width: calc(100% - 40px);
                            height: auto;
                                border-bottom-left-radius: 10px;
                            border-bottom-right-radius: 10px;
                            border-top-left-radius: 10px;
                            border-top-right-radius: 10px;
                        }

                        #mapa h1 {
                            top: 440px;
                            left: 20px;
                            position: absolute;
                            width: calc(100% - 40px);
                            color: #CDA452;
                            margin: 0;
                            font-size: 30px;
                            text-align: center;
                            font-family: "Embolism spark", sans-serif;
                         }

                         #mapa h2 {
                            top: 500px;
                            left: 20px;
                            position: absolute;
                            width: calc(100% - 40px);
                            color: #CDA452;
                            margin: 0;
                            font-size: 20px;
                            text-align: center;
                            font-family: "Embolism spark", sans-serif;
                         }
                         #mapa h3 {
                            top: 760px;
                            left: 20px;
                            position: absolute;
                            width: calc(100% - 40px);
                            color: #CDA452;
                            margin: 0;
                            font-size: 30px;
                            text-align: center;
                            font-family: "Embolism spark", sans-serif;
                         }
                         #mapa h4 {
                            top: 820px;
                            left: 20px;
                            position: absolute;
                            width: calc(100% - 40px);
                            color: #CDA452;
                            margin: 0;
                            font-size: 30px;
                            text-align: center;
                            font-family: "Embolism spark", sans-serif;
                         }

        
            #Valeriia{
                position: absolute;
                left: 20px;
                top: 210px;
                width: 543.7px;
                height: 345px;
                 background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
                #Valeriia h1 {
                    position: absolute;
                    top: 210px;
                    left: 35px;
                    font-size: 50px;
                    color: #CDA452;
                   
                }

                #Valeriia h2 {
                    position: absolute;
                    top: -10px;
                    left: 180px;
                    font-size: 40px;
                    color: #CDA452;
                }
                #Valeriia h3 {
                    position: absolute;
                    top: 100px;
                    left: 200px;
                    font-size: 25px;
                    line-height: 35px;
                    margin: 0;
                    color: #CDA452;
                }
                #Valeriia img {
                    position: absolute;
                    scale: 0.05;
                    border-bottom-left-radius: 5%;
                    border-bottom-right-radius: 5%;
                    border-top-left-radius: 5%;
                    border-top-right-radius: 5%;
                    top: -1900px;
                    left: -1345px;
                    transform: translateX(-50%);
            }

             #Marta{
                position: absolute;
                left: 583.7px;
                top: 210px;
                width: 543.7px;
                height: 345px;
                 background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;  
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
                #Marta h1 {
                    position: absolute;
                    top: 210px;
                    left: 50px;
                    font-size: 50px;
                    color: #CDA452;
                   
                }

                #Marta h2 {
                    position: absolute;
                    top: -10px;
                    left: 180px;
                    font-size: 40px;
                    color: #CDA452;
                }
                #Marta h3 {
                    position: absolute;
                    top: 85px;
                    left: 200px;
                    font-size: 25px;
                    line-height: 35px;
                    margin: 0;
                    color: #CDA452;
                }
            #Marta img {
                scale: 0.045683208701564;
                border-bottom-left-radius: 5%;
                border-bottom-right-radius: 5%;
                border-top-left-radius: 5%;
                border-top-right-radius: 5%;
                position: absolute;
                top: -2090px;
                left: -1490px;
                transform: translateX(-50%);
            }

            #Diana{
                position: absolute;
                left: 20px;
                top: 575px;
                width: 543.7px;
                height: 345px;
                 background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
                #Diana h1 {
                    position: absolute;
                    top: 210px;
                    left: 40px;
                    font-size: 50px;
                    color: #CDA452;
                   
                }

                #Diana h2 {
                    position: absolute;
                    top: -10px;
                    left: 180px;
                    font-size: 40px;
                    color: #CDA452;
                }
                #Diana h3 {
                    position: absolute;
                    top: 85px;
                    left: 200px;
                    font-size: 25px;
                    line-height: 35px;
                    margin: 0;
                    color: #CDA452;
                }
            #Diana img {
                scale: 0.05;
                border-bottom-left-radius: 5%;
                border-bottom-right-radius: 5%;
                border-top-left-radius: 5%;
                border-top-right-radius: 5%;
                position: absolute;
                 top: -1900px;
                left: -1345px;
                transform: translateX(-50%);
            }

               #Eliza {
                position: absolute;
                left: 583.7px;
                top: 575px;
                width: 543.7px;
                height: 345px ;
                 background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
            }
            #Eliza h1 {
                position: absolute;
                top: 210px;
                left: 55px;
                font-size: 50px;
                color: #CDA452;
               
            }
            #Eliza h2 {
                position: absolute;
                top: -10px;
                left: 180px;
                font-size: 40px;
                color: #CDA452;
            }
            #Eliza h3 {
                position: absolute;
                top: 85px;
                left: 200px;
                font-size: 25px;
                line-height: 35px;
                margin: 0;
                color: #CDA452;
            }
            #Eliza img {
                scale: 0.05;
                border-bottom-left-radius: 5%;
                border-bottom-right-radius: 5%;
                border-top-left-radius: 5%;
                border-top-right-radius: 5%;
                position: absolute;
                top: -1900px;
                left: -1420px;
            
            }
 @media screen and (max-width: 767px) {
                html, body {
                    height: 2000px;
                    width: 100%;
                    max-width: 480px;
                    margin: 0 auto;
                    padding: 0 10px;
                    box-sizing: border-box;
                }
                #top
                {
                    position: absolute;
                    width: 95%;
                    height: auto;
                    left:2.5%;
                    top: 20px;
                    
                }
                #Valeriia
                {
                position: absolute;
                left: 2.5%;
                top: 140px;
                width: 95%;
                height: 330px;
                background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                }
                #Valeriia h2
                {
                    position: absolute;
                    top: -10px;
                    left: 180px;
                    font-size: 30px;
                    color: #CDA452;
                }
                #Valeriia h3
                {
                    position: absolute;
                    top: 70px;
                    left: 180px;
                    font-size: 15px;
                    line-height: 25px;
                    margin: 0;
                    color: #CDA452;
                }
                #Marta
                {
                position: absolute;
                left: 2.5%;
                top: 480px;
                width: 95%;
                height: 330px;
                background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                }
                #Marta h2
                {
                    position: absolute;
                    top: -10px;
                    left: 180px;
                    font-size: 30px;
                    color: #CDA452;
                }
                #Marta h3
                {
                    position: absolute;
                    top: 70px;
                    left: 180px;
                    font-size: 15px;
                    line-height: 25px;
                    margin: 0;
                    color: #CDA452;
                }
                #Diana
                {
                position: absolute;
                left: 2.5%;
                top: 820px;
                width: 95%;
                height: 330px;
                background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                }
                #Diana h2
                {
                    position: absolute;
                    top: -10px;
                    left: 180px;
                    font-size: 30px;
                    color: #CDA452;
                }
                #Diana h3
                {
                    position: absolute;
                    top: 70px;
                    left: 180px;
                    font-size: 15px;
                    line-height: 25px;
                    margin: 0;
                    color: #CDA452;
                }
                #Eliza
                {
                position: absolute;
                left: 2.5%;
                top: 1160px;
                width: 95%;
                height: 330px;
                background-color: #3B3C41;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                }

                #Eliza h2
                {
                    position: absolute;
                    top: -10px;
                    left: 180px;
                    font-size: 30px;
                    color: #CDA452;
                }
                #Eliza h3
                {
                    position: absolute;
                    top: 70px;
                    left: 180px;
                    font-size: 15px;
                    line-height: 25px;
                    margin: 0;
                    color: #CDA452;
                }
                #mapa
                {
                    position: absolute;
                    top: 1500px;
                    left: 2.5%;
                    width: 95%;
                    height: 600px;
                    background-color: #3B3C41;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                }
                #mapa img
                {
                    position: absolute;
                    top: 20px;
                    left: 20px;
                    right: 20px;
                    scale: auto;
                    max-width: calc(100% - 40px);
                    height: auto;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                    border-top-left-radius: 10px;
                    border-top-right-radius: 10px;
                }
                #mapa h1
                {
                    top: 230px;
                    left: 20px;
                    position: absolute;
                    width: calc(100% - 40px);
                    color: #CDA452;
                    margin: 0;
                    font-size: 30px;
                    text-align: center;
                    font-family: "Embolism spark", sans-serif;
                }
                #mapa h2
                {
                    top: 270px;
                    left: 20px;
                    position: absolute;
                    width: calc(100% - 40px);
                    color: #CDA452;
                    margin: 0;
                    font-size: 20px;
                    text-align: center;
                    font-family: "Embolism spark", sans-serif;
                }
                #mapa h3
                {
                    top: 450px;
                    left: 20px;
                    position: absolute;
                    width: calc(100% - 40px);
                    color: #CDA452;
                    margin: 0;
                    font-size: 30px;
                    text-align: center;
                    font-family: "Embolism spark", sans-serif;
                }
                #mapa h4
                {
                    top: 550px;
                    left: 20px;
                    position: absolute;
                    width: calc(100% - 40px);
                    color: #CDA452;
                    margin: 0;
                    font-size: 30px;
                    text-align: center;
                    font-family: "Embolism spark", sans-serif;
                }
            }