body{
       font-family: 'Source Sans Pro', sans-serif;
       }

       #logo{
       margin: auto;
       display: block;
       }

       #div-navbar{
       margin: 0 auto;
       width: 100%;
       text-align: center;

       }

       #navbar{
       list-style-type: none;
       display: inline-block;
       text-align:center;
       position: relative;
       padding-inline-start: 0px;


       }
       #navbar li{
       display: block;
       float: left;
       padding: 10px;
       margin: 10px;
       }


       .normal{
       color: #333;
       text-decoration: none;
       }

       #navbar li a:hover{
       color: #c3251d;
       text-decoration: underline;
       }

       .active{
       color: #c3251d;
       text-decoration: underline;
       }

       #demo{
       display: inline-block;
       font-size: 78px;
       background-color: red;
       padding: 20px;
       margin: 20px;

       }

@media (max-width: 299px){
       #menu{
       display: flex;
       margin-top: 20px;
       text-align: center;
       justify-content: center;
       gap: 5px;
       margin-bottom: 20px;
       }
       .menu-line{
       width: 20px;
       height: 3px;
       background-color: black;
       margin-bottom: 3px;
       margin-top: 3px;
       position: relative;
       margin-left: auto;
       margin-right: auto;
       }

       #logo{
       margin: auto;
       display: block;
       width: 30%;
       }

       #navbar li{
       float: none;
       }

       .undisplayed{
       display: none;
       }

       }




@media (min-width: 300px) and (max-width: 900px){
       #menu{
       display: flex;
       margin-top: 20px;
       text-align: center;
       justify-content: center;
       gap: 5px;
       margin-bottom: 20px;
       }
       .menu-line{
       width: 20px;
       height: 3px;
       background-color: black;
       margin-bottom: 3px;
       margin-top: 3px;
       position: relative;
       margin-left: auto;
       margin-right: auto;
       }


       #logo{
       margin: auto;
       display: block;
       width: 20%;
       }

       #navbar li{
       float: none;
       }

       .undisplayed{
       display: none;
       }

       }

       @media only screen and (min-width: 901px) {
       #logo{
       width: 10%;
       }
       #div-navbar{
       display: block;


       }
       #menu{
       display: none;
       margin-top: 20px;
       margin-bottom: 20px;
       }

}