body {
  background-image: url(index-background.png);
  font-family: "Dico", sans-serif;
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  position: relative;
  color:#6c3421;
  
}




.headerwrapper{
  align-items: center;
  justify-content: center;
  gap:10px;
  height: 200px;
  margin:10px 10px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;    
  justify-content: space-between;
  gap: 20px;
}


header{
  width: 700px;
  background-image:url("https://i.pinimg.com/1200x/57/b6/5d/57b65df3bc4c8cb3d9012f66964893f6.jpg");
  padding:10px;
  margin-bottom:0px;
  font-family:"Are You Serious",cursive ;
  border-radius: 10px;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top:0px ;
  border: 4px solid #4e590c;

}

nav a{
display:inline-flex;
padding:8px 8px;
background-color:#da961c ;
text-decoration: none;
border-radius: 5px;
margin:0 10px;
font-weight: bold;
transition:0.2s ;
align-items: center;
line-height: 1;
}

.potplant{
  height:200px;
}

.orange-tree{
  height:200px;
}

.nav-button{
  display:flex;
  align-items: center;
  gap:5px;
}

a:link{color:#311f10;}
a:visited{color:#694120;}
a:hover{color:#24160b;}

.icon{
  width:17px;
  height:17px ;
  margin-right:5px;
  display:block;
}
    
    .main-content{
      max-width: 1200px;
      margin: 0 auto;
      display: flex;    
      justify-content: space-between;
      gap: 10px;
      grid-template-columns: 1fr 2fr 1fr;
    }
    
    
    .id{
  max-width: 280px;
  min-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto;
  padding:20px;
    }
    
  .container1{
  height: auto;
  margin-left: 20px;
  position: relative;
  text-align: left;
  background-color:#e8beae ;
  padding:10px ;
  padding-bottom: 20px;
  flex:1;
  outline:8px solid #e57384;
  max-width: 240px;
  margin-bottom: 20px;
}


.currently{
     width:100%;
     border-collapse: collapse;
     table-layout: fixed;
}

.currently th,
.currently td{
     border:2px #6c3421 solid;
     padding: 5px;
}
.angelcats{bottom:-80px;left:-60px ;}

  .column2{
    flex:3;
  }
  
  
  .wrapper-for-intro{
    
    border:2px #EED9C4 solid;
    background-image: url("pink-ceiling.jpg");
    background-size: fit;
    padding: 20px;
    border-radius: 10px;
    color:#6c3421;
    }
  .intro{
    
    text-align: center;
    background-color:#EED9C4 ;
    padding: 20px;
    border-radius: 10px;
    color:#6c3421;
    margin:auto;
    }
  .wrapper-for-introduction{
    display: flex;
    gap: 15px;
    width:100%;
    align-items: flex-start;
    text-align: left;
  }
  
  .pic-of-me{
  max-width:200px;
  height: auto;
  border:#6c3421 double 7px;
  flex-basis: 0;
    }
    
  .blinkie-wrapper{
    overflow:hidden;
    max-width: 500px;
    width:100%;
    position:relative;
  }
  
.blinkie-wrapper::before,
.blinkie-wrapper::after{
  content:"";
  position: absolute;
  top: 0;
  width:50px;
  height:100%;
  z-index: 2;
  pointer-events: none;
}
.blinkie-wrapper::before{
  left:0;
  background:linear-gradient(to right,#EED9C4,transparent );
}
    
.blinkie-wrapper::after{
  right:0;
  background:linear-gradient(to left,#EED9C4,transparent );
}     
  
  .blinkie-belt img{
   max-height:31px;
   min-height: 31px;
   margin:4px;
  }
  
  .blinkie-belt {
    display:flex;
    width:max-content;
   animation: scrollBlinkies 20s linear infinite;
  }
  
  @keyframes scrollBlinkies {
    from {transform:translateX(0);}
    to {transform:translateX(-50%);}
  }
  
  
  
  .wrapper-for-container2{
    margin-top: 20px;
    border:2px #EED9C4 solid;
    background-image: url("pink-swirl.jpg");
    background-size: cover;
    padding: 20px;
    border-radius: 10px;
    color:#6c3421;
    align-content: center;
    text-align: center;
    }
  
.pallete{
  text-align: center;
  background-image:url("pallete.png");
  padding: 20px;
  flex:3;
  color:#6c3421;
  position: relative;
  background-size: cover;
  height:320px;
  filter:hue-rotate(90deg)saturate(0.5) brightness(0.9);
  
}
  
  .paint-sticker{
    width:110px;
    height: 90px;
    position: absolute;
  }
  
  .paint-sticker img{
    height:  100%;
    width: 100%;
    object-fit: fill;
    display: block;
    border-radius: 8px;
  }
  
  .paint-sticker:nth-child(1){top:25px; left:25px;color:#EED9C4;}
  .paint-sticker:nth-child(2){top:25px; left:147px;}
  .paint-sticker:nth-child(3){top:25px; left:270px;color:#EED9C4;}
  .paint-sticker:nth-child(4){top:25px; left:390px; color:#EED9C4;}
  .paint-sticker:nth-child(5){top:142px; left:25px;}
  .paint-sticker:nth-child(6){top:142px; left:147px; color:#EED9C4;}
  .paint-sticker:nth-child(7){top:142px; left:270px;}
  .paint-sticker:nth-child(8){top:142px; left:390px;color:#EED9C4;}
  .paint-sticker:nth-child(9){top:245px; left:25px;}
  .paint-sticker:nth-child(10){top:245px; left:147px; color:#EED9C4;}
  .paint-sticker:nth-child(11){top:245px; left:270px;color:#EED9C4;}
  .paint-sticker:nth-child(12){top:245px; left:390px;color:#EED9C4;}
  
    .sticker-text{
      position: absolute;
      top: 0;
      left: 0;
      height:  100%;
      width: 100%;
      display: flex;
      align-items:center ;
      justify-content: center;
      opacity: 0;
      font-weight: bold;
    }
    .paint-sticker:hover img{
      opacity:0;
    }
    
    .paint-sticker:hover .sticker-text{
      opacity:1;
    }
    
  .paint-sticker img,
  .sticker-text{
      transition: 0.3s;
    }
  
  
.column3 {
    max-width:300px;
  height: auto;
  display: block;
  border-radius: 4px;
  margin: 0 auto;
}

.container3{
  text-align: center;
  padding:10px;
  border-radius:20px;
  background-color:#6c3421;
  flex:1;
  align-content: center;
  color:#EED9C4;
}




.sticker{
     position: absolute;
     width:150px;
     z-index: 10;
}


.realbug{top:150px;right:0px ;}
.eyestar{top:220px;right:350px ; width: 100px;}