/*Mobile View*/ @media (max-width: 430px){ 
body
{
    background-color: aqua;
}
    
    .sidebar a {
	text-align: center;
	display: block;
	border: 2px black solid;
	background-color: blue;
	padding: 5px 10px 5px 10px;
	width: 250px;
	color: aliceblue;
	font-family: sans-serif;
	text-decoration: none;
   }
    
    .sidebar a.active {
        background-color:#116AD5;
        color: white;
     }
    
    .sidebar a:hover:not(.active) {
        background-color: #555;
        color: white;
     }
    
    nav {
    display: flex;
    justify-content: center;
    }

    
    
    .middle img{
        max-width: 100%;
        height: auto;
        max-height: 100%;
    }
    
h1{
    font-family: fantasy;
        color: black;
    text-decoration: underline;
}
.middle{
    
    display: flex;
    justify-content: center; 
}
    
nav li
{
    font-family: fantasy;
    color: black;
    display: grid;
    text-decoration: underline;
    
}
nav ul{
    display: flex;
    justify-content: center;
    background-color: blueviolet
    padding: 5px
    
}

nav a {
    text-decoration: none;
    font-family: sans-serif;
    
}
p{
    color: black;
font-family: sans-serif;
    background-color: white;
    border: 5px white solid;
    
}
}
/*Tablet View*/ @media (min-width: 431px) and (max-width: 800px) {
    
    body
{
    background-color: salmon;
    
}
    
    
    
   .middle img{
        max-width: 100%;
        height: auto;
    }
        
    ul {
    list-style-type: none;
    text-align: center;
    margin: 5;
    padding: 10;
    background-color: black; 
    overflow: hidden;
   
}

li {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    padding-left: 20px;
    padding-right: 20px;
}

    li a:hover:not(.active) {
    background-color: lightblue;
    
}
    
    
h1{
    font-family: fantasy;
        color: black;
    text-decoration: underline;
}
.middle{
    
    display: flex;
    justify-content: center;
    
}
nav li
{
    font-family: fantasy;
    color: black;
    display: grid;
    text-decoration: underline;
    
}
nav ul{
    display: flex;
    justify-content: center;
    background-color: blueviolet
    padding: 5px
    
}
    
.sidebar  {
list-style-type: none;
    text-align: center;
    margin: 5;
    	width:100%;
    padding: 10px;
    overflow: hidden;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    }

nav a {
    text-decoration: none;
    font-family: sans-serif;
    
}
p{
    color: black;
font-family: sans-serif;
    background-color: white;
    border: 5px white solid; 
}
    a {
        color: black;
    }
}
/*Desktop View*/ @media (min-width: 801px){
    
    body
{
    background-color: lightgoldenrodyellow;
    
} 
  
    .middle{
    
    display: flex;
    justify-content: center; 
}
    
    
    img{
        max-width: 100%;
        height: auto;
    }
    
    
.sidebar {
    list-style-type: none;
    text-align: center;
    margin: 5;
    padding: 10px;
    background-color: black; 
    overflow: hidden;
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
}
    a {
    padding: 5px;
    margin: 5px;
    color: black;
    }


    .sidebar a:hover:not(.active) {
    background-color:lightblue;
        color: white;
    
}
    
h1{
    font-family: fantasy;
        color: black;
    text-decoration: underline;
}
.middle{
    
    display: flex;
    justify-content: center;
    
}
.sidebar
{
    font-family: fantasy;
    color: black;
    display: grid;
    text-decoration: underline;
    
}
.sidebar {
    display: flex;
    justify-content: center;
    background-color: blueviolet
    padding: 5px;
    
}

.sidebar {
    text-decoration: none;
    font-family: sans-serif;
    padding: 15px;
    
}
    
.sidebar a {
    color: white;
    }
    
p{
    color: black;
font-family: sans-serif;
    background-color: white;
    border: 5px white solid;
    
}
    
}
  a {
        color: black;
    }