html {
    scroll-behavior: smooth;
  }
  

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

  h3{
    color:white;
  }

  #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(110, 110, 110) ;
      font-family: 'Asap', sans-serif;
      background-size:cover;
      padding: 0;
      margin:0;
      color:white;
    
     
  
  
  }
  
  


  #pargraph {
    text-align: center;
    color:rgb(139, 131, 131);
    font-family: 'Asap', sans-serif;
  
  }
  h3{
    color:coral;
  }
  
  
  
  .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(26, 26, 26);
  
      padding:30px;
      
      text-decoration: none;
      color:white;
      padding-bottom: 50px;
      padding-top:50px;
      
      
      box-shadow: 2px -3px 7px rgb(255, 255, 255);

  
  
  }
   .button:hover {
    transition: 1s;
    box-shadow: 1px -3px 20px rgb(255, 255, 255);
  }
  
  .button:active {
    box-shadow: 10px -3px 3px rgb(53, 53, 53);
  }
  
  
  
  
    
  /* ------------------------------------------ L O B B Y --------------------------------------------- */
    
    ul {
        margin: 0;
        padding: 0;
         list-style: none;
        
        
     }
     ul li {
    
     float: left;
     width: 200px;
     height: 40px;
     background-color: rgb(255, 255, 255);
     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: rgb(26, 26, 26);
         display: block;
         
         border-radius: 9cm;
         
     }
     ul li a:hover {
       transition: 1s;
       background-color: rgb(51, 49, 49);
       color:rgb(255, 253, 253);
      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;
        
    
    
        
      
        
     }
    
     .title{
       text-align: center;
       color:white;
     }
  
    
    
     .menu{
        position: fixed;
        background-color:rgb(27, 27, 27);
        /* 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;
      
  
     }
  
     .white-mode {
       position: absolute;
       color:rgb(27, 27, 27);
       text-align: right;
       padding-right:3px;
       background:rgb(252, 252, 252);
       
       padding: 10px;
       border-radius: 15px;
       text-decoration: none;
     
       margin-left:90%; 
      
       
     }

     #social{
      margin-top:1cm;
     }

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

 

    

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

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

     a{
        text-decoration: none;
        color:rgb(0, 0, 0);
      }
  
  
     .marging{
      padding-top: 15px;
      padding-left: 10px;
     }
  
    
  
  
  
  /* ------------------------------------------ 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:white;
    background-color: rgb(22, 22, 22);
  
    
    
    
  }
  @media (max-width: 805px) {
    #welcome{
      top:293px;
      height: 3300px;
    }
  }
  
  
  
  
  
  /* ---------------------------------------------- C A R D - G A M E-------------------------------------------------------------- */
    
    

  
  
  #game {
    position: absolute;
    top: 3500px;
    background:rgb(46, 46, 46);
    padding:20px;
    border-radius:15px;
    right: 89px;
    left:1cm;
    
   border:solid rgb(255, 255, 255) 1px;
  
  }
 

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

    
    

  
    #games {
      background: #f8f8f8;
      padding: 20px;
      border-radius: 15px;
      text-decoration: none;
      
      color:black;
  
    }
  
  
  
    
  
  
  
     .border {
      display:inline-block;
      align-content: center;
      
      border-radius: 15px;
    
     padding-top:40px;
   
      margin:0;
      color:white;
  
  
      
      
      
    }
  
    
    
    .card{
      width: 200px; 
      overflow: hidden;
      background-color: #212121;
       
      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: #212121;
       
      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: #212121;
      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: #212121;
       
      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: #212121;
       
      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: #212121;
       
      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: #212121;
       
      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: #212121;
       
      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: #212121;
       
      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: #212121;
       
      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 -5px 90px  #494949;
        
        box-shadow: 0 4px px rgba(0,0,0,0.2);
  
      }
      .card1:hover{
        
        
        box-shadow: 10px -5px 90px  #494949;
        
        box-shadow: 0 4px px rgba(0,0,0,0.2);
  
      }
  
      .card2:hover{
        
       
        box-shadow: 10px -5px 90px  #494949;
        
        box-shadow: 0 4px px rgba(0,0,0,0.2);
  
      }
  
      .card3:hover{
        
        box-shadow: 10px -5px 90px  #494949;
        
        box-shadow: 0 4px px rgba(0,0,0,0.2);
  
      }
  
      .card4:hover{
        
        box-shadow: 10px -5px 90px  #494949;
        box-shadow: 0 4px px rgba(0,0,0,0.2);
    
        }

        .card5:hover{
        
          box-shadow: 10px -5px 90px  #494949;
          box-shadow: 0 4px px rgba(0,0,0,0.2);
      
          }

          .card6:hover{
        
            box-shadow: 10px -5px 90px  #494949;
            box-shadow: 0 4px px rgba(0,0,0,0.2);
        
            }

            
          .card7:hover{
        
            box-shadow: 10px -5px 90px  #494949;
            box-shadow: 0 4px px rgba(0,0,0,0.2);
        
            }
            .card8:hover{
        
              box-shadow: 10px -5px 90px  #494949;
              box-shadow: 0 4px px rgba(0,0,0,0.2);
          
              }
  
              
            .card9:hover{
          
              box-shadow: 10px -5px 90px  #494949;
              box-shadow: 0 4px px rgba(0,0,0,0.2);
          
          }
      
    
    .banner{
      height: 100px;
      width: 100%;
      padding-top: 30px;
      background-color: #212121;
            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;   
    }
    
  
    #game::-webkit-scrollbar {
      width: 5px;
    }
    
    #game::-webkit-scrollbar-track{
      background: rgb(197, 197, 197);
    }
    
    #game::-webkit-scrollbar-thumb{
      background: rgb(105, 105, 105);
    } 
   
    
    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;
        
      }
    
      .a{
        display: block;
        padding: 5px 0px;
        font-size: 14px;
        color: #9E9E9E;
        text-decoration: none;
      }
    
        .a:hover{
          background-color: rgb(82, 80, 80);
          color: inherit;
        }
    
    .ul{
      margin-top: 10px;
      padding: 15px 0px;
      background-color: rgb(54, 54, 54);
      
    }
    
      .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(255, 255, 255) 2px;
  border-radius: 15px;
background:rgb(51, 51, 51);
right:100px;
}

  


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

#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 #ccc;
}

#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: #fff;
  background: #242424;
  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: #2b2b2b;
}

#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(255, 255, 255)!important;
font-size: 16px;

} 
  
.mobile {
  display:block;
 
  color: rgb(252, 252, 252);
  background:rgb(65, 63, 63);
  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);
}