/*index page*/
#buttonKeMain{
    background:none;
    border: none;
    outline: none;
    display: block;
    width: 900px;
}

.container{
    display: flex;
    justify-content: center;
}

/*main page*/

#main-banner{
    background-position: center;  
    object-fit: fil;
    padding-bottom : 0px;
    width: 100vh;

}


button{
  background: none; /* Sets the background to transparent */
  border: none;      /* Removes the default border */
  padding: 0;        /* Removes default padding */
  cursor: pointer;   /* Keeps the hand cursor on hover */
  outline: none; 
}

header{
    background-image: url(header.jpg);
    background-position: 10%;
    text-shadow: var(--accent-color) 4px 4px .5em;
    font-family: "Homemade Apple";
    font-size: 36px;
    color: rgb(116, 25, 25);
    text-align: center;
    
}

#navbar{
    list-style-type: none; /* Removes the bullet points */
    margin: 0;
    padding: 0;
    overflow: hidden; /* Recommended for float layouts */
    background-color:rgb(78, 10, 10); /* Dark background color */
}

li {
    float: left; /* Aligns list items horizontally */
}

li a {
    display: block; /* Makes the entire link area clickable and allows padding */
    color: white; /* Text color */
    text-align: center;
    padding: 14px 16px; /* Spacing around the text */
    text-decoration: none; /* Removes the default underline from links */
}

/* Change the background color of links on hover */
li a:hover {
    background-color:rgb(78, 10, 10);
}

/* Style the active or current link */
li a.active {
    background-color: #000a32;
    color: white;
}

.container{
 
  display:flex;
  padding: 10px;
  justify-content: center;

}

#column-kecik{
  display: flex;
  
   background: var();
    min-width: 220px;
    margin: 1em;
    padding: 1em;
    border: 2px dotted var(--link-color);
    box-shadow: var(--button-color) 8px 8px 20px;
    border-radius: 2em;
  
}

#column-about{
background-image: url(crumpled\ paper.png);
  background-position: center;
  background-size: ;
  background-repeat: no-repeat;
  width: 100%; 
    display:flex;
    padding: 10px;
    justify-content:end;
    object-fit: cover;

    border-color: rgb(78, 10, 10);
}

#character{
  width: 150px;           
  height: 150px;  
  ;        
  border-radius: 40%;     
  object-fit: cover;      
  display: block;        
  border: 2px solid #eee;
  margin: 0 auto;
}

#intro{
  font-family: "Reenie Beanie", cursive;
  font-weight: 400;
  font-style: normal;
}

h2{
    font-family: "sans-serif";
    font-weight: 400;
    font-style: normal;
    color: rgb(78, 10, 10);
    line-height: 101%;
    text-align: center;
    margin: auto;
}

#wrapper{
    background-color: antiquewhite;
    width :900px;
    display: block;
    margin: auto 0 ;
    position: center;
    border-radius: 10px;
    border-color: black;


}