#!/usr/bin/env python
# encoding: utf-8
"""
traffic-g.py

Created by Sophia Oladapo on 1/25/23 Jan 25th 2023
Copyright (c) 2023 Copyright Holder. All rights reserved.
"""

import sys
import os
import unittest

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

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

import unittest

:root{
	--font: Montserrat-p, Helvetica;
	--fontm: Montserrat, 'Montserrat', Helvetica;
	--fontb: Montserrat-b, Helvetica;
	--fontp: Montserrat-p, Helvetica;
	--white: #E6E6E6;
	--yellow: #EAE952;
	}
	
	:root { 
	--font: Montserrat-p, Helvetica;
	--fontm: Montserrat, 'Montserrat', Helvetica;
	--fontb: Montserrat-b, Helvetica;
	--fontp: Montserrat-p, Helvetica;
	--white: #E6E6E6;
	--yellow: #EAE952;
	}
/*  */

@font-face{
  font-family: Poppins;
  src: url('../Fonts/Poppins/Poppins-Regular.ttf');
  
  }
  
  
  @font-face{
  font-family: Poppins;
  src: url('Poppins-Regular.ttf');
  
  }
  
   
   
  @font-face{
  font-family: Montserrat;
  src: url('../Fonts/Montserrat/Montserrat-ExtraBold.ttf');
  
  }
  
   @font-face{
  font-family: Montserrat-p;
  src: url('../Fonts/Montserrat/Montserrat-Regular.ttf');
  
  }
  
  
   @font-face{
  font-family: Montserrat-p;
  src: url('Montserrat-Regular.ttf');
  
  }
  
  
   @font-face{
  font-family: Montserrat-b;
  src: url('../Fonts/Montserrat/Montserrat-Bold.ttf');
  
  }
  
  
  @font-face{
  font-family: Montserrat-b;
  src: url('Montserrat-Bold.ttf');
  
  }
  
  

@font-face{
  font-family: Montserrat;
  src: url('Montserrat-ExtraBold.ttf');
  
  }

 *{
 	padding:0;
 	margin: 0;
 	font-family: var(--font);
 	box-sizing: border-box;
 	font-size: medium;
 	color: black;
  text-decoration: none;
 }
   body{
   	
   }
   
   
  .section-1{
  	background: black;
  	width: 100%;
  	padding: 20px;
  	padding-top: 50px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	color: var(--white);	
  	
  }
  
 section{
  width: 100%;
  	padding: 20px;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	color: black;		
 }

 .space{
 padding: 20px 0;
 	
 } 

