.navbar {
    overflow: hidden;
    background-color:transparent    ;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%;
    
  }
  
  /* Links inside the navbar */
  .navbar a {
    float: right;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    margin-right: 100px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
  }
  .navbar h4{
    float: right;
   
    margin-right: 540px;

  }
  
  /* Change background on mouse-over */
  .navbar a:hover {
    background: #ddd;
    color: black;
  }
  
  .middle{
    position: relative; 
    margin-top:50px ;
  
  }
  /* Main content */
  .middle img{
    margin-top: 50px;
    margin-left: 50px;
    height: 300px;
    width: 300px;
    border-radius: 50%;

  }
  .mytext{
   position: absolute;
   top:50px;
   left: 500px;
   bottom: 100px;
   font-family: sans-serif;
    
  }
  .middle2{
    position: relative;
    margin-top: 80px;
    margin-left: 50px;
    font-family: sans-serif;
  }
  .skills{
    position: absolute;
    left: 700px;
    bottom:100px;
  }
  .tag-cloud {
    
    display: inline-block;
    color: black;
    padding: 8px 20px;
    border-style: solid;
    border-radius: 10px;
    border-color: black;
    background-color: white;
    margin-top: 8px;
  }
  input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */ 
    border: 1px solid #ccc; /* Gray border */
    border-radius: 4px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
  }
  
  /* Style the submit button with a specific background color etc */
  input[type=submit] {
    background-color: black;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  /* When moving the mouse over the submit button, add a darker green color */
  input[type=submit]:hover {
    background-color: #45a049;
  }
  
  /* Add a background color and some padding around the form */
  .contact {
    margin-top: 100px;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
  }
  .bottom a {
    float: right;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    margin-right: 100px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
  }
  .friend{
    position: relative;
    margin-top: 100px;
    

  }
  .friend img{
    margin-top: 50px;
    margin-left: 50px;
    height: 300px;
    width: 300px;
    border-radius: 50%;
  }
  .friendtext{
    position: absolute;
    left:400px;
    bottom:50px

  }