*{
    margin: 0;
    padding: 0;
}
body{
    background-color: rgb(0,0,33);
    color:white;
    font-family: 'poppins', sans-serif;
}
nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height:80px;
    background-color:rgb(11, 11, 49);
    transition: top 0.3s;
}
nav ul {
    display: flex;
    justify-content: center;
}
nav ul li{
    list-style: none;
    margin: 3px 25px;
}
nav ul li a{
   text-decoration: none;
   color: aliceblue;
}
nav ul li a:hover{
    color:rgb(153, 153, 226);
    font-size:1.01rem;
 }
 .logo{
    position: absolute;
    display: inline;
    margin-left:0%;
 }
 main hr{
    border:0;
    background:rgb(153, 153, 226);
    height:1.2px;
    margin:40px 84px;
 }
.left{
    display: inline-flex;
    font-size: 1.5rem;
    width: 40%;
    align-items: center;
}
.left .name{
    margin-left:53px;
    color: rgb(235, 241, 245);
    font-size:1.5rem;
    font-weight: 600;
}
.left .logo{
    margin-top:19px;
}
.about{
    font-size:17px;
    margin-top:10px;
    margin-bottom:18px;
}
.nametag{
    display:flex;
    flex-direction:row;
    font-size:10px;
}
.box1 .nametag div{
    color: aliceblue;
    margin-left:20px;
}
#cpp{
   margin-left:68px;
   margin-right:30px;
}
#html{
   margin:0px -10px 0px 11px;
}
.firstsection{
    display: flex;
    justify-content: center;
    margin:80px;
    height:350px;
}
.firstsection > div{
    width:50%;
}
.leftsection{
    font-size:1.6rem;
    margin-top: 30px;
    margin-left: 2%;
}
.leftsection .btn{
    color: aliceblue;
    background-color:  rgb(0,0,33);
    padding:7px;
    border:2px solid white;
    border-radius: 5px;
    font-size:10px;
    text-decoration: none;
    font-weight: bold;
  }
  .leftsection .buttons a:hover{
    color:rgb(63, 63, 160);
    font-size:0.7rem;
 }
  .leftsection .btn a{
       text-decoration: none;
  }
.rightsection img{
    height:23rem;
    margin:0 10px 0 20%;
}
.purple{
    color:rgb(103, 7, 193);
    font-weight: bold;
    font-size:50px;
}
#element{
    color:rgb(103, 7, 193);
}
.secondsection{
    margin: auto;
    height:80vh;
    max-width:80vw;
}
.thirdsection{
    margin: auto;
    height:80vh;
    max-width:80vw;
}
.thirdsection h1{
    font-size:1.7rem;
}
.text-gray{
    color:gray;
    font-size:11px;
}
.thirdsection .box{
    background-color: white;
    height:1.5px;
    margin:52px 0px 0px 10px;
    width:80vw;
    display:flex;
}
.thirdsection .vertical{
    background-color: white;
    height:85px;
    width:2px;
    margin:0px 200px 0px -2px
}
.img-top{
    height: 45px;
    width: auto;
    position: relative;
    top:-47px;
    left:-22px;
}
#htmlcss{
    left:-36px;
}
#bootstrap{
    height:37px ;
     left:-22px;
     top:-41px;
}
#js{
    left:-58px;
}
.vertical-text{
    position: relative;
    font-size:16px;
    top:40px;
    width:100px;
    left:-5px;
}
.vertical-desc{
    position: relative;
    top:46px;
    left:-7px;
    color: gray;
    width:150px;
    font-size:9px;
}
#last-text{
    width:80px;
}
#resume{
    width:150px;
}
#dice{
    margin-top:5px;
}
#dice1{
    margin:-40px -10px 0px 5px;
    width:93px;
}
.thirdsection #lastline{
    margin-right:0px;
    margin-left:12px;
}
.box1{
    display:grid;
    grid-template-rows:1fr 1fr 1fr;
    margin-top:20px;
    gap:6px;
    font-weight:500;
    font-size:22px;
}

.box1 div{
    color: rgba(144, 144, 194, 0.865);
}

.images{
    display:grid;
    grid-template-columns:repeat(6,80px);
}
.images img{
    margin-top:20px;
}
.fourthsection{
    margin: auto;
    height:40vh;
    max-width:80vw;
}
footer{
   margin:0px 0px 20px 92px;
   color: rgb(178, 176, 176);
}
.contact{
    display: grid;
    grid-template-rows:40px 40px;
    margin-top:15px;
}
.information{
    display: flex;
}
.information div{
     margin-left:10px;
}
.information a{
    text-decoration:none;
    color: azure;
}
.information a:hover{
    color: rgb(88, 144, 181);
    font-size:17px;
}
.profiles div{
    display:inline-block;
    flex-direction: column;
    margin-top:10px;
    margin-right:10px;
}

.profiles .Leetcode img{
    background-color: rgb(25, 30, 30);
    border-radius:5px;
}
.profiles .GFG img{
    border-radius:50%;
}
.profiles .Git img{
    border-radius:50%;
}
