body{
background-image: url(MAinnn.jpg);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
display: flex;
justify-content: center;
min-height: 1300px;
align-items: center;
flex-direction: column;
}
html {
cursor: url('cursor.png'),auto;
cursor: pointer url(pint.png)auto,
}


.popup{
    background: rgb(22, 217, 8);
width: 420px;
padding: 30px 40px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 8px;
font-family: sans-serif;
text-align: center;
z-index: 11;
outline: 2px solid rgb(6, 59, 137);
}

.popup h2{
    margin-top: -20px;
    color: rgb(6, 59, 137);
}

.popup p{
    font-size: 14px;
    text-align: center;
    margin: 20px 0;
line-height: 25px;
color: rgb(6, 59, 137);
}

button{
    display: block;
    margin: 0 0 20px auto;
    background: transparent;
    font-size: 30px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: rgb(6, 59, 137);
    z-index: 9;
    color: #ffffff;
}

#box1{
    height: 40px;
    width: 500px;
    background-image: url(Welcome.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: 30px;
}

.Bub{
margin-right: 400px;
}

.Ban{
margin-top: 300px;
margin-right: -800px;
}
.Ipad{
margin-top: -300px;

}


#box6{
z-index: 8;
position: absolute;
margin-top: -200px;
margin-left: 549px;
width: 249px;
height: 60px;
}


#box5{
z-index: 6;
margin-top: -570px;
position: absolute;
height: 220px;
width: 780px;
background-image: url(water.gif);
background-repeat: no-repeat;
background-size: cover;
}

#box2{
height: 800px;
width: 800px;
z-index: 2;
}



#box3{
height: 50px;
width: 800px;
overflow: hidden;
}


#box7{
z-index: 9;
position: absolute;
margin-top: 700px;
margin-right: 805px;
height: 300px;
width: 300px;
background-image: url(BlueGuy.png);
background-repeat: no-repeat;
background-size: cover;
}


#GreenBox{
z-index: 8;
position: absolute;
margin-top: 550px;
margin-left: 0px;
width: 780px;
height: 200px;
}

#TextForGreen{
z-index: 9;
position: absolute;
margin-top: 555px;
margin-left: 79px;
width: 630px;
height: 110px;
}

#Icons{
    z-index: 8;
position: absolute;
margin-top: -15px;
margin-right: 240px;
height: 250px;
width: 535px;
}

#Icon1{
    position: absolute;
    margin-top: 10px;
    margin-left: 25px;
    height: 100px;
    width: 100px;
    justify-content: center;
   align-items: center;
   text-align: center;
   display: flex;
}

#Icon2{
    position: absolute;
    margin-top: 15px;
    margin-left: 200px;
    width: 100px;
    height: 100px;
}

#Icon3{
    position: absolute;
    margin-top: 10px;
    margin-left: 410px;
    width: 100px;
    height: 100px;
}

#Icon4{
    position: absolute;
    margin-top: 140px;
    margin-left: 15px;
    width: 100px;
    height: 100px;
}

#Icon5{
    position: absolute;
    margin-top: 160px;
    margin-left: 219px;
    width: 100px;
    height: 100px;
   justify-content: center;
   align-items: center;
   text-align: center;
   display: flex;
   
}

#Icon6{
    position: absolute;
    margin-top: 140px;
    margin-left: 410px;
    width: 100px;
    height: 100px;
}

#Tits1{
    z-index: 9;
     margin-top: -29px;
    margin-left: -620px;
position: absolute;
background-image: url(resources.png);
background-size: contain;
background-repeat: no-repeat;
width: 130px;
height: 15px;
background-position: center;
}
#Tits2{
    z-index: 9;
     margin-top: -29px;
    margin-left: -250px;
position: absolute;
background-image: url(Guestbook.png);
background-size: contain;
background-repeat: no-repeat;
width: 130px;
height: 15px;
background-position: center;

}
#Tits3{
    z-index: 9;
     margin-top: -29px;
    margin-left: 150px;
position: absolute;
background-image: url(Shrines.png);
background-size: contain;
background-repeat: no-repeat;
width: 130px;
height: 15px;
background-position: center;
}
#Tits4{
    z-index: 9;
     margin-top: 230px;
    margin-left: -620px;
