.header
{
    width:100%;
    height:50px;
    background-color: rgb(3, 3, 54);
    color:white;
    

}
.header .left-content{
    float:left;
    font-size: 30px;
    margin-left:20px;
    margin-top: 10px;
}
.header .right-content{
    float:right;
    margin-right:30px;
      font-size: 20px;
      margin-top:10px;;

}
.header .left-content .icon{
    display: none;
}
.header  ul 
{
  list-style: none;
  position: absolute;
 left:-30px;
 top:50px;
 opacity: 0.8;
 width: 100%;
 height:350px;
 background-color: rgb(2, 2, 53);
 
}
.header  ul li a
{
  text-decoration: none;
  display: block;
  font-size: 20px;
  color:yellow;
  padding:10px;
  

}
.header ul li{
    text-align: left;
}
.header  ul li a:hover
{
     
  background-color: black;
  color:cyan;

  
}
#star{
    color:red;
    padding-left:10px;
    font-size:20px;
}
.container .row{
    margin-top:20px;
}
.form-label{
    font-weight: bold;
    font-size: 20px;
}

.container .row .pic .pic1{
    width:30%;
}

.header .right-content a{
  
    margin-right:20px;
    text-decoration: none;
    color:white;

}
@media screen and (max-width:800px)
{
    .header .right-content a{
        display: none;
    }
    .header .left-content .icon{
    display: block;
}
.container .row .pic .pic1{
    width:100%;
}
    
}