html, body
{
  margin:0px;
  padding:0px;
  font-family: Arial,  Inherit;
  color:white;
  width:100%;
  height:100%;
  background-color:#0F0F0F;
}

.container
{
  margin:0px;
  padding:0px;
  display:grid;
  grid-template-columns: repeat(12 , 1fr);
  grid-template-rows: 40px auto;
  grid-gap:1px;
  background-color:#131313;

}

#navbar
  {
  grid-column: 1 / -1 ;
  top:0px;
  display:grid;
  grid-template: repeat(1, 35px) / repeat(12, 1fr);
  align-contents: center;
  overflow:hidden;
  width:100%;
  height:40px;
  position:sticky;
  margin:2px 10px 0px 5px;
  background-color:#ffffff;
  padding-top:3px;
    }

 #menu
  {
  grid-column: 1 / 4 ;
  padding-left:20px;
  height:auto;
  margin:0px;
  }

  #header
{
  grid-column: 4 / -1 ;
  display:flex;
  padding-left:25%;
  align-items: center;

}
.profile-link
{
  color:white;
  display:block;
  width:100px;
  float:left;
  padding-top: 0px;
  background-color:#0CD0C3;
  text-align:center;
  height:auto;
  border-radius: 10px 10px 2px 2px;
  box-shadow: 2px 2px 2px;
  margin-right:3px;
  cursor:pointer;

  }

#header > h1
{
  color:black;

}
blockquote
{
  font-family:"Sofia", sans-serif;

}
#welcome-section
{
  grid-column: 1 / -1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-right:0px;
  padding:10px 10px 30px 0px;
  width:100vw;
  height:100vh;
  opacity:0.8;
  background-color:#171717;
  }
#welcome-section > img
{
  margin:0px;
  padding:0px;
  height: 100vh;

}

#card
{
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin-left:0px;
  padding:0px;
  align-items:center;
  text-align:center;
}

#projects
{
  display:flex;
  flex-direction:row;
  justify-content:start;
  align-items:start;
  grid-column: 1 / -1;
  margin-left:0px;
  padding-top:50px;
  padding-left:20px;
  width:100vw;
  height:100vh;
  background-image:url("../images/mywork.png");
  background-size:cover;
}


#works
{
  margin:0px;
  padding-left:20px;
}

* > a
{
  color:white;
}
      #work-1{
                 position:relative;
                 left:-100px;
                 width:200px;
                 height:40px;
                 transition: 0.3s;
                 padding-top:10px;
                 text-align:center;
                 border-radius:10px 3px 10px 10px;
                 background-color:#0EAAA0;

            }
      #work-2{
             position:relative;
             top:60px;
             left:-100px;
             width:200px;
             height:40px;
             padding-top:10px;
             transition: 0.3s;
             text-align:center;
             border-radius:10px 3px 10px 10px;
             background-color:#0EAAA0;

            }

      #work-3{
                   position:relative;
                   top:110px;
                   left:-100px;
                   width:200px;
                   height:40px;
                   text-align:center;
                   transition: 0.3s;
                   text-align:center;
                   padding-top:10px;
                   border-radius:10px 3px 10px 10px;
                   background-color:#0EAAA0;

                  }
       #work-4{
                    position:relative;
                    top:170px;
                    left:-100px;
                    width:200px;
                    height:40px;
                    text-align:center;
                    transition: 0.3s;
                    text-align:center;
                    padding-top:10px;
                    border-radius:10px 3px 10px 10px;
                    background-color:#0EAAA0;
 
                   }
#work-1:hover
{
  left:0px;
}
#work-2:hover
{
  left:0px;
}
#work-3:hover
{
  left:0px;
}
#work-4:hover
{
  left:0px;
}
#canvas
{
  padding:50px 50px 80px 100px;
  border:2px solid #ffffff;
}

.home
{
  width:80px;
  height:50px;
  background-color:#DFB03E;
   margin:2px;
  border-radius: 15px;
  font-size: 15px;
  font-weight:bold;

}
#navbar:hover {
       background: gray;
         }

      @media (max-width: 61.25em) {
        html {
          font-size: 58%;
        }
      }




.project-title

{
  color:#0EAAA0;
}

#welcome-btn
{

  width:150px;
  height:50px;
  border-radius:30px;
  background-color:#0CD0C3;
  box-shadow: 2px 3px white;
}

  @media screen and (max-width: 600px)
  {
      .container
         {
          width:auto;
          height:auto;
          display:flex;
          flex-direction:column;
          justify-content: center;
          font-size:25px;

         }
         #navbar{
           width:auto;
           height:auto;
         }

         #welcome-section {
           width:auto;
           height:auto;
           display:flex;
           flex-direction:column;
           justify-content:center;
           align-items:center;
           font-size: 20px;
         }



         #projects {
           width:auto;
           height:100vh;
           display:flex;
           flex-direction: column;
           justify-content:center;
           align-items:center;
           font-size:20px;
           background-image:url("../images/mywork.png");
           background-size:auto;
         }


         #welcome-section > img{

           width:auto;
           height:100px;
         }

       #menu
       {
         width:auto;
         height:auto;
       }
         #menu  > a
         {

          width:70px;
          height:auto;
          display:block;
          margin:1px 1px 0px 2px;
          padding:1px;
          font-size:15px;

         }
         #header{
           width:auto;
           height:auto;
         }
         #header > h1
         {
           font-size:20px;
         }
         #work-1 , #work-2 , #work-3, #work-4
         {
           font-size:15px;
         }
         #works
         {
           font-size:inherit;
         }

  }