/*  * {outline:1px solid;} */

/* ===== Scrollbar CSS ===== */
  /* Firefox */
  * {
    scrollbar-width: auto;
    scrollbar-color: #e74b84 #ffffff;
  }

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 20px;
  }

  *::-webkit-scrollbar-track {
    background: #ffffff;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #e74b84;
    
  }

/*Bubble effect */


#background-wrap {
    bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}

/* KEYFRAMES */

@-webkit-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

/* ANIMATIONS */

.x1 {
    -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: -5%;
	top: 5%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x2 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 5%;
	top: 80%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x3 {
    -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 10%;
	top: 40%;
	
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	transform: scale(0.7);
}

.x4 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 20%;
	top: 0;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x5 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 30%;
	top: 50%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x6 {
    -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 0;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}

.x7 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 65%;
	top: 70%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x8 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 80%;
	top: 10%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x9 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 90%;
	top: 50%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x10 {
    -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 80%;
	top: 80%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

/* OBJECTS */

.bubble {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	
    height: 200px;
	position: absolute;
	width: 200px;
}

.bubble:after {
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	
	content: "";
    height: 180px;
	left: 10px;
	position: absolute;
	width: 180px;
}



/*End bubble effect*/

h1,h3 {
    font-family: "sneakers-pro", sans-serif;
font-weight: 500;
font-style: italic;
color:#F3E8E8;
text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(0,0,0,0);
}

h2, h4, h5, h6, footer {
    
font-family: pf-videotext, sans-serif;
font-style: normal;
font-weight: 700;
color:#F3E8E8;
text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(0,0,0,0);
}

p, li, marquee {
    
font-family: pf-videotext, sans-serif;
font-style: normal;
font-weight: 400;
color:#F3E8E8;
text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(0,0,0,0);
}

s {
    color:#E74B84
}
a {
  
    text-decoration:none;
}
button:hover {
    color:#ff66a3;
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(0,0,0,0);

}

ul,li {
    list-style-image: url(spinningcd.gif);
}

body {
    margin:0;
    padding:0;
    display:flex;
    overflow-x:hidden;
 justify-content: center;
 background-size:cover;
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-image:url("home/button.png");
 background-size:cover;
 height:100%;

	
}

body::after {
    margin:0;
    padding:0;
    display:flex;
    content:"";
    position:absolute;
    inset:0;
    background-image:url("home/vista.png");
    background-size:cover;
    height:100%;
    position:relative;
    background-repeat:no-repeat;
    opacity:0.8;
    z-index:-1;
}


#mydiv {
    position: absolute;
    width:200px;
    height:150px;
    z-index: 9;
    left:25px;
    top:200px;
    text-align: center;
   
    cursor:move;
  }
  
  #mydiv2 {
    position: absolute;
    width:200px;
    height:150px;
    z-index: 9;
    right:55px;
    top:400px;
    text-align: center;
   
    cursor:move;
  }


  #mydivheader, #mydivheader2 {
    width:100%;
    height:auto;
    padding: 10px;
    cursor: move;
    z-index: 10;
   
  
  }


 #cat {
    position: absolute;
    width:200px;
    height:150px;
    z-index: 9;
    right:57px;
    top:100px;
    text-align: center;
   
    cursor:move;}

.layout::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:url("home/vista.png");
    background-size:cover;
    height:100%;
    position:relative;
    background-repeat:no-repeat;
    opacity:0.8;
    z-index:-1;
  
   
}
.layout::before,
#background-wrap {
    pointer-events: none;
}
body::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:url("home/brillofuxia.gif");
    opacity:0.03;
    height:950px;
    background-color:#E74B84;
   
}
body::before,
#background-wrap {
    pointer-events: none;
}

   
#rhythmring-img{
    content: url("https://maddycha.com/rhythm-ring/imgs/widget/g2.png") !important;
}

.layout {
    margin-top:25px;
    display:flex;
    width:65%;
    height:90%;
    padding:15px;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    align-self:center;
    border: 11px inset #e74b84;
   border-image:url("home/strawberryborder.gif");
   border-image-slice:
        176 170 178 170;
        border-image-width:
        20px 20px 20px 20px;
        border-image-outset:
        2px 2px 2px 2px;
        border-image-repeat:
        round round;
        
   
    
  
}

.header {
    display:flex;
    flex-direction:row;
    width:100%;
    height:200px;
    justify-content: center;
    align-items: center;
    background-image:url("home/beach2.jpg");
    background-size:cover;
    background-position:top;
    background-color:#E74B84;
   
}


.logo {
    width:100%;
    height:100px;
    display:flex;
    justify-content: center;
    align-items: center;
    align-self:center;
   
    

}
.marqueecont {
    width:100%;
}
main {
    display:flex;
    flex-direction:row;
    width:100%;
   
    height:600px;
   
}

.left {
    display:flex;
    width:20%;
    height:auto;
    background-image: url("home/bg.png");
    background-size: cover;
   background-attachment: center;
    background-repeat: no-repeat;
    flex-direction:column;
  
}
.headpiccont {
    display:flex;
    width:20%;
    height:auto;
    position:relative;
    justify-content: flex-end;
    align-self:flex-end;
    right:-120px;
   
}
.clap {
    display:flex;
    align-self:flex-end;
    position:relative;
    right:-130px;
}

