@media (min-width: 1000px)
{


    .Navigation
{
    font-family: Calibri;
    display: flex;
    
    position: absolute;
    top: 20%;
    left: 20px;

    width: 160px;
    height: 200px;
    

    background-color:black;
    border: 3px solid white;
}

     .centeredContainer
    {
	
	position: fixed;
    left: 20%;
	bottom: 0;
	width: 60%;
    }

.textContainer
{
    
    text-align: center;
    position: fixed;
    top: 20%;
    left: 20%;
    width: 50%;
}

a
{
	color:white;
}

body
{

	font-family: Calibri;
    

	background-color: black;

	background-image: url("BG.jpg");
	
	background-repeat: no-repeat;
	background-position: top left;
}



h1 {
    text-align: left;  
    color: white;
    font-size: 2em;
 }
p {

    text-align: left; 
    color: white;
    font-size:1em
}
	




}








@media (max-width: 999px)
{

    .Navigation
    {


        font-family: Calibri;
        
        display:flex;
        position: fixed;
        top: 1%;
        left: 1%;
        width: 98%;
    
        background-color:black;
        border: 1px solid white;
    }

     .centeredContainer
    {
	
	position: fixed;
	bottom: 0;
    left: 5%;
	width: 90%;
}

.textContainer
{
    text-align: center;
    position: fixed;
    top: 15%;
    left: 5%;
    right: 5%;
    width: 90%;
}

a
{
	color:white;
}

body
{

	font-family: Calibri;
    

	background-color: black;

	background-image: url("BG.jpg");
	
	background-repeat: no-repeat;
	background-position: center 20%;
}

h1 {
    text-align: left;  
    color: white;
    font-size: 2em;
 }
p {

    text-align: left; 
    color: white;
    font-size:1em
}
	




}