body
		       {
                 font-family:arial, calibri, roboto, sans-serif;
				 font-size: large;
				 #background:linear-gradient(90deg, maroon, blue);
				 background:#000;
		       }
			   
			h1{
				color:#fff;
				text-align:center;
				
			}			   
			   
		.cont1  
		    {
			 width:100%;
			 height:5vh;
			 background:#000;
			 display:flex;
			 align-items:center;
			 justify-content:center;
			}

			/*.devicons{
				position: sticky;
				top: 0;
				z-index: 2000;
				background:#000;
			}*/

		
		  .cont a
		    {
		     letter-spacing:2px;
		     text-decoration:none;
		     background:linear-gradient(90deg, blue, maroon);
		     color:#fff;
		     border-radius:40px;
		     padding:12px 36px;
		     margin:40px;
			}
			
		.tp
		    {
			 #background:#2196f3;
			 color:#fff;
			 font-size:80px;
			 font-weight:600;
             margin:20px;			 
			}

		.cont a:hover
		     {
		       box-shadow: 0 0 2px #fff, 0 0 5px #fff, 0 0 10px #fff;
			   transition-delay:0.25s;
			 }
				   
		.cont
		     {
		       background:#2196f3;
			   width:auto;
			   text-align:center;
			   border-radius:10px;
			   margin:50px;
			   padding:20px;
			   float:center;
			   height:auto;
			 }
			 
		.cont:hover
		     {
			  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 17px #fff;
			 }
			   
		img
		    {
		     width:50%;
			 height:50%;
			 display:block;
			 border-radius:10px;
			 margin:auto;
			}
			
			
		video
		    {
		     width:50%;
			 height:50%;
			 display:block;
			 border-radius:10px;
			 margin:auto;
			}
			
			
		p 
            {
             margin: 30px 30px  30px;
             padding: 0;
			 #font-family:cursive;
			 #font-weight:bold;
			 text-align: justify;
			 line-height: 22px;
			}
			
			
.menu-icon {
	position:fixed;
    font-size: 30px;
    cursor: pointer;
    color: #fff;
}

.navbar a {
    display: none;
}

.navbar a:not(.menu-icon) {
    float: center;
    padding: 8px 20px;
    background: #000;
    font-weight: bold;
    border-radius: 10px;
    color: #fff;
    letter-spacing: 2px;
    text-decoration: none;
    font-size: 30px;
}




    
			
	 .navbar a:hover,
	 .navbar a:active
        	{
             background-color: #000;
			 color: #bbb;
            }

       .activ
	        {
             background-color: #2196f3;
            }

       @media screen and (max-width: 500px)
	        {
             .navbar a 
			  {
               float: none;
               display: none;
			   font-size:1em;
			   border-radius:0px;
              }
			  
		.cont:hover
		     {
			  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff;
			 }
			  
			.back-to-top a{
				font-size:25px;
			}
			
		handles.img{
			width:15px;
			height:15px;
		    }
			
			 .cont1
			   {
			    height:60vh;
               }			   
			  
			  h1
				{
				 font-size:40px;
				}
				
			 p{
				 color:#fff;
			 }
			  
		}
			
			
		@media screen and (max-width: 1000px)
	        {
             .navbar a 
			  {
               float: none;
               display: none;
			   font-size:1em;
			   border-radius:0px;
              }
			  
			  .material-icons{
				  font-size:60px;
			  }
			  
			 p{
				 color:#000;
			 }
			  
			  
			.back-to-top a{
				font-size:40px;
			}
			
		handles.img{
			width:15px;
			height:15px;
		}
		
		.cont:hover
		     {
			  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #fff;
			 }
			 
       .menu-icon {
              font-size: 50px;
              color: #fff;			         
			  }
		}
        
		
		
		

        h2
		  {
		   color:#fff;
		   background:#000;
		   padding:10px;
		   margin:50px;
		   border-radius:10px;
		   box-shadow:0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #fff;
		  }
		  
		 h2:hover
		     {
			  #box-shadow:none;
			 }
			
		
        ul
		   {
            color:#3e4290;
		    background:url(Images/Ein.jpg);
			background-attachment:fixed;
			text-align:center;
			list-style:none;
			box-sizing:border-box;
			background-position:center;
			background-size:cover;
			padding:100px;
		   }
			
		ul li{
		         background:#fffa;
				 border-radius:20px;
				 padding:12px;
				 margin:50px;
				 box-shadow: 0 0 2px #2196f3, 0 0 5px #2196f3, 0 0 7px #2196f3, 0 0 10px #2196f3;}

        handles.img
		   {
             height:12em;
             width:12em;
			 margin:auto;
			 display:block;
			 border-radius:100%;
			 border:2px solid #2196f3;
			 box-shadow: 0 0 0 5px #2196f3, 0 0 0 10px #fff;
			}

        ul li a{
           color:#000;
		   text-decoration:none;}

        ul li a:hover{
                color:#fff;}


		   
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #2196f3;
    padding: 10px;
    border-radius: 5px;
    display: none;
}

.back-to-top a {
    color: #fff;
    text-decoration: none;
    font-size: 22px;
}
	
.footnote{
	color:#fff;
	text-align:center;
	font-weight:bold;
}			






/*NAVIGATION BETWEEN LIGHT AND DARKMODE*/

.toggle-container {
    position: fixed;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    color: #fff;
    font-family: 'Material Symbols Outlined', sans-serif;
}

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    margin-right: 10px;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #bbb;
    border-radius: 20px;
    transition: 0.4s;
}

.slider:before {
    position: absolute;
    content: '';
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: #fff;
    border-radius: 50%;
    transition: 0.4s;
}

#darkModeToggle:checked + .slider {
    background-color: #000;
}

#darkModeToggle:checked + .slider:before {
    transform: translateX(20px);
}

.toggle-label {
    font-size: 14px;
}

body.dark-mode{
    background-color: #bde0fe; /* Set the background color for dark mode */
}

.dark-mode p{
	color:#fff;
}

.dark-mode .cont{
	background: #000;
    box-shadow:0 0 2px #bbb, 0 0 5px #bbb, 0 0 10px #bbb;	
}

.dark-mode .cont1{
	background: #bde0fe;
}

.dark-mode .cont:hover{
    box-shadow:0 0 2px #fff, 0 0 5px #fff, 0 0 7px #fff, 0 0 10px #fff, 0 0 12px #fff, 0 0 10px #000, 0 0 15px #000;	
}

.dark-mode h1{
	background:#bde0fe;
	color:#000;	
}

.dark-mode h2{
	background:#2b323c;
	color:#fff;
	box-shadow: 0 0 2px #bde0fe, 0 0 5px #bde0fe, 0 0 7px #bde0fe;
}

.dark-mode .menu-icon {
    font-size: 30px;
    color: #000;
}

.dark-mode .navbar a:not(.menu-icon) {
    float: center;
    padding: 8px 20px;
    background: #bde0fe;
    font-weight: bold;
    border-radius: 10px;
    color: #000;
    letter-spacing: 2px;
    text-decoration: none;
    font-size: 30px;
}

 .dark-mode .navbar a:hover
        	{
			 color: #bbb;
            }
 .dark-mode .footnote{
	color:#000;
	text-align:center;
	font-weight:bold;
}

.dark-mode .back-to-top {
    background: #000;
}

.dark-mode .toggle-container {
    color:#000;
}

		@media screen and (max-width: 1000px)
	        {
             
			 .dark-mode .material-icons{
				  font-size:60px;
			  }
			  
			 
             .dark-mode .menu-icon {
              font-size: 50px;
		      }
	        }