html {
  scroll-behavior: smooth;
}



#me{
  filter: grayscale(100%);
  border-radius: 12px;
}

#me:hover{
  transition: 1s;
  filter: grayscale(0%);
  width: 319px;
  border-radius: 15px;
  box-shadow: 10px -3px 60px rgb(104, 104, 104);
  box-shadow: 0 4px px rgba(0,0,0,0.2);
}



body {
    background-color:rgb(92, 92, 92) ;
    font-family: 'Asap', sans-serif;
    background-size:cover;
    padding: 0;
    margin:0;
    
   


}




#pargraph {
  text-align: center;
  color:rgb(139, 131, 131);
  font-family: 'Asap', sans-serif;

}


.button1 {
  position: relative;
  border-radius: 100%;
  bottom:60px;
  font-size:30;
  background-color: rgb(245, 45, 22);

  padding:30px;
  
  text-decoration: none;
  color:white;
  padding-bottom: 50px;
  padding-top:50px;
  box-shadow: 5px 5px 3px rgb(189, 9, 9);
  



}
.button1:hover {
transition: 1s;
box-shadow: 1px -3px 20px rgb(172, 17, 17);
}

.button1:active {
box-shadow: 10px -3px 3px rgb(172, 17, 17);
}


.button {
    border-radius: 100%;
    font-size:30;
    background-color: rgb(223, 223, 223);

    padding:30px;
    
    text-decoration: none;
    color:rgb(0, 0, 0);
    padding-bottom: 50px;
    padding-top:50px;
    box-shadow: 2px -3px 7px rgb(59, 59, 59);



}
 .button:hover {
  transition: 1s;
  box-shadow: 1px -3px 20px rgb(43, 43, 43);
}

.button:active {
  box-shadow: 10px -3px 3px rgb(58, 58, 58);
}




  
/* ------------------------------------------ L O B B Y --------------------------------------------- */
  
  ul {
      margin: 0;
      padding: 0;
       list-style: none;
      
      
   }
   ul li {
  
   float: left;
   width: 200px;
   height: 40px;
   background-color: black;
   opacity: .8;
   line-height: 40px;
   text-align: center;
   font-size:20px;



   
   
   box-shadow: 5px 5px rgba(45, 45, 45, 0.13);
   
   
   
   
   }


   
   
   
   ul li a {
       text-decoration: none;
       color: white;
       display: block;
       
       border-radius: 9cm;
       
   }
   ul li a:hover {
     transition: 1s;
     background-color: white;
     color:black;
    border-radius: 0%;
    cursor: pointer;
   }
   
   ul li ul li {
     
       display: none;
       
   }
   ul li:hover ul li {
       display: block;
      
   }
   
   
   .logo {
      float:left;
      width: 2cm;
      padding-bottom: 4px;
      
  
  
      
    
      
   }
  

  
   .menu{
      position: fixed;
      background-color:white;
      /* padding-right:10cm; */
      padding-bottom: 2px;
      
      padding-right: 0px;
    height: 100px;
    right: 0px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    
      
     box-shadow: 5px 5px rgba(45, 45, 45, 0.16);
    z-index: 99;
    

   }

   .dark-mode {
     position: absolute;
     text-align: right;
     
    
     background:rgb(75, 73, 73);
     background: #212121;
     padding: 10px;
     border-radius: 15px;
     text-decoration: none;
     color:white;
     margin-left:90%; 
    
   }
   .title{
    text-align: center;
    color:rgb(7, 7, 7);
  }

  

   .dark-mode-mobile {
    position: absolute;
    right:100px;
    top:1px;
    
   
    background:rgb(75, 73, 73);
    background: #212121;
    padding: 5px;
    padding-left:40px;
    padding-right:40px;
    border-radius: 15px;
    text-decoration: none;
    color:white;
    margin-left:50%; 
    
   
  }



  #social{
    margin-top:1cm;
   }

  .go-social{
    margin-left:10px;
    border-radius: 100%;
 
    
  }



  .go-social:hover{
    transition: 1.0s;
   width:40px;
   border:solid rgb(0, 0, 0) 3px;
   
  }


   .marging{
    padding-top: 15px;
    padding-left: 10px;
   }
   a{
     text-decoration: none;
     color:white;
   }

  



/* ------------------------------------------ L O B B Y --------------------------------------------- */
#welcome {
   
  padding-top:7px;
  position: absolute;
  border-radius: 15px;
  top: 100px;
  height: 3090px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  color:rgb(46, 46, 46);
  background-color: rgb(255, 255, 255);

  
  
  
}