nav {
    width:100%;
    height:300px;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    gap:10px;
    border: 5px inset #E74b84;
}

button {
    width:150px;
    height:30px;
    display:flex;
     background-image:url("home/button.png");
     background-size:cover;
     align-items: center;
     justify-content: center;
     background-repeat:no-repeat;
    background-position:center;
    background-color:#E74B84;
    font-family: "sneakers-pro", sans-serif;
    font-weight: 100;
    font-style: italic;
    font-size:18px;
    cursor: pointer;
    border-radius: 4px;
    color:#f3e8e8;
    border:3px outset #f3e8e8;
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5), 2px 2px 2px rgba(0,0,0,0);

}

.todolist {
    width:100%;
    height:150px;
    display:flex;
    flex-direction: column;
    overflow-y:scroll;
    background-attachment: scroll;
    overflow-x:hidden;
    align-items:center;
    border: 5px inset #E74b84;
}

.update {
    width:100%;
    height:150px;
    display:flex;
    flex-direction: column;
    overflow-y:scroll;
    overflow-x:hidden;
    align-items:center;
    border: 5px inset #E74b84;
}
 .gradient-background {
    width:100%;
    background: linear-gradient(124deg,#cb0138,#ffad1f);
    background-size: 120% 120%;
    animation: gradient-animation 6s ease infinite;
  }
  
  @keyframes gradient-animation {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

.center {
    display:flex;
    flex-direction:column;
    gap:80px;
    padding:10px;
    width:60%;
    height:100%;
   
    overflow-y:scroll;
    overflow-x:hidden;
    justify-content:flex-start;
    align-items: center;
    background-attachment:scroll;
    box-sizing: border-box;
   
}

.meavatarcont {
    display:flex;
    flex-direction:row;
    width:70%;
    height:auto;

}

.speech {
    display:flex;
    flex-direction:column;
    width:30%;
    justify-content: flex-start;
  
}


.isay {
    width:30%;
    height:100px;
    overflow-y:scroll;
    position:absolute;
    top:55px;
    right:-15px;
}
.piccont1 {
    width:100%;
    display:flex;
    height:200px;
    gap:100px;
    margin-top:25px;
    background-image:url("home/phonegif.gif");
    background-size:cover;
    background-attachment: top;
    padding:10px;
    overflow-x:hidden;
    background-repeat:no-repeat;
   align-content: center;

}

.chatpollcont {
    width:100%;
    height:auto;
    display:flex;
    flex-direction:row;
    justify-content: space-evenly;
    align-items:center;

  
}
.polls {
    display:flex;
    
    width:100%;
    height:350px;
    justify-content: center;
    
    
    position:relative;
 

}

.welcomecont {
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-self:center;
}
.geninfotext {
color:#E74B84

}
.geninfo {
    
    display:flex;
    width:100%;
height:300px;
justify-content: center;
align-items: flex-start;
word-wrap: break-word;
max-height:400px;


}

.morestuff {
    display:flex;
    justify-content: center;
    align-items: flex-start;
    word-wrap:break-word;
    max-height:400px;
   

}
.countercont {
    display:flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
}
.crosswordcont {
    display:flex;
    width:100%;
    height:auto;
    justify-content: center;
    align-items: center;
}
.webringcont {
    display:flex;
    flex-direction:column;
    justify-content: flex-start;
    align-items: center;
    word-wrap:break-word;
    overflow-x:hidden;
    color:#E74B84;
    gap:10px;
    padding:10px;
}

.blinkiecont {
    display:flex;
    flex-direction:row;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
   align-content:flex-start;
    overflow-x: hidden;
    padding:10px;
    word-wrap:break-word;
    box-sizing:border-box;
    flex-wrap:wrap;
    column-count: 3;
    
}
.win7 {
    display:flex;
    width:100%;
    height:auto;
    justify-content: center;
}
.windowbutton {
    width:auto;
    height:auto;
    display:flex;
    flex-direction:row;
    gap:10px;
}
.window-body {
    max-height:300px;
    overflow-x:hidden;
    overflow-y:scroll;
    
}
.flagcounter {
display:flex;
width:100%;
max-height: 250px;
overflow-y:scroll;
padding:10px;
justify-content: center;
align-content:center;
align-items: center;
background-color:#cb0138;

}
.right {
    display:flex;
    flex-direction:column;
    width:30%;
    height:auto;
    background-image: url("home/bg.png");
    background-size: cover;
    background-repeat: no-repeat;
    align-items:center;
    justify-content:center;
}

.piccontright {
    display:flex;
    flex-direction:row;
    justify-content: flex-start;
    overflow-x:scroll;
    overflow-y:hidden;
    align-content:flex-start;
    width:100%;
    height:250px;
    margin-top:10px;
    
}

.music {
    display:flex;
    width:100%;
    height:auto;
    display:flex;
    align-items: center;
    align-self:center;
    justify-content: center;
}

.songcont {
    width:auto;
    height:auto;
    top:40px;
   right:32px;
    rotate:9deg;
    position:absolute;
    z-index:10;
}

footer {
display:flex;
font-size:9px;


margin-top:10px;
}