#toggler {
    background-image: url("images/plane.gif");
    background-size: 90%;
    transition: background-image 0.5s ease;
}

#toggler.light-mode {
    background-image: url('images/plane.gif');
}

#toggler.dark-mode {
    background-image: url('images/nightplane.gif');
}

#toggler.dark-mode .mode-button {
    color: white;
    transition: all 0.5s ease;
}

#toggler.dark-mode #intro h1 {
    color: yellow;
    transition: all 0.5s ease;
}

#toggler.dark-mode #intro p {
    color: white;
    transition: all 0.5s ease;
}

#toggler.dark-mode .button1 {
    border: 2px solid white;
    transition: all 0.5s ease;
}

#toggler.dark-mode .button a {
    color: white;
    transition: all 0.5s ease;
}


.navbar {
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    background-color: transparent;
}

.mode-button {
    margin-left: 10px;
    padding: 8px 16px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.mode-button:hover {
    background-color: rgb(183, 178, 178);
    transition: all 0.5s ease;
}

#intro {
    position: absolute;
    margin-top: 50;
    margin-bottom: 50;
    margin-left: 20;
    width: 40%;
    height: 70%;
    border: 2px solid transparent;
    border-radius: 20px;
}

#intro img {
    border-radius: 9px;

}

#intro:hover {
    transform: scale(1.05);
    transition: all 0.5s ease;
}

#intro:hover p {
    color:rgb(50, 111, 225);
    transition: all 0.5s ease;
}

#intro:hover h1 {
    color:rgb(233, 225, 135);
    transition: all 0.5s ease;
}



h1 {
    text-align: center;
    font-family: cursive;
    color: rgb(198, 198, 176);
}

p {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(112, 151, 223);
    padding: 2px 2px;
    font-size: larger;
}

.slideshow-container {
    margin-top: 50;
    margin-bottom: 50;
    margin-right: 20;
    position: relative;
    width: 40%;
    height: 55%;
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 200px;
    float: right;
}





.slideshow-container:hover {
    border-color: darkblue;
    transform: scale(1.05);
    transition: all 0.5s ease;
}


  
 
.mySlides {
    display: none;
}
  
  

  
  


.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

  
  
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.button {
    float: right;
    border: none;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    transition-duration: 0.4s;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

.button1 {
    background-color: transparent; 
    color: black; 
    border: 2px solid #000000;
    border-radius: 10px;
}
  
.button1:hover {
    background-color: #4191f371;
    color: white;
}

.left {
    float:left;
    width: 80px;
    height: 50px;
}

.goback{
    height: 30px;
    width: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-decoration: underline;
}


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

/*HELLO TOGGLE*/

		
	/* toggle in label designing */
	.toggle {
		position : relative ;
		display : inline-block;
		width : 100px;
		height : 52px;
		background-color: white;
		border-radius: 30px;
		border: 2px solid gray;
	}
		
	/* After slide changes */
	.toggle:after {
		content: '';
		position: absolute;
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: black;
		top: 1px;
		left: 1px;
		transition: all 0.5s;
	}
		
	/* Toggle text */
	p {
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
	}
		
	/* Checkbox checked effect */
	.checkbox:checked + .toggle::after {
		left : 49px;
        background-color: white;
	}
		
	/* Checkbox checked toggle label bg color */
	.checkbox:checked + .toggle {
		background-color: black;
	}
		
	/* Checkbox vanished */
	.checkbox {
		display : none;
	}