#!/usr/bin/env python
Created by Sophia Oladapo on 7/14/22.
Copyright (c) 2022 Copyright Holder. All rights reserved.
"""

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@500;700;&display=swap');



:root{
	--font: Lato, Helvetica;
	--fontb: Lato-b, Helvetica;
	--blue: #0B99F6; 
	--white: #FFFFFF;
	}
	
	:root { 
  --font: Lato, Helvetica;
	--fontb: Lato-b, Helvetica;
	--blue: #0B99F6; 
  --white: #FFFFFF;
} 
/*  */


@font-face{
  font-family: Lato;
  src: url('../Fonts/lato/Lato-Regular.ttf');
  
  }
  

@font-face{
  font-family: Lato;
  src: url('Lato-Regular.ttf');
  
  }
  
  @font-face{
  font-family: Lato-b;
  src: url('../Fonts/lato/Lato-Heavy.ttf');
  
  }
  
   
  @font-face{
  font-family: Lato-b;
  src: url('Lato-Heavy.ttf');
  
  }
  
  

 *{
 	padding:0;
 	margin: 0;
 	font-family: var(--font);
 	box-sizing: border-box;
 	font-size: 16px;
 	color: black;
  	
 }

  body{
	
   } 
     
 
  .section-1{
  	padding: 30px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
	width: 100%;
  }
  

  .intro2{
  	 font-family: var(--font);
  	 font-size: 15px;
  	 text-align: center;
  	 margin-bottom: 20px;
  }
  
  .flex{
  	display: flex;
   margin: 20px 0; 
  	justify-content: space-around;
   align-items: center;
  	padding: 0 30px;
  } 
  
  
  .section-1 .blue{
   	color: var(--blue);
   	font-size: 30px;
   	text-align: center;
   	font-family: var(--fontb);
   	font-weight: 700;
   padding: 10px 0; 
   }
   

  
 /*
  */
  
  .button{
  	display: block;
  	font-size: 20px;
  	font-family: var(--fontb);
  	background: var(--blue);
  	color: white;
  	padding: 10px 15px;
  	margin: 10px 0;
  	border: none;
  	width: 100%;
  	text-align: center;
  }
  
  span.intro{
   	font-size: 19px;
   	font-family: var(--font);
   	color: black;
   	text-align: center;
   	margin-bottom: 10px;
   }
   

   
   
   #img{
   	  margin: 0 30px; 
   }
   
   	img{
   		border: 2px solid black;
   		width: 500px;
   		padding: 5px;
   		
   	}
 
 
 
  .section-2{
  	background: black;
  	display: flex;
   	flex-direction: column;
   	align-items: center;
   	padding: 40px 0;
  }
  
  /*.section-2:before{
   background: black;
  	content: '';
	width: 100%;
	height: 100%;
  }*/
  
  .section-2 p{
   z-index: 1;
   	width: 90%;
   	color: white;
   	font-size: 22px;
   	margin-top: 20px;
   	white-space: pre-wrap;
   }
 

  
     #form{
  	display: flex;
  	flex-direction: column;
  	align-items: center;
	padding: 40px 20px;
 margin: 0 30px;
  }

 #form  #intro{
  	color: var(--blue);
  	font-family: var(--font);
  	text-align: left;
  	width: 100%;
  	font-size: 20px;
  }
  
 #form h3.intro{
  	font-family: var(--fontb);
  	width: 100%;
  	color: black;
  	font-size: 20px;
  	text-align: left;
  	margin: 5px 0;
  }
 
   
  i{
  	color: white;
  }
  
  b{
  	color: white;
  	font-family: var(--fontb);
  	font-weight: 700;
  	font-size: 22px;
  	text-align: left;
  } 
   	
   	.btn{
   		display: block;
   		font-size: 22px;
   		font-family: var(--fontb);
   		text-align: center;
   		font-weight: 700;
   		padding: 20px;
   		border-radius: 10px;
   		background: var(--blue);
   		color: white;
   		text-decoration: none;
   		margin: 15px 0;
   	}
    

.center img{
	width: 400px;
	margin: 10px 0;
	border: 2px solid white;
}

.red{
	color: red;
	text-decoration: none;
	margin: 0 0 0 0;
	
}

.center{
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	font-family: var(--fontw);
}

 
    		h2{
    			font-family: var(--fontb);
    			font-weight: 700;
    			font-size:  30px;
    			color: var(--blue);
    			text-align: center;
    			margin-top: 50px;
    		}
   
  /*.list{
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	text-align: left;
  	width: 92.5%;
  	padding: 0 20px;
  	margin: 10px 0;
  }  
  */
  
 ul{
	width: 80%;
}

 li{
    	font-size: 22px;
    	font-family: var(--font);
    	color: white;
    	margin: 8px 0;
    }
   
 
 .box{
 	color: white;
 	font-family: var(--font);
 	font-size: 18px;
 	white-space: pre-wrap;
 	background: var(--blue);
 	padding: 20px;
 	width: 80%;
 	border-radius: 10px;
 	margin: 20px 0;
 } 
 
 p a{
 	color: var(--blue);
 	text-decoration: underline;
 	font-family: var(--font);
 }
 
 
   footer{
   	width: 100%;
   	color: white;
   	background: var(--blue);
   	text-align: center;
   	font-size: 17px;
   	padding: 20px;
   } 
   
   footer i{
   	color: white;
   }
   
    @media (max-width: 900px){
  .flex{
  	display: flex;
   flex-direction: column;
   margin: 20px 0; 
  	align-items: center;
  	text-align: center;
  	
  } 
  
    .section-1 .blue{
   	color: var(--blue);
   	font-size: 25px;
   padding: 10px 0;
   margin: 0;
   margin-bottom: 0;
   text-align: center; 
   }	
   
  .intro2{
  	 width: 90%;
  }
  
  #img{
   margin-top: 0;
  	margin-bottom: 30px;
  } 
  
  img{
  	width: 300px;
  }
 

 
.section-2 p{
   z-index: 1;
   	width: 96%;
   	padding: 20px;
   	color: white;
   	font-size: 22px;
   	margin-top: 20px;
   	white-space: pre-wrap;
   }
 

  ul{
	width: 80%;
}

 .center img{
	width: 500px;
	margin: 10px 0;
	border: 2px solid black;
}
   
  ul li{
  	font-size: 20px;
  }
  
   #form{
   	text-align: left;
   	margin: 10px 0;
   }
   
   #form #intro{
   	text-align: left;
   	width: 95%;
   	font-size: 18px;
   }
  
  #form h3.intro{
  	width: 95%;
  }
  
   span.intro{
   	font-size: 18px;
   }
   
   
   h2{
   	   font-size: 25px;
    }
   
 
    }