* { 
  box-sizing: border-box; 
  margin:0;
  padding:0;
  scroll-behavior:smooth;
  overflow-x: hidden;
  } 
  
  /*navigation top bar */
  
  
  


  /*navigation top bar */
  

  

/*website main header*/


  
  header:not(.basiani){
  background: rgba(0, 0, 128, 0.4);
  color:white;
  font-size:1.8em;
  padding:-4vw;
  margin:0;
  margin-top:2em;
  text-align :center;
  
  }
  
  .basiani{
  background: rgba(0, 0, 128, 0.4);
  color:white;
  font-size:1.8em;
  padding:-4vw;
  margin:0;
  text-align :center;
  margin-bottom:20px;
  }
  
  table{
    margin: 20px 0;
  }
  
  table, th, td {
    border: 2px solid black;
    border-collapse:collapse;
  }
  
  
  #hacking_navbar{
    position:fixed;
    max-width:250px;
    width:10vw;
    left:0;
    top:0;
    
    background:rgba(255, 255, 255, 0.4);
    height:140vh;
    border-right:5px solid black;
    
    
  }
  
  
  #hacking_navbar li{
    max-width:100%;
    font-size:1.5em;
    padding-top:2em;
    border-bottom:4px solid silver;
    z-index:99;
    Opacity:1;  
  }
  

  #hacking_navbar li:hover{
    background-color:black;     
    cursor: pointer;

  }


  #hacking_navbar li:hover a{    
    color:white;  
    

  }


  #hacking_navbar li a {
  color:black;
  text-decoration: none;
  }
  
/*website official navbar ends*/


  section>ul, ol, section>ol, ol>li, section>ul>li{
    padding-left:20
  
  }
  
  h1,h2,h3,h4,h5,h6{
    padding-bottom:10px;
    text-align :center;
  }
  
  ol{
    padding-top:20px;
  }
  
  
  
  
  
  h1 {
    background:rgba(0, 0, 0, 0.8);
    color:white;
    font-size:xx-large;
  
  }
  
  
  
  
  body{  
  position:absolute;  
  width:100%;
  background-image: url('https://github.com/Joloooo/Joloooo.github.io/blob/main/images/square_color_change_blue.png?raw=true');
  background-repeat: no-repeat;
  background-size: cover; /* Adjust as needed */
  background-position: center center; /* Adjust as needed */
  background-attachment: fixed;
  margin-right:0;
  padding-right:0;
  }
  
  main{
    padding-left:10vw;
  }
  
  Footer{
  positon:absolute;
  width:100%;
  background-color:black;
  color:white;
  font-size:1.5em;
  margin-top:25px;
  padding-top:1vh;
  margin-left:10vw;
    height:4vw;
    display:flex;
    flex-direction: row;
    align-items: center;
    text-align: left;    
    font-weight:bold;
    padding-left:0.5em;
    z-index: 1000;
  }
  
   

/* Extra Small Screens (Phones) */
@media only screen and (max-width: 480px) {
  body {
    font-size: 1.6em;
  }

  #hacking_navbar {
    width: 100vw; /* Ensure it extends to the full viewport width */
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 5px solid black;
    margin-bottom: 1vh;
    z-index: 1; /* Corrected z-index typo */
  }

  header:not(.basiani), .basiani {
    font-size: 1.2em;
    margin-top: 0.5em;
  }

  h1 {
    font-size: 1.4em;
  }

  h2 {
    font-size: 1.1em;
  }

  h3 {
    font-size: 0.9em;
  }

  Footer {
    font-size: 1em;
    text-align: center;
    flex-direction: column;
    padding: 10px;
  }

  main {
    padding-left: 2vw;
    padding-right: 2vw;
  }
}