/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root{
  
  cursor: url('/wplace/media/horse.png'), auto;	
  }
@font-face {
    font-family: 'Habbo';
    src: url('media/Habbo.ttf');
}

a:hover {
  
  cursor: url('/wplace/media/anicursor.gif'), auto;	
  -webkit-animation: cursor 400ms infinite;
  animation: cursor 400ms infinite;
  }

body {
  background-repeat: no-repeat;
  background: rgba(0, 0, 0, 0);
  
  font-size: 18px;
  height: 100%;
  width: 85%;
  margin-left:auto;
  margin-right:auto;
  color: white;
  font-family:"Comic Sans MS";
}

#TODO{
  
  background: url('media/Sunflower_Bkgrd.jpg');
  transform: rotate(-2deg);
  color: black;
  width: fit-content;
  height: fit-content;
  padding: 8px;
  }

.border{
  
  border: 4px ridge grey;
  background-color: rgba(0,25,25,0.8);
  padding: 8px;
  margin: 5px;
  }

.baniere{
  background-image: url('media/bannergris.gif');
  background-repeat: no-repeat;
  background-size: cover;
  text-align : center;
}
.title{
  margin-top: 60px;
  margin-bottom: 40px;
  animation: rotateTitle 4s cubic-bezier(.65,.05,.36,1) infinite alternate, sizeTitle 2s cubic-bezier(.65,.05,.36,1) infinite alternate;
  }

@keyframes sizeTitle {
  from {
    transform: scale(0.9);
  }
/*use negative width if you want it to flow right to left else and positive for left to right*/
  to {
    transform: scale(1.4);
  }
}

@keyframes rotateTitle {
  from {
    transform: rotate(-10deg);
  }
/*use negative width if you want it to flow right to left else and positive for left to right*/
  to {
    transform: rotate(10deg);
  }
}

.pub_arnaque{
  line-height: 15px;
  width: 100%;
  height: 60px;
  text-align: center;
  background-image: url('media/Fiesta_Bkgrd.jpg');
  color: red;
  font-family: "Comic Sans MS";
  font-size: 12px;
  display: inline-flex;
  text-overflow: ellipsis;
}

#rainbow{
  height: 50px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, rgb(0,0,255), rgb(255,0,255), rgb(255,0,0) , rgb(255,255,0), rgb(0,255,0), rgb(0,255,255), rgb(0,0,255));
}

.panel_tool{
  width: 20%;
}

.subbody{
  height: 100%;
  width: 100%;
  display: inline-flex;
}

.panel{
  height: 100%;
}

.navbar{
  display: flex; 
  justify-content: space-around;
}
  
.navelem {
  color: inherit;
  text-decoration: none;
  height: 30px;
  display: flex; 
  border: 4px ridge yellow;
  padding: 5px;
  align-items : center;
}

.navelemicon{
  height: 100%;
  margin-right: 5px;
  }
  
.barre {
  position: relative;
}

.curseur {
  width: 2px;
  height: 30px;
  background: black;
  position: absolute;
  top: -3px;
}

.emoji {
  height: 35px;
  margin-bottom: -5px;
  }

#news {
  display: flex;
  font-family: Habbo;
	padding: 45px 30px 30px 30px;
	background-image: url('media/tv.jpg');
  background-size: 100% auto;
	background-repeat: no-repeat;
  width: 20%;
  flex-direction: column;
  
  padding-bottom: 10%;
  }

#newstitle{
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  font-size:24px;
  margin-bottom: 10px;
}

#newscontent > ul > li {
	margin: 0;
	padding: 0px 0 0px 14px;
	list-style: none;
	background-image: url('media/listdot.gif');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 10px;
	line-height: normal;
}

#newscontent > ul {
	margin: 0;
	padding: 0px 0 0px 14px;
}


.base {
  display: inline-block;
  border: 10px groove gray; 
  border-right: 10px ridge gray;
  border-bottom: 10px ridge gray;
  padding: 10px;
  background-color: #BBBBBB;
  position: absolute;
  text-align: center;
}
.stepbg{
background-image: url('/wplace/media/OPOCEAN2.png');
background-size:cover;
opacity:0.5;
}

.step {
  flex: 1 1 0px;
background-image: url('/wplace/media/OPOCEAN2.png');
  padding: 10px;
  background-color:rgb(0,0,0,0.5);
background-blend-mode: darken, luminosity;
border: 3px solid;
          border-image-slice: 100%;
          border-image-source: none;
          border-image-slice: 1;
          border-image-source: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
      
}

.frame2 {
    border: 25px solid;
    border-image: url(/wplace/media/frame2.png) 50;
background-image: url('/wplace/media/083C.jpg');
    }  

.step > img {
  height: 50px;
  }
.step > p {
  margin: 2px;
  }
.steptext {
  font-size: 16px;
  }
.coordonates {
  display:flex;
  gap:10px;
  background-color:rgb(40,66,108);
    border-radius: 5px;
  font-family: "Courrier";
  padding: 10px;
  }
.coordonates > p {
  flex: 1 1 0px;
  background-color:rgb(33,53,86);
  color:rgb(178,193,214);
  padding-left:5px;
  margin:0;
  text-align: center;
  }
  

.neon-text {
  color: #fff;
  text-shadow: 
  0 0 5px #fff,
  0 0 10px #fff,
  0 0 20px #ff4da6,
  0 0 40px #ff4da6,
  0 0 80px #ff4da6,
  0 0 90px #ff4da6,
  0 0 100px #ff4da6,
  0 0 150px #ff4da6;
}

@font-face {
font-family:'cupcake';
src: url(https://dl.dropbox.com/s/dayh8onbivwmqq7/Cherry%20Cupcake%20Personal%20Use.ttf);
}
.bouncyyy {
  z-index: 99;
  color: white;    
  filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(2px 0 black);
  animation: bounce 2s infinite;
  animation-timing-function: cubic-bezier(0.25, 0.85, 0.4, 1);
}

.letterone {
 
  animation-delay: 0s;
  display: inline-block;
}

.lettertwo {
 
  animation-delay: 0.1s;
  display: inline-block;
}

.letterthree {
  
  animation-delay: 0.15s;
  display: inline-block;
}

.letterfour {
  
  animation-delay: 0.2s;
  display: inline-block;
}

@keyframes bounce {
  0% {
    transform: scale(1, 1) translateY(0);
  }

  10% {
    transform: scale(1.1, .9) translateY(0);

  }

  30% {
    transform: scale(.9, 1.1) translateY(-30px);
    transform: rotate(-10deg);
  }

  50% {
    transform: scale(1.05, .95) translateY(0);
    transform: rotate(10deg);
  }

  60% {
    transform: scale(1, 1) translateY(-4px);
    transform: rotate(-10deg);
  }

  100% {
    transform: scale(1, 1) translateY(0);
  }
}


.window {
  border : outset 3px #e1e1e1;
  background-color: #e1e1e1;
}

.window > .header {
  background: linear-gradient(0.25turn, #9c01a2, #2006d5);
  font-family: "Courrier";
  padding: 3px;
  padding-left: 8px;
}

.window > .content {
  color:black;
  padding: 5px;
}