body {  
  padding: 0px;
  background-color: white;
  color: #000;
  min-width: 100vw;
  font-family: 'Georgia', 'helvetica', helvetica,  serif;
  width: 100vw; 

}  

        @keyframes fadeInAnimation {
      0% {
          transform: translateY(50px);
          opacity: 0%;
      }      
      100% {
          transform: translateY(0px);
          opacity: 100%;
      }
        }
      .fadeIn {
      animation: fadeInAnimation;  
      animation-fill-mode: forwards; 
      animation-duration: 1s; 
      animation-name: fadeInAnimation;
      animation-play-state: running;
      animation-timing-function: 1;
      }  
        

  .kaka, .start {
        animation: kakamoves ease-in-out;
        animation-name: kakamoves;
        animation-duration: 10s;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;
       
    }
    
    @keyframes kakamoves {
     0% {
  box-shadow: 0 0 255px violet, inset 0 0 255px #ff00ff33;
     }
     50% {
     box-shadow: 0 0 255px green, inset 0 0 255px #00ff0033;    
     }
     100% {
         box-shadow: 0 0 255px blue, inset 0 0 255px #0000ff33;
     }
    }
    

    .input-place {
         display: flex;
         flex-direction: row;
         border: 2px solid;
         padding: 5px;
         margin: 10px 20px;
         border-radius: 35px;
         margin-bottom: 20px;
         width: 80vw;
         max-width: 300px;
       
         
     }
 .input-place i {
   font-size : 1.5em;
   position: relative;
   margin-top: 3%;
   padding: 0px 7px;
 }    
 
.spinner {
  width: 22px;
  height: 22px;
  display:none; 
  border: 2px solid color-mix(in srgb, #00000033 60%, transparent);
  border-top-color: black;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

 
.input-place:hover {
      box-shadow: 0 20px 100px #45454566;
      animation: lift 0.5s ease-in-out forwards;
      
 }
    @keyframes lift {
      0% {
          transform: translateY(0px);
      }  
      100% {
          transform: translateY(-10px) scale(1.02);
          
      }
    }
   select {
     
       max-width:240px;
   }
  input {
      transform: scale(0.8);
      background-color: transparent;
  }
   
    select:hover, select:focus,  input:hover, input:focus {
   border-image-width: 0px;
   highlight: 0px;
   outline :none !important;
   cursor: none !important;      
   box-shadow: none !important;
      }
     
     




.box {  
  font-size: 1em;  
  padding: 10px;  
  background-color: #e0e0e0;  
  color: #111;  
  display: flex;  
  flex-direction: row;  
  gap: 5px;  
  width: 250px;  
  border-radius: 5px;  
  align-items: center;  
  margin: 10px;  
  position: relative;  
  box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}  
.kpi {  
  display: flex;  
  flex-direction: row;  
  gap: 5px;  
  margin-left: 10px;  
}  
.kpi-inner {  
  padding: 5px 10px;  
  border-radius: 5px;  
  color: #fff;  
}  
.box .button {  
  color: #fff;  
  background-color: #111;  
  border-radius: 10px;  
  padding: 5px 10px;
}  
.children {  
  margin-left: 100px;  
  padding-left: 25px;  
  border-left: 2px solid #111;        
  display: none;  
  transition: ease-in-out;  
  transition-delay: 2s;  
  position: relative;  
}  

.children > .box::before {  
  content: "";  
  position: absolute;  
  top: 50%;  
  left: -35px;  
  width: 25px;  
  height: 2px;  
  background-color: #111;  
  transform: translateY(-50%);  
}  


.box .name {  
  width: 100px;  
}  

.everything-like::after {
everything: normal;
}

#dark {
    background-color: #000;
    color: white !important; 
    
} 

#dark h1 {
    color: #f0f0f0;
   
}


#header {
  align-items: center;
  position: fixed;
  top: 25%;
  width: 100%;
  height: auto;
  z-index: -1;
  opacity: 0.2;
  width: auto;
  padding: 0px;  
}