@media (max-width: 805px) {
  #welcome{
    top:293px;
    height: 3300px;
  }
}






/* ---------------------------------------------- C A R D - G A M E-------------------------------------------------------------- */
  




 
#game {
  position: absolute;
  top: 3500px;
  background:rgb(216, 216, 216);
  padding:20px;
  border-radius:15px;
  right: 73px;
  left:1cm;
  
 border:solid rgb(0, 0, 0) 1px;

}
 

@media (max-width: 768px) {
  #game{
    top:3800px;
    right:68px;
   
    
    
  }
}

  
  


  #games {
    background: #222222;
    padding: 20px;
    border-radius: 15px;
    text-decoration: none;
    
    color:rgb(255, 255, 255);

  }
  
  
  
  
  
  
     .border {
      display:inline-block;
      align-content: center;
      
      border-radius: 15px;
    
     padding-top:40px;
   
      margin:0;
     
  
  
      
      
      
    }
  

  
  
  .card{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }


  .card1{
    width: 200px;
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }
  

  .card2{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }


  .card3{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
    
  }

  .card4{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
 
  }

  .card5{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
 
  }

  .card6{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
 
  }

  .card7{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
 
  }

  .card8{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
 
  }

  .card9{
    width: 200px; 
    overflow: hidden;
    background-color: #FFFFFF;
     
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
 
  }

    .card:first-of-type{
      margin-right: 25px;
      
    }
    .card1:first-of-type{
      margin-right: 25px;
      
    }

    .card2:first-of-type{
      margin-right: 25px;
      
    }

    .card3:first-of-type{
      margin-right: 25px;
      
    }

    .card4:first-of-type{
      margin-right: 25px;
      
    }

    
    .card5:first-of-type{
      margin-right: 25px;
      
    }

    .card6:first-of-type{
      margin-right: 25px;
      
    }
    .card7:first-of-type{
      margin-right: 25px;
      
    }

    .card8:first-of-type{
      margin-right: 25px;
      
    }
    .card9:first-of-type{
      margin-right: 25px;
      
    }

    .card:hover{
    
      
    box-shadow: 10px -3px 60px rgb(247, 241, 241);
    box-shadow: 0 4px px rgba(0,0,0,0.2);

    }
    .card1:hover{
      
      
    box-shadow: 10px -3px 60px rgb(247, 241, 241);
    box-shadow: 0 4px px rgba(0,0,0,0.2);

    }

    .card2:hover{
      
     
    box-shadow: 10px -3px 60px rgb(247, 241, 241);
    box-shadow: 0 4px px rgba(0,0,0,0.2);

    }

    .card3:hover{
      
    box-shadow: 10px -3px 60px rgb(247, 241, 241);
    box-shadow: 0 4px px rgba(0,0,0,0.2);

    }

    .card4:hover{
      
      box-shadow: 10px -3px 60px rgb(247, 241, 241);
      box-shadow: 0 4px px rgba(0,0,0,0.2);
  
      }

      .card5:hover{
      
        box-shadow: 10px -3px 60px rgb(104, 104, 104);
        box-shadow: 0 4px px rgba(0,0,0,0.2);
    
        }
        
      .card6:hover{
      
        box-shadow: 10px -3px 60px rgb(104, 104, 104);
        box-shadow: 0 4px px rgba(0,0,0,0.2);
    
        }

        .card7:hover{
      
          box-shadow: 10px -3px 60px rgb(104, 104, 104);
          box-shadow: 0 4px px rgba(0,0,0,0.2);
      
          }

          .card8:hover{
      
            box-shadow: 10px -3px 60px rgb(104, 104, 104);
            box-shadow: 0 4px px rgba(0,0,0,0.2);
        
            }
    
            .card9:hover{
          
              box-shadow: 10px -3px 60px rgb(104, 104, 104);
              box-shadow: 0 4px px rgba(0,0,0,0.2);
          
              }
  


  
  .banner{
    height: 100px;
    width: 100%;
    padding-top: 30px;
    background-color: rgb(182, 165, 165);
    background-size: cover;
    background-position: center;
  }

  
  
    .card:first-of-type .banner{
      background-image: url("images/avatar.jpg");
   
      
    }

    .card1:first-of-type .banner{
      background-image: url("images/avatar1.jpg");
   
      
    }


    .card2:first-of-type .banner{
      background-image: url("images/avatar2.png");
   
      
    }

    .card3:first-of-type .banner{
      background-image: url("hangman/DONT-TOUCH/hangman.png");
   
      
    }

    .card4:first-of-type .banner{
      background-image: url("Tictactoe/Tic.jpg");
   
    
    }

    .card5:first-of-type .banner{
      background-image: url("images/header.jpg");
   
    
    }

    .card6:first-of-type .banner{
      background-image: url("images/avatar3.jpg");
   
    
    }

    .card7:first-of-type .banner{
      background-image: url("images/avatar4.jpg");
   
    
    }

    .card8:first-of-type .banner{
      background-image: url("ludo-multiplayer-master/icon-256.png");
   
    
    }

    .card9:first-of-type .banner{
      background-image: url("");
   
    
    }




  
  
  

    


    
  
  .avatar{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color:  #212121;
border-radius: 100%;
    background-image: url("images/avatar.jpg");
    border: #212121 solid 5px;
  }

  .avatar1{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: rgb(58, 58, 59);
    border-radius: 100%;
background-image: url("../snake/Snake-game-v2.0/img/Logo.png");
    border: #212121 solid 5px;
  }

  .avatar2{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: #212121;
          border-radius: 100%;
    background-image: url("images/avatar2.png");
    border: #212121 solid 5px;
  }

   
  .avatar3{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: #212121;
          border-radius: 100%;
    background-image: url("hangman/DONT-TOUCH/hangman.png");
    border: #212121 solid 5px;
  }

  .avatar4{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: #212121;
          border-radius: 100%;
    background-image: url("Tictactoe/Tic.jpg");
    border: #212121 solid 5px;
  }

  .avatar5{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: #212121;
          border-radius: 100%;
    background-image: url("images/header.jpg");
    border: #212121 solid 5px;
  }

  .avatar6{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: #212121;
          border-radius: 100%;
    background-image: url("images/avatar3.jpg");
    border: #212121 solid 5px;
  }

  
  .avatar7{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: #212121;
          border-radius: 100%;
    background-image: url("images/avatar4.jpg");
    border: #212121 solid 5px;
  }

  .avatar8{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: #212121;
          border-radius: 100%;
    background-image: url('ludo-multiplayer-master/icon-256.png');
    border: #212121 solid 5px;
  }
  .avatar9{
    height: 100px;
    width: 100px;
    margin: auto;
    background-size: cover;
    background-position: center;
    background-color: #212121;
          border-radius: 100%;
    background-image: url("");
    border: #212121 solid 5px;
  }




  
  h3, .a, .i{
    font-family: 'Roboto', sans-serif;
    font-weight: lighter;
    -webkit-transition: .1s ease-in-out;
    transition: .1s ease-in-out;
  }
  
    h3{
      margin-top: 45px;
      margin-bottom: 5px;
      font-size: 18px;
      color: #212121;
      
    }

    #game::-webkit-scrollbar {
      width: 5px;
    }
    
    #game::-webkit-scrollbar-track{
      background: rgb(197, 197, 197);
    }
    
    #game::-webkit-scrollbar-thumb{
      background: rgb(105, 105, 105);
    }
    
  
    .a{
      display: block;
      padding: 5px 0px;
      font-size: 14px;
      color: #9E9E9E;
      text-decoration: none;
    }
  
      .a:hover{
        background-color: #FAFAFA;
        color: inherit;
      }
  
  .ul{
    margin-top: 10px;
    padding: 15px 0px;
    background-color: #FAFAFA;
    
  }
  
    .ul .a{
      display: inline;
      margin-right: 10px;
    }
  
      ul a:last-of-type{
        margin-right: 0px;
      }
  
        .ul .a .i:hover{
          transform: scale(1.5);
        }
        


