:root{
    --mainColor:#eaeaea;
    --secondaryColor: #fff;
    --borderColor: #c1c1c1;
    --mainText:black;
    --secondaryText: red;
    --themeDotBorder:#24292e;
    --previewBg: rgb(251,249,243,0.8)
    --btnColor: black;

}


html, body{
    padding: 0 ;
    margin: 0 ;
    border-left: 20px solid black;
    border-right: 20px solid black;
    border-bottom: 20px solid black;
}
h1, h2, h4, h5 , h6 , strong{
    color: var(--mainText);
    font-family: 'Nunito Sans', sans-serif;
    font-weight:500px;
}

HTML CSSResult Skip Results Iframe
.wrapper {
  height: 100vh;
  /*This part is important for centering*/
  display: flex;
  align-items: center;
  justify-content: center;
}

.typing-demo {
  width: 22ch;
  animation: typing 2s steps(22), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 2em;
}

@keyframes typing {
  from {
    width: 0
  }
}
    
@keyframes blink {
  50% {
    border-color: transparent
  }
}


h1{font-size: 40px}
h3{
    font-family: 'Montserrat', sans-serif;
    color: black;
}
.animate__animated.animate__fadeInTopRight{
    --animate-duration: 2s;
    --animate-delay: 0.9s;
    font-size:38px;
}
.right-column1{
    
    grid-area:right-column1;
}
.left-column1{
    grid-area:left-column1;
}
a{
    text-decoration: none;
    color:white;
    font-family: 'Roboto Mono', monospace;
    font-size:20px;
}

 li, span, label, input, textarea{
    color:var(--secondaryColor);
    
}
.navbar{
    background-color:black;
    color:var(--secondaryColor);
}

.navbar a{
    padding:25px;
    margin:0 5px;

}
.navbar a:hover{
   border-bottom: 6px white solid;
   color: white;
}

#navbar a:hover{
    border-bottom: 6px white solid;
    color: white;
 }

.navbar ul{
    display: flex;
}
.left-column p{
    font-family: 'Roboto Mono', monospace;
}
.nav-container{
    max-width:1200px;
    margin: 0 auto;
    overflow: auto;
    padding: 0 3px;
    
}
.justAboveHome{
    background-color: var(--mainColor);
    border-bottom: 1px solid var(--borderColor);
    overflow: auto;
}
.Home{
    background-color: var(--mainColor);
    border-bottom: 1px solid var(--borderColor);
    overflow: auto;
}
.About-Me{
    background-color: var(--secondaryColor);
    border-bottom: 1px solid var(--borderColor);
    overflow: auto;
}
.Experience{
    background-color: var(--secondaryColor);
    border-bottom: 1px solid var(--borderColor);
    overflow: auto;

}

.Contact{
    background-color:var(--mainColor);
    border-bottom:1px solid var(--borderColor);
    overflow:auto;
}
.Skills{
    background-color:var(--secondaryColor);
    border-bottom:1px solid var(--borderColor);
    overflow:auto;
}

.main-container{
    width:1200px;
    margin:0 auto;
}
canvas {display: block}
.my-wrapper{
    grid-area:my-wrapper;
    display:grid;
    min-height:20em;

    justify-content: center;
    align-content:center;
    grid-template-columns: 1fr                       1fr ;
    grid-template-rows: 1fr                         1fr ;
  
    
    grid-template-areas: 'left-column1 right-column1';
                          
}

.frame {
    display: inline-block;
    padding: 0;
    border-radius: 3px;
    font-size: 7em;
    text-shadow: 1px 2px  white;
    color: green;
    text-align: center;
  }
  .frame canvas {
    display: block;
    padding: 60px 20px 10px 0px;
    background-color: black;
  }
  
  #tree{
  display:block;
  position:absolute;
  left:50%;
  top:62%;
  transform:translate(-50%,-50%);
  }