h2, h3 {
 opacity: 90%;
}

img {
  max-width: 100%; 
}

.top-bar {
  padding: 10px;
  font-size: 1.6em;
  color: black;
  width: 100%;
  align-items: center;
  text-align: left;
  margin-left: 20px;
  margin-top: 10px;
  justify-content: space-around;
}
.top-bar i {
  margin: 0 10px;
  padding: 5px 10px;
  border-radius: 5px;
  color: black;
}
.top-bar i:hover {
  color: black;
}

.person {
  width: 80%;
  background-color: white;
  color: black;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px;
  padding: 5px 15px;
  margin-bottom: 10px;
}

input[type="checkbox"] {
  accent-color: black;
  width: 20px;
  height: 20px;
  cursor: none;
}

/* Make the focus ring white (invisible on white background) */
input[type="checkbox"]:focus {
  outline: 2px solid white;
  box-shadow: 0 0 0 2px white;
}
input[type="radio"] {
  accent-color: black;
  width: 20px;
  height: 20px;
  cursor: none;
}
input[type="radio"]:focus {
  outline: none;
  border: none;
}

.name {
  flex-grow: 1;
  text-align: left;
}

.check {
  flex-shrink: 0;
}
a {
  text-decoration: none;
  color: black;
  cursor: none;
}
a:hover {
  color: #36406c;
}

h1 i, h1 i {
  margin: 0 5px;
}
footer {
  margin-bottom: 50px;
  text-align: center;
  justify-content: center;
} 

footer a {
  margin: 10px 15%;
  padding: 5px 10px;
  border-radius: 5px;
  border-left: 5px solid black;
  font-weight: bold;
  background-color: #fbfbfb;
  text-align: center;
}
input {
  width: 80%;
  background-color: #f0f0f0; 
  color: black;
}

.input-text {
  flex-grow: 1;
  text-align: left;
}

.input-icon {
  flex-shrink: 0;
  font-size: 1.6em;
  margin-right: 10px;
  margin-top: 5px;
  color: black;
}

input {
  outline: none;  
  border: none;
}
input:focus {
  outline: none;
  border: none;
}

input[type="submit"], button {
  color: white; 
  background-color: black; 
  width: 80%; 
  border-radius: 25px;
  cursor: none; 
  transform: scale(1);
}
.input-capsule {
  display: flex;
  width: 80%;
  background-color: #f0f0f0;
  padding: 0px 5px;
  margin: 10px;
  border-radius: 5px;
}
input[type="submit"]:hover, input[type="submit"]:focus {
  outline-image: linear-gradient(to bottom right, blue, green);
  background-color: black !important;
}
info {
  font-size: 0.8em;
  max-width: 70%;
  opacity: 80%;
}


.dashboard {
  background-image: linear-gradient(to top right, black, #222, #333);
  color: white;
  border-radius: 15px;
  margin: 5%;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.dashboard .item {
  margin: 10px 0;
  transition: opacity 2s linear;
} 
.dashboard .name {
  opacity: 100%;
}
.dashboard .date {
  opacity: 80%;
  font-size: 0.8em; 
  margin-bottom: -5px;
}
.dashboard .toggle {
  opacity: 100%;
  font-size: 1.0em; 
  margin-bottom: -5px;
}
.error {
  color: red;
}
.paragraph {
    color: #111;
    margin: 15px;
    text-align: left;
    
}
.profile {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    object-fit: cover;
    box-shadow: 0px 5px 5px #00000011;
    margin: 0 10px;
}
.posttime {
    display: flex;
    flex-direction: row;
    gap: 5px;
    
    margin: 0px 10px;
    
}
.posttime .time {
    color: #888;
    font-weight: light;
}
.posttime .date {
    color: #111;
}
.posttime .year {
    font-weight: bold;
    color: #000;
}
p .author {
    font-size: 0.7em;
    position: relative;
    top: -20px;
    
    
}
.bottom-bar {
    justify-content: space-around;
    display: flex;
    flex-direction: row;
}