*{
  margin:0;
  padding:0;
  box-sizing: border-box;
}

html,body{
  /* font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
  font-family: 'Space Mono', monospace;
  line-height: 1.7em;
  scroll-behavior: smooth;
}

.main_head{
  max-width:1100px;
  min-width: 500px;
  display:flex;
  justify-content: space-around;
  margin:auto;
  overflow:hidden;
  padding-bottom:40px;
  min-width:440px;
  padding-top:20px;
}

.list_main{
  display:flex;
  width:350px;
  justify-content: space-around;
}

.list_main li{
  list-style: none;
}

.list_main a{
  color:black;
  text-decoration: none;
  font-size:20px;
  transition: 0.3s all;
}

.list_main a:hover{
  color:#5500FF;
  cursor: pointer;
}

span{
  transition:0.2s all;
}

span:hover{
  color:#5500FF;
  cursor: pointer;
}

.title{
  color:black;
  transition: 0.3s all;
}

.title_a{
  color:black;
  transition: 0.3s all;
}

.title_a:hover{
  color: #5500FF;
  cursor: pointer;
}

.title:hover{
  color: #5500FF;
  cursor: pointer;
}

.about_head{
  transition: 0.2s all;
  padding-bottom: 20px;
  font-size: 28px;
}

.about_head:hover{
  cursor: pointer;
  color: #5500FF;
}

#about_me{
  display:flex;
  justify-content: space-around;
  align-content: center;
}

.image{
  width:280px;
  height:280px;
  transition: 0.2s all;
  border-radius: 50px;
}

.image:hover{
  box-shadow: 0px 8px 50px rgba(51,255,102,0.7);
  transform: scale(1.05);
  cursor: pointer;
}

.brief{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
  padding-bottom: 20px;
}

.brief_main
{
  display:flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  max-width: 990px;
}

.brief_main p{
  padding-bottom: 8px;
}

.profile_image{
  display:flex;
  justify-content: space-evenly;
  flex-direction: column;
  /* padding-bottom: 35px; */
}

.clr{
  clear: both;
}

#projects{
  display:flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  padding-bottom:10px;
}

.pro_head{
  display: flex;
  transition: 0.2s all;
  padding-bottom:20px;
  font-size: 28px;
}

.pro_head:hover{
  color: #5500FF;
  cursor: pointer;
}

.projects_main{
  display:flex;
  align-items: center;
  justify-content: space-evenly;
  flex-direction: row;
}

.projects_main ul
{
  list-style-type: none;
  display:flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 20px;
}

.projects_main a{
  color:black;
  text-decoration:none;
}

.one,.two{
  display:flex;
  height:35px;
  flex-direction: column;
  border-radius: 50px;
  border-style: solid;
  border-width: 0.1px;
  height:30px;
  border-color: darkgray;
  text-align: center;
  width:350px;
  margin-bottom:10px;
  transition: 0.2s all;
}

.one:hover,.two:hover{
  box-shadow: 0px 8px 50px rgba(0,0,0,0.2);
  transform: scale(1.05);
  cursor: pointer;
  font-weight: bolder;
  color:#5500FF;
  border-color: #5500FF;
}

#skills{
  display:flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 30px;
}

.skills_head{
  padding-bottom: 20px;
  transition: 0.2s all;
  font-size: 28px;
}

.skills_head:hover{
  cursor: pointer;
  color: #5500FF;
}

.skills_main i{
  display:flex;
  flex-direction: column;
  padding-top:10px;
  justify-items: space-around;
  align-items: center;
  float:left;
  padding-left:20px;
  padding-right:20px;
  transition: 0.2s all;
}

.head_last{
  display:flex;
  align-items: center;
  justify-content: center;
}

#last_head h1{
  font-size:15px;
  font-weight: 400;
}

#heart{
  color:red;
  font-size:15px;
}

#contact{
  display:flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  text-align: center;
  padding-bottom: 30px;
}

#contact p{
  padding-top:10px;
  padding-bottom: 10px;
}

.contact_head{
  transition: 0.2s all;
  font-size: 28px;
  padding-bottom: 10px;
}

.contact_head:hover{
  color: #5500FF;
  cursor: pointer;
}

.contact_list a{
  color:black;
  text-docoration:none;
}

.contact_list i{
  transition: 0.2s all;
  padding-left:10px;
  padding-right:10px;
  padding-top:10px; 
}

#email:hover{
  color:#B50000;
  cursor: pointer;
}

#linkedin:hover{
  color:#0087FF;
  cursor: pointer;
}

#reddit:hover{
  color:#B50000;
  cursor: pointer;
}

.dark-mode {
  background-color: #5500FF;
  color: black;
}

.dark-mode:hover{
  color:black;
}


@media(max-width:500px)
{

  .list_main{
    display:flex;
    justify-content:left;
    width:270px;
    justify-content: space-around ;
  }

}