.nav-wrapper{
  
    grid-area:nav-wrapper;
    border-bottom:1px solid var(--borderColor);

}
.left-column{
    grid-area:left-column;
}
#myProfile{
    display: block;
    margin:0 auto;
    height:300px;
    width:300px;
    object-fit:cover;
    border: 2px solid var(--borderColor)
}
.right-column{
    
    grid-area:right-column;
}


.intro-wrapper{
    display:grid;
    background-color: var(--secondaryColor);
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 6px -7px 9px 10px rgba(12,12,12,0.19); 
    box-shadow: 0px 10px 13px -7px #000000, 6px -7px 9px 10px rgba(12,12,12,0.19);
    grid-template-columns: 1fr 1fr ;

    grid-template-areas: 'left-column right-column' ;
    
        
}
.Projects{
    background-color:var(--mainColor);
    border-bottom:1px solid var(--borderColor);
    overflow:auto;
}
.project-wrapper{
    display:grid;
    background-color: var(--secondaryColor);
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 6px -7px 9px 10px rgba(12,12,12,0.19); 
    box-shadow: 0px 10px 13px -7px #000000, 6px -7px 9px 10px rgba(12,12,12,0.19);
    grid-template-columns: repeat(auto-fit, 320px);
    gap:20px;
    justify-content:center;

    grid-template-areas: 'left-column right-column';
    
        
}
.post-wrapper{
	display: grid;
	grid-template-columns: repeat(auto-fit, 320px);
	gap:20px;
	justify-content: center;
	padding-bottom: 50px;
}

.post{
	border:1px solid var(--borderColor);
	-webkit-box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75);
	-moz-box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75);
	box-shadow: -2px 7px 21px -9px rgba(0,0,0,0.75);
}

.thumbnail{
	display: block;
	width: 100%;
	height:180px;
	object-fit: cover;
}
.post-preview{
	background-color: #fff;
	padding:15px;
}


.project1{
    border:1px solid black;
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 6px -7px 9px 10px rgba(12,12,12,0.19); 
    box-shadow: 0px 10px 13px -7px #000000, 6px -7px 9px 10px rgba(12,12,12,0.19);
}
.exp-wrapper{
    display:grid;
    background-color: var(--secondaryColor);
    -webkit-box-shadow: 0px 10px 13px -7px #000000, 6px -7px 9px 10px rgba(12,12,12,0.19); 
    box-shadow: 0px 10px 13px -7px #000000, 6px -7px 9px 10px rgba(12,12,12,0.19);
    grid-template-columns: 1fr 1fr ;

    grid-template-areas: 'left-column right-column' 

                         'left-column right-column'
                         'left-column right-column';
    
        
}

.flex{
    display:flex;
    justify-content: center;
    align-items: center;
    height:100%;
}

.navbar flex{
    justify-content: space-between;

}

#preview{
    width: 800px;
    font-size: 20px;
    border:1.5 solid #17a2b8;
    background-color: var(--previewBg);
}
#preview2{
    width: 400px;
    font-size: 25px;
    border:1.5 solid #17a2b8;
    background-color: var(--previewBg);
    font-family: 'Roboto Mono', monospace;
}

#submit-btn{
    margin-top:10px;
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    color: #fff;
    background-color: black;
   
}
#contact-form{
   
    display:block;
    max-width: 600px;
    margin: 0 auto;
    border:1px solid black;
    padding:15px;
    border-radius: 5px;
    background-color:white;
    margin-bottom:50px;
 
}

.skill-wrapper{
    grid-area:my-wrapper;
    display:grid;
    min-height:20em;

    justify-content: center;
    align-content:center;
    grid-template-columns: 1fr ;

    grid-template-areas: 'left-column right-column' 
                         'left-column'            
                         'left-column';
                         
}

.input-field{
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    background-color: var(--secondaryColor);
    border-radius:5px;
    border:1px solid var(--borderColor);
    font-size:14px;
}
#contact-form label{
    color:black;
    line-height:2.3em;


}
#contact-form textarea{
    min-height:100px;
    font-size:14px;
}
@media screen and (max-width: 1200px){
    main-container{
        width:95%
    }
}