/* Container for skill bars */
.container {
    width: 100%; /* Full width */
    background-color: #ddd; /* Grey background */
  }
  
  .skills {
    text-align: right; /* Right-align text */
    padding-top: 10px; /* Add top padding */
    padding-bottom: 10px; /* Add bottom padding */
    color: white; /* White text color */
  }
  
  .python {
    width: 85%;
    background-color: #04aa04; /* Green */
    transform: translateZ(10px); /* Add 3D effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow */
  }
  
  .html {
    width: 75%;
    background-color: #8fe41f; /* Green */
    transform: translateZ(10px); /* Add 3D effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow */
  }
  
  .css {
    width: 50%;
    background-color: #f7b830; /* Blue */
    transform: translateZ(10px); /* Add 3D effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow */
  }
  
  .x86 {
    width: 40%;
    background-color: #fffc41; /* Green */
    transform: translateZ(10px); /* Add 3D effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow */
  }

  .js {
    width: 30%;
    background-color: #ffcc41; /* Red */
    transform: translateZ(10px); /* Add 3D effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow */
  }

  .arm {
    width: 30%;
    background-color: #ffcc41; /* Green */
    transform: translateZ(10px); /* Add 3D effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow */
  }
  
  .php {
    width: 10%;
    background-color: #fd1818; /* Dark Grey */
    transform: translateZ(10px); /* Add 3D effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Add shadow */
  }
    /* Make sure that padding behaves as expected */
  * {box-sizing:border-box}
  
  /* Container for skill bars */
  .container {
    width: 100%; /* Full width */
    background-color: #ddd; /* Grey background */
  }
  
  .skills {
    text-align: right; /* Right-align text */
    padding-top: 10px; /* Add top padding */
    padding-bottom: 10px; /* Add bottom padding */
    padding-right: 5px; /* Add right padding */
    color: black; /* White text color */
  }
  .python {width: 85%; background-color: #04aa04;} /* Green */
  .html {width: 75%; background-color: #86d420;} /* Green */
  .css {width: 50%; background-color: #e5ed12;} /* Blue */
  .x86 {width: 40%; background-color: #fffc41;} /* Green */
  .js {width: 30%; background-color: #ffdd00;} /* Red */
  .arm {width: 30%; background-color: #ffdd00;} /* Green */
  .php {width: 10%; background-color: #f2b500;} /* Dark Grey */