html,body{
	font-family: 'poppins',sans-serif,Georgia;
}

.nav-link{
	margin-left: 40px;
	font-size: 16px;
	text-align:right;
}

.nav-link:hover{
    color:orange;
}

#topp{
	position: sticky;
	top:0;
	z-index: 2;
	color: white;
	text-align: center;
}




/*dark mode style starts*/
body {
            transition: background-color -1000000s;
        }

        /* Dark Mode Styles */
        body.dark-mode {
            background: #000000;
            color: #ffffff;
        }

        /* Toggle Switch Styles */
        .toggle-switch {
            display: inline-block;
            width: 60px;
            height: 34px;
            position: relative;
        }

        .toggle-switch input[type="checkbox"] {
            display: none;
        }

        .toggle-slider {
            width: 100%;
            height: 100%;
            border-radius: 17px;
            background-color: #ccc;
            position: relative;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .toggle-slider:before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #fff;
            top: 2px;
            left: 2px;
            transition: transform 0.3s;
        }

        .toggle-switch input[type="checkbox"]:checked + .toggle-slider {
            background-color: #00c853; /* Green color when checked */
        }

        .toggle-switch input[type="checkbox"]:checked + .toggle-slider:before {
            transform: translateX(26px);
        }

/*dark mode style ends*/









/*media queries*/
@media only screen and (min-width: 100px) {
	/*smartphone portrait*/
	.all{
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: 100%;
	}

	
	
	
}







@media only screen and (min-width: 480px) {
	/*smartphone landscape*/
	.all{
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: 100%;
	}

	

	
}








@media only screen and (min-width: 768px) {
	/*tablet portrait*/
	.all{
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: 70%;
	}
}







	

@media only screen and (min-width: 1024px) {
	/*tablet/desktop landscape*/
	.all{
		margin-right: auto;
		margin-left: auto;
		display: block;
		width: 70%;
	}

	
}



/*rotating an image script*/

@keyframes rotation{
      from{
        transform: rotate(0deg);
      }to{
        transform: rotate(359deg);
      }
    }


/*moving marquee script*/
.marquee{
    background: red;
    white-space: nowrap;
    -webkit-animation:rightThenLeft 10s linear;
  }