/* ---------------------------------------------- C A R D - G A M E-------------------------------------------------------------- */



::-webkit-input-placeholder{color: #777;}
:-moz-placeholder { /* Firefox 18- */ color: #777;}
::-moz-placeholder {  /* Firefox 19+ */ color: #777;}
:-ms-input-placeholder {color: #777;}

#cont{
  position: absolute;
  width: 60vw;
	padding: 3em 11em;
  margin: auto;
  top: 4500px;
  border: solid rgb(51, 51, 51) 2px;
  border-radius: 15px;
  background:rgb(255, 255, 255);
  
right:100px;
}


#cont h2{
	text-align: center;
	text-transform: uppercase;
	color: rgb(0, 0, 0);
}

#contact input[type="text"],#contact input[type="email"], #contact textarea{
	display: block;
	padding: 10px;
	margin: 10px auto;
	width: 100%;
	font-size: 18px;
	color: #777;
  border: 1px solid rgb(34, 34, 34);
}

#contact textarea{
	font-size: 16px;
}

#contact textarea{
	max-width: 100%;
	min-width: 100%;
	max-height: 180px;
	min-height: 180px;
  resize: none;
}

#contact .send-button{
	text-align: center;
}

#contact .send-button button[type="submit"]{
	color: rgb(5, 5, 5);
  background: #e9e9e9;
  border:px 0;
	font-size: 20px;
	width: 100%;
	padding: 10;
	text-transform: uppercase;
	transition: .5s all ease;
  cursor: pointer;
}