.space .center{
	color: black;
	padding: 10px;
} 
 
  .section-1 .red{
   	color: var(--white);
   	font-size: x-large; /*30px*/
   	text-align: center;
   	font-family: var(--fontm);
   font-weight: 800;
   margin-top: 10px;
   }
  
   
 h2{
  	font-family: var(--fontm);
  	font-weight: 700;
  	font-size: x-large;
  	color: black;
  	text-align: center;
  	margin: 10px 8px;
  	padding: 5px 0;
  	word-wrap: break-word;
  }

  
 .line{
 	  width: 30vh;
		height: 20px;
		background-color: #ca1010;
		
}
 
 .intro{
 	color: var(--white);
 	font-family: var(--fontp);
 	font-size: medium;
  text-align: center;
  width: 80%;
  margin: 5px 0;
 } 
 
 
 

 u{
 	text-decoration: none;
 	list-style: none;
 	font-size: x-large;
 	font-family: var(--fontm);
 	padding: 4.5px;
 	background-color: var(--yellow);
 	color: black;
 }
   
   
    p{
   	width: 80%;
   	word-warp: break-word;
   	color: black;
   	font-size: medium;
   	margin-top: 10px;
   	white-space: pre-wrap;
   }
  
 
 .center{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: left;
	font-size: medium;
}    
 
 
 .center h2{
 	color: black;
 }

 
  	
  .h1{
  	color: red;
  	margin: none;
  	font-family: var(--fontm);
  	font-weight: 600;
  	font-size: x-large;
  	text-align: left;
  }
 
  
  
  img{
  	width:400px;
  	margin: 10px 0;
  	border: 2px solid black;
  }
  
  b{
  	color: black;
  	font-family: var(--fontb);
  	font-weight: 700;
  	font-size: medium;
  	text-align: left;
  } 

 p b{
 	color: black;
 } 
 
  
  .list{
  	width: 80%;
  	font-size: medium;
   	background-color: #E6F1B4;
   	color: black;
   	white-space: pre-wrap;
   	border: 2px solid black;
   word-wrap: break-word;
   	padding: 20px;
   	margin-top: 15px;
   	margin-bottom: 30px;
  }
  
  .list li{
  	font-family: var(--font);
  	color: black;
  	margin: 0;
  	font-size: medium;
  } 



  #red{
   	  color: black;
   	  text-align: left;
   	  background: yellow;
   	  font-size: medium;
   	  padding: 5px;
   	  margin-top: 10px;
   }
   
   section .red{
   	 color: red;
   	 font-size: x-large;
   	 font-family: var(--fontb);
   }
   
  
 .button{
   	display: inline-block;
   	font-size: medium;
   	color: white;
   	background-color: #CA1010;
   	font-family: var(--fontp);
   	padding: 15px;
   	font-weight: 700;
   	margin-bottom: 20px;
   	text-align: center;
   	border-radius: 50px;
   	width: 60%;
   }
   
   .button:hover{
   	border: 2px solid white;
   }
  
  
  footer{
  	padding: 20px 0;
  	font-size: small;
  	text-align: center;
  	background: black;
  	color: white;
  } 
  
  
  footer a{
  	color: white;
  	text-decoration: underline;
  	font-size: small;
  }
  
  
  
  footer i{
  	color: white;
  }
  
  
   @media (max-width: 900px){
   .section-1{
  	width: 100%;
  	
  }
  
  /* #red = b with yellow background*/
   #red{
   	  font-size: medium;
   	  color: black;
   	  text-align: left;
   }
   
  /*.red = h1*/
   .section-1  section .red{
   	font-size: x-large;
   	text-align: center;
   	width: 100%;
   }
  
  .intro{
  	font-size: medium;
  }
  
    img{
  	width: 300px;
  }
  
  b{
  	text-align: left;
  	font-size: medium;
  }
   
   p{
   	width: 100%;
   	font-size: medium;
   	margin-top: 12px;
   	white-space: pre-wrap;
   	word-warp: break-word;
   	padding: 10px;
 	
   }
   
    .list{
  	width: 100%;
  	font-size: medium;
   	color: black;
   	white-space: pre-wrap;
   	border: 2px solid black;
   word-wrap: break-word;
   	padding: 20px;
  }
  
  
  .box{
  	width: 90%;
  }
  
  
.list, .list li{
 	font-size: medium;
 	 } 
 
 
 span.intro{
  	width: 100%;
  }
 
  .button{
   	display: inline-block;
   	font-size: medium;
   }
   
    h2{
   
    }
   	
   }
   
   
   
   
   @media (max-width: 300px){
   	
    .section-1{
  	width: 100%;
  	
  }
  
  /* #red = b with yellow background*/
   #red{
   	  font-size: medium;
   	  color: black;
   	  text-align: left;
   }
   
  /*.red = h1*/
   .section-1 .red, section .red{
   	font-size: x-large;
   	text-align: center;
   	width: 100%;
   }
  
 .intro{
  	font-size: small;
  }
  
    img{
  	width: 280px;
  }
  
  b{
  	text-align: left;
  	font-size: medium;
  }
   
   p{
   	width: 100%;
   	font-size: medium;
   	margin-top: 22px;
   	white-space: pre-wrap;
   	padding: 10px;
 	
   }
  	
   	
   	
   	
   	
   	
   	
   	
  	}