*
{ margin:0, padding:0, border 0;}

.container 
{
margin: 0;
padding: 0;
}

.toppic
{
width: 100%;
}

.t1 
{
color: blue;
text-align: center;
text-shadow:2px 3px 8px blue;
font-style: italic;
}

.navbar 
{
color: blue;
background-color: black;
text-align: right;
}

.navbar li 
{
list-style-type: none;
display: inline-block;
padding: 15px 15px 15px 15px;
}

.navbar li a
{
font-weight: bold;
font-size: 25px;
text-decoration-line: none; 
}

a:link {
color: blue;
text-decoration: none;
}
a:hover, a:focus {
color: blue;
text-decoration: none;
border-radius: 25px;
background-color:white;
}
a:visited {
color: red;
text-decoration: none;
}

.middlepic 
{
display: block;
margin-left: auto;
margin-right: auto;
}

h3
{
text-align: center;
}

.writeup1 p 
{
font-size: 20px;
text-align: center;
margin: 0;
padding: 50px;
}

.writeup2 p
{
font-size: 20px;
text-align: center;
margin: 0;
padding: 50px;
}

.footer
{
display: flex;
gap: 2rem;
flex-direction: row;
justify-content: center;
color: blue;
font-size: 10px;
font-style: italic;
font-weight: bolder;
padding-right: 20px;
}
.top
{
  width: 100%;
  margin: 0;
/*  margin: 50px; */
}
}

@media only screen and (min-width: 250px) {
  body {
    background-color: red;
  }

}
@media only screen and (min-width: 650px) {
  body {
    background-color: white;
  }
.container
{
color: blue;
}