#contact .send-button button[type="submit"]:hover{
	background: #ffffff;
}

#contact .send-button button[type="submit"]:focus{
	position: relative;
	top: 2px;
}
@media screen and (max-width: 1025px){
	#cont{
    position: relative;
    width: 90%;
    padding:5px;
    top:4700px;
    right:0;
    
    
  }

  
  #contact textarea{
    max-width: 98%;
    min-width: 98%;
    min-height: 152px;
    margin-right: 0;
  }

	#contact .right,#contact .left{
		display: block;
	}

	#contact .right{
		float: right;
		width: 50%;
	}
  
	#contact .left{
		float: left;
		width: 50%;
	}
	.cl{
    clear: both;
  }
}




  
  
  
  
  
  
    
.style{
  font-family: 'Lato', sans-serif;
font-weight: 400;
color: rgb(0, 0, 0)!important;
font-size: 16px;

} 
  
.mobile {
  display:block;
 
  color: rgb(0, 0, 0);
  background:rgb(255, 255, 255);
  font-size: 30px;
  padding: 20px;
  cursor: pointer;
  user-select: none;
  outline: none;
  text-align: right;
  box-shadow: 5px 5px rgba(0, 0, 0, 0.521);

 
    padding-bottom:30px;

  
  
}
@media (min-width: 798px) {
  .mobile {
    display: none;
  }
}
.mobile-panel {
  display: none;
}
.mobile-panel a {
  text-decoration: none;
}
.mobile-toggle {
  position: absolute;
  opacity: 0;
}
.mobile-toggle:checked ~ .mobile-panel {
  display: block;
}
.mobile-toggle:checked ~ .burger span:first-child {
  display: none;
}
.mobile-toggle:checked ~ .burger span:last-child {
  display: block;
}

.burger span:last-child {
  display: none;
}

.main {
  display: flex;
  justify-content: space-between;
}

.menu {
  display: none;
}
@media (min-width: 798px) {
  .menu {
    display: block;
  }
}
.menu .mobile-menu {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  top: 0;
  background-color: #27ae60;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 9999999;
}
.menu .mobile-menu__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 30px;
  cursor: pointer;
  transition: 0.4s;
}
.menu .mobile-menu__icon {
  display: block;
  position: relative;
  background: white;
  width: 90%;
  height: 4px;
  transition: 0.4s;
}
.menu .mobile-menu__icon::after, .menu .mobile-menu__icon::before {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 4px;
  transition: 0.4s;
}
.menu .mobile-menu__icon::after {
  top: 8px;
}
.menu .mobile-menu__icon::before {
  top: -8px;
}
.menu .mobile-menu__container {
  position: fixed;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 999;
  height: 0;
  opacity: 1;
  transition: 0.5s;
  transition-delay: 0.2s;
  overflow: hidden;
  background-color: #27ae60;
}
.menu .mobile-menu__list {
  transition: 0.5s;
  transition-delay: 0.5s;
  list-style: none;
  padding-left: 0;
  margin-top: -50px;
}
.menu .mobile-menu__item {
  font-size: 26px;
  padding-bottom: 15px;
}
.menu .mobile-menu__link {
  text-decoration: none;
  color: #fff;
}
.menu .mobile-menu__checkbox {
  display: none;
}
.menu .mobile-menu__checkbox:checked ~ .mobile-menu__nav {
  opacity: 1;
  transition-delay: 0s;
}
.menu .mobile-menu__checkbox:checked ~ .mobile-menu__container {
  height: 100%;
  transition-delay: 0s;
}
.menu .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
  background: transparent;
}
.menu .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .menu .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  top: 0;
}
.menu .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.menu .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}