@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Oswald:wght@300&family=Quicksand:wght@300;600&family=Roboto:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Oswald:wght@300&family=Quicksand:wght@300;600&family=Roboto+Mono:wght@300&family=Roboto:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Quicksand:wght@300;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Oswald:wght@300&family=Quicksand:wght@300;600&family=Roboto:ital@1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Orbitron&family=Oswald:wght@300&family=Quicksand:wght@300;600&family=Roboto+Condensed&family=Roboto+Mono:wght@300&family=Taviraj&display=swap');

.main-head{
    /* position: fixed; */
    /* border:  3px solid red; */
    display: flex;
    overflow: hidden;
  background-color: rgb(2, 1, 1);
/* margin-bottom: 233px; */
justify-content: space-between;
position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  /* height: 77px; */
  /* position: relative; */
}
.logo{
    /* border:  3px solid black; */
    margin: 12px 12px;

    /* border-radius: 25%; */
}
.navbar   {
    
    padding-right: 1rem;
   
   
    margin: 1rem;

    display: flex;
    list-style: none;
   

}
.navbar a li{
    margin: 12px 12px;
    font-size: 1.3rem;
}
.navbar a{
    color: rgb(231, 184, 184);
    /* font-size: 24px; */
    text-decoration: none;
}

.logo img{
    position: fixed;
    width: 55px;
    height: 55px;
}
.logo img:hover{
   opacity: 0.7;
}
.menu1{
    margin-left: 0rem ;
    margin-top: 0.8rem ;
    margin-right: 0.8rem ;
    margin-bottom: 0.8rem ;

    width: 3rem;
    height: 3rem;
    /* border: 2px solid red; */
    
}
@media only screen and (min-width : 0px) and (max-width : 660px)
{
    .intro1{
        font-family: 'Roboto Mono', monospace;
    
        text-align: center;
           margin-top: 110px;
        
          /* width: 600px; */
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
      }
    .navbar{
        display: none;
      }
    .resp{
        margin-left: 25px;
         padding: 10px;
    padding-right: 1rem;
   font-size: 1.2rem;
   

    display: block;
    list-style: none;
    }
    
   
    .resp a{
        color: rgb(231, 184, 184);
   
        text-decoration: none;
    }
    
}



@media only screen and (min-width : 661px) 
{
    .menu1{
        display: none;
    }

    .navbar a:hover
    {
        color: rgb(12, 10, 2);
        background-color: rgb(198, 218, 218);
    }

  



  
}