position: absolute;
background-image: url(Blog.png);
background-size: contain;
background-repeat: no-repeat;
width: 130px;
height: 15px;
background-position: center;
}
#Tits5{
    z-index: 9;
     margin-top: 230px;
    margin-left: -240px;
position: absolute;
background-image: url(e49a5b1d4fc5d6357e017a75368c2224.png);
background-size: contain;
background-repeat: no-repeat;
width: 130px;
height: 15px;
background-position: center;
}
#Tits6{
    z-index: 9;
     margin-top: 230px;
    margin-left: 160px;
position: absolute;
background-image: url(Chat.png);
background-size: contain;
background-repeat: no-repeat;
width: 130px;
height: 15px;
background-position: center;

}




.slider-track{
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
width: calc(250px * 18);
animation: scroll 18s linear infinite;
}

@keyframes scroll {
0% {
    transform: translate(0);
}
100% {
transform: translate(calc(-250px * 9));
}


}

.slide {
    align-items: center;
}

.boxie{background-color: #ffffff;
outline: 4px solid #57a2ed;
}

.box{
background-color: #86dfe4;
outline: 4px solid #00c130;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 10px 2px rgb(0, 255, 76);
}

.boxer{
    background-color: #86dfe4;
    outline: 1px solid #86dfe4;
}



.Bobbie{
}

.Greenie{
    background-color: #86dfe4;
    outline: 1px solid #86dfe4;
}

.Textie{
color: #005999;
}






@font-face {
font-family:Roman;
src: url(https://dl.dropbox.com/s/f9cfrx4wyt13rwv/ROMANTIC.TTF);
}
            #musicplayer{
                font-family:'Bodoni'; /* default font */
                background:rgb(16, 228, 1); /* background color of player */
                border:4px solid #2594fc; /* border around player */
                width:200px; /* width of the player - make it 100% if you want it to fill your container */
                padding:10px;
                text-align:center; 
                display:flex;
                flex-direction:column;
                gap:10px;
                position:relative;
              
                left: 1em;
            }
 
            .songtitle, .track-info, .now-playing{
                padding:5px;
            }
 
            .controls{
                display:flex; 
                flex-direction:column; 
                gap:10px;
            }
 
            .buttons{
                display:flex;
                justify-content:center;
                font-size:17px !important; /* size of controls */
                width:100%;
            }
 
            .buttons div{
                width:33.3%;
            }
 
            .playpause-track, .prev-track, .next-track{
                color:#009912; /* color of buttons */
                font-size:35px !important; /* size of buttons */
            }
 
            .volume-icon{
                font-size:22px !important; /* size of volume icon */
            }
 
            .seeking, .volume{
                display:flex;
                flex-direction:row;
                align-items:center;
                gap:5px;
            }
 
            .now-playing, .track-info{
                background-color:#ffffff; /* background color of top two boxes */
            }
 
            .now-playing{
                font-weight:bold;
            }
 
            input[type=range]{
                -webkit-appearance:none; /* removes default appearance of the tracks */
                width:100%;
            }
 
            input[type=range]:focus{
                outline:none; /* removes outline around tracks when focusing */
            }
 
            input[type=range]::-webkit-slider-runnable-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#01c301; /* color of seeking track */
            }
 
            input[type=range]::-webkit-slider-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#009912; /* color of seeker square */
                -webkit-appearance:none;
                margin-top:-3px; /* fixes the weird margin around the seeker square in chrome */
            }
 
            input[type=range]::-moz-range-track{
                width:100%;
                height:4px; /* thickness of seeking track */
                background:#e74492; /* color of seeking track */
            }
 
            input[type=range]::-moz-range-thumb{
                height:10px; /* height of seeking square */
                width:10px; /* width of seeking square */
                border-radius:0px; /* change to 5px if you want a circle seeker */
                background:#e74492; /* color of seeker square */
                border:none; /* removes weird border around seeker square in firefox */
            }


        .Iconies img:hover{
animation: shake 10s;

            }

            @keyframes shake{
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }

}