@font-face {
  	font-family: "CuteSunrise";
  	src: url('CuteSunrise.otf') format('opentype');
  }


  body {
  		font-family: "CuteSunrise";
		font-size: 16px;
		color: #061C30;
		background-color: #E8FFF4;
		z-index: 0;
		position: relative;
  } 
  body::before {
  	content: "";
	position: fixed;
    top: 0;
    left: 0;
	width: 100%;
	height: 100%;
  	background-image: url("img/arvoreFundo.png");
  	background-repeat: no-repeat;     
	background-size: cover;           
	background-position: center; 
  	opacity: 0.6;
  	z-index: -1;
  	background-position: center;
  }

 .cabecalho {
			background-color:#05915e;
			height: 80px;
			text-align: right;
		}
	
		.login {
			display: inline-flex;
			justify-content: flex-end;
			padding: 30px;
			text-decoration-color: none;
		}
		.login a {
			color: black;             
			text-decoration: none;     
			margin-top: 1px;
		}

		.login a:visited {
			color: black;            
		}

		.login a:hover {
			color: #f5f5f5;              
		}
	
		.login i { 
  			font-size: 40px;
  			
		}
		.login div{
			visibility: hidden;
			
		}
		.login i:hover{
			 border-radius: 2px;
			 color: #f5f5f5; 
		}
		.login i:hover + div{
			visibility: visible;
			color: #f5f5f5; 
			 
		}
 

		.topnav {
			background-color: #00402e;
			overflow: hidden;
			display: flex;
  		    justify-content: center; 
   			align-items: center; 
   			height: 40px;
   			box-shadow: 5px 10px 20px #7D7D7D;
		}
		.topnav a {
			display: block;
			color: #f2f2f2;
			align-items: center;
			padding: 15px 17px;
			text-decoration: none;             
			font-size: 20px;
			
		}
		.topnav a:hover {
			 background-color: #035C3C;
		}

		

		.contraste {
			left: 80%;
			top: 20px;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
			transition: background 0.2s linear;
		}
		body.dark {
			background: #232c35;
			color: white;
		}	
		body.dark .textoC {
			color: white;
		}	
		body.dark .login a {
			color: #f5f5f5;
		}
		body.dark .login a:hover{
			color: black;
		}
		body.dark .login i:hover{
			 color: black; 
		}
		body.dark .login i:hover + div{
			color: black; 	 
		}
		body.dark .tudo {
			background-image: url("D:siteTCC/img/ "),
			linear-gradient(#75C4D9, #6BFFCF);
		}
		.checkbox {
			opacity: 0;
			position: absolute;
		}
		.label {
			background-color: #232c35;
			border-radius: 50px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 5px;
			position: relative;
			height: 15px;
			width: 43px;
			transform: scale(1.5);
		}
		.label .bola {
			background-color: #fff;
			border-radius: 50%;
			position: absolute;
			top: 3px;
			left: 5px;
			height: 20px;
			width: 20px;
			transform: translateX(0px);
			transition: transform 0.2s linear;
		}
		.checkbox:checked + .label .bola {
			transform: translateX(24px);
		}
		.fa-moon {
			color: #f1c40f;
		}
		.fa-sun {
			color: #f39c12;
		}

		
		.textoC {
			color: rgba(3, 38, 23);
			top: 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			z-index: 1;
			position: fixed;
			left: 30%;
			transition: opacity 0.5s ease;
			pointer-events: none;
		}
		.textoC h1 {
			margin-top: 150px;
			font-family: "CuteSunrise";
		}

		.item {
			 display: flex;
			 align-items: center;
		     justify-content: space-between;
		}
		.texto {
		  width: 500px;
		}
		.texto h3 {
			font-family: "CuteSunrise";
		}
		
		.tudo {
		  display: flex;
		  flex-direction: column;
		  gap: 250px; 
		  max-width: 950px;
		  margin: auto;

		  background-image: 
		  url("img/nuvem.png"), 
		  url("img/nuvem.png"), 
		  url("img/nuvem.png"), 
		  url("img/nuvem.png"),
		  url("img/nuvem.png"),
		  url("img/nuvem.png"), 
		  url("img/nuvem.png"), 
		  url("img/nuvem.png"), 
		  url("img/nuvem.png"), 
		  linear-gradient(#75C4D9, #6BFFCE);
		  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;

		  background-position: 
		   top 50px left 30px,  
		   center 200px,        
		   right 50px top 300px, 
		   center 700px,
		   top 600px left 50px,
		   right 200px bottom 300px,
		   right 100px bottom 200px,
		   left 100px bottom 400px,
		   left 100px bottom 20px,
		   center; 

		  background-size: 
		    150px,
		    200px,
		    120px,
		    250px,
		    120px,
		    130px,
		    100px,
		    200px,
		    120px,
		    cover;

		  border-radius: 10px;
		  margin-top: 350px;
		  padding: 200px;
		  box-shadow: 5px -10px 20px #798FA8;
		  z-index: 2;
		  position: relative;
  		  transition: background-position 0.2s linear;
		}
		
		.conteudoEsquerda {
			 border: 2px solid #061C30;
			 border-radius: 5px;
		     width: 270px;        
	    	 height: 170px;
			 display: flex;
			 justify-content: center;
			 align-items: center;
			 align-self: flex-start;
			 overflow: hidden;
			 transition: transform 0.5s ease;
		}
		.conteudoDireita {
			 border: 2px solid #061C30;
			 border-radius: 5px;
		     width: 270px;        
	    	 height: 170px;
			 display: flex;
			 justify-content: center;
			 align-items: center;
		  	 align-self: flex-end;
		  	 overflow: hidden;
		  	 transition: transform 0.5s ease;
		}
		.hidden {
			opacity: 0;
     	    transition: all 0.8s ease-out;
		}
		.conteudoEsquerda.item.hidden {
		  transform: translateX(-100px);
		}
		.conteudoDireita.item.hidden {
		  transform: translateX(100px);
		}
		.show {
	      opacity: 1;
	      transform: translateX(0);
	    }
		
	    .conteudoEsquerda img,
		.conteudoDireita img {
		  width: 100%;      
		  height: 100%;   
		  display: block;  
		  object-fit: cover; 

		}
		.item:hover
	    {
			box-shadow: 5px 5px 5px 3px rgba(52, 179, 135);
			transform: scale(1.05);
			
		}
	

	   
	footer {
		width: 100%;
		color: #f5f5f5;
		font-family: "Fira Code", Arial, Helvetica, Sans-Serif;
		font-weight: 500;
		margin-top: 40px;
	}

	.footer-link {
		text-decoration: none;
	}

	#footer-content {
		background-color: #05915e; 
		display: flex;
	    justify-content: space-evenly;
		padding: 3rem 3.5rem;
		justify-content: center; 
	    align-items: center;     
	    text-align: center;
	}

	#footer-logo {
		display: flex;
		align-items: center;
		background-color: #05915e;
	}

	#footer-logo img {
		object-fit: cover;
	    height: 100px;
	    width: 100px;
	    image-rendering: auto;
	}

	
	.footer-list {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		list-style: none;
		margin-top: 0;
	    padding-left: 0;
	}

	.footer-list .footer-link {
		color: white;
		transition: all 0.4s;
	}

	.footer-list .footer-link:hover {
		color: #D6D6D6;
	}

	#footer-copy {
		display: flex;
		justify-content: center;
		background-color: #00402e;
		font-size: 1rem;
		padding: 1.5rem;
		font-weight: 300;
		border-style: solid;
		border-width: 1px 0 0;
		border-color: #D6D6D6;
	}

	@media (max-width: 768px) {

  .item {
    display: flex;
    flex-direction: row; 
    align-items: center;
    gap: 10px;
  }

  .texto {
    width: 50%;
    font-size: 14px;
  }

  .conteudoEsquerda,
  .conteudoDireita {
    width: 50%;
    height: auto;
  }

  .conteudoEsquerda img,
  .conteudoDireita img {
    height: auto;
  }

  .tudo {
    padding: 40px 20px;
    gap: 60px;
  }
}