:root{ 
  --welcome-section:#0F2027;
  
  
}
body{ 
  overflow-x:hidden;
   background: linear-gradient( var(--welcome-section),  #203a43,#2c5364); background-attachment: fixed; background-size: cover; height: auto
  
}
#welcome-section{
  width:100%;
  height:5rem;
  position:relative; 
  justify-content:center;
 
}
#welcome-section>h1{
  visibility:hidden;
}
#welcome-section div> a{ 
  text-decoration:none;
  color:#ffffff;
  font-size:120.5%;
   font-family:Roboto;
}
#navbar{ 
  display:flex;
  justify-content:center;
  padding:50px 10px 10px 10px;
  width:100%;
  height:20px;
  position:relative;
  z-index: 1000;
 top: 0;
}
a > hr {

width : auto;
content:'';
visibility:hidden;

}
a:hover > hr {
visibility:visible;

}

#text-img{ 
  width:100vw;
  height:50vh;
  position:absolute;
  top:20%;
  
}
#text>img{ 
 width:50%;
 height:50%;
 margin-right:20%;
 background-color:transparent;
 margin-top:5%;
 border-radius:25%;
 float:right;
 position:relative;

}
#text {
  color:white;
  padding-left:50px;
  padding-top:50px;
  position:absolute;  
  margin-left:20%;
 
}
#text>h1{ 
    font-size:50px;
    color:white;
    
}
div>p{
  color:white;
  font-size:30px;
}
#projects{
  width:100%;
  height:auto;
 top:100%;
 position:absolute;
 
}
.project-tile{ 
    display: flex;
    gap:10px;
    margin:25px;
    flex-wrap:wrap;
    justify-content:space-evenly;
  }
  #projects>h1{ 
    color:white;
    text-align:center;
    margin:70px;
  }
  .button{ 
    background-color:orange;
    border-style:none;
    width:100px;
    height:50px;
    border-radius:5px;
    cursor:pointer;
  }
  #tirbute{ 
  width: 350px;
  height: auto;
  padding: 10px;
  border: 1px none gray;
  margin: 0;
  background-color:white;
  cursor: pointer;
  }
  #tirbute > img{ 
    width:295vw;
    height:263vh; 
    cursor: pointer;
  }
  #name{ 
    background-color:white;
    text-align:center;
    text-decoration:none;
    cursor: pointer;


  }
  #name:hover{ 
    color:red;
  }
  #tirbute>a{
    text-decoration:none;
    color:black;
    font-size:25px;
  }
  #tirbute>a:hover{
    color:red;
  }
 
  #profile{ 
    top:150%;
    position:relative;
  }
  #profile{
    width:100%;
    height:auto;
    top:110%;
    position:relative;
  }
  .ex{ 
    background-color:orange;
    border-style:none;
    width:100px;
    height:50px;
    border-radius:5px;
    cursor:pointer;
    margin-left:45%;
    cursor:pointer;
  }
  
  #profile-link1>h1{
    text-align:center;
    color:ffffff;
    margin-top:50%;
    position: relative;
    font-family:cursive;
  }
  #profile-link1>p{
     font-size:20px;
     position: relative;
     text-align:center;
  }
 #navigation{
    text-align:center;
    display:flex;
    justify-content:space-evenly;
    gap:0px;
    bottom: 0%;
    color:white;
    position: relative;
    font-size:15px;
  }
  #profile-link{
    target:_blank;
  }
 @media only screen and (max-width: 600px) {
body{
  overflow:hidden;
  .footer{
    position: relative;
    top:auto;
    width:auto;
  }
  .footer>p{
    position: relative;
    top:auto;
    width:auto;
  }

}
}
.footer{
  background-color:black;
  color:white;
  width:100%;
  top:15vh;
  margin-top: 110%;
  bottom:0%;
  position:relative;
  font-size:10px;
  text-align:center;
  left:0px;
}
.footer>p{
  font-size:10px;
  bottom: 0%;
}
#but{
    cursor: pointer;
}