* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0;
    text-decoration:none;
} 

html{
    scroll-behavior: smooth;
}


/* navigation bar */
.navbar{
   
  border-radius: 5px;
  border:2px solid goldenrod;
  background-color:darkgreen;
  overflow: hidden;
  
}

.navbar ul{
  display: flex;
  overflow: auto;
  padding-inline-start: 10px;
  margin-block-start: 1px;
  margin-block-end: 1px;
}
.navbar li{
  float:left;
  list-style: none; 
  
  
}
.navbar  h1{
 
  display: block;
  font-size: 3em;
  font-family:  'Dancing Script', cursive;    
  color: goldenrod;
  border-right: 120px;

 
  
}
.navbar h1:hover{
  color:bisque;
}

/* my drawings box */
.h-primary{margin-top: 10px;
  background-color:khaki;
  border: 3px solid rgb(90, 11, 11);
  font-weight: 9000;
  font-size: 2em;
  text-transform:capitalize;
  font-family:  'Dancing Script', cursive;    
  color: rgb(90, 11, 11);
  border-right: 120px;
  text-align:center;
}

/* drawing's row and col */
.row {
    display:flex;
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
 
  .column {
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }
  
  .column img {
    border: 4px solid black;
    margin-top: 8px;
    vertical-align: middle;
    width: 90%;

  }
  
  @media screen and (max-width: 600px) {
    .column {
      flex: 50%;
      max-width: 50%;
    }
  }
  
  
 /* @media screen and (max-width: 600px) {
    .column {
      flex: 100%;
      max-width: 100%;
    }
  }*/
  #container{
    height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
  }
/* footer */
footer { 
  margin-top: auto;
  padding: 1 rem;
    background: black;
    color: white;
    text-align: center;
   


  }