main{
    margin-top: 100px;

}

nav{
    display: grid;
    grid-template-columns: 1fr  2fr;
}

@media screen and (min-width: 60rem){
#main{
    margin-top: 70px;
}

}

@media screen and (min-width: 60rem){
    nav{
    display: grid;
    grid-template-columns: 1fr  2fr ;
}}

@media screen and (min-width: 60rem){
#img{
    max-width: 400px;
    padding-left: 20px;
}}

#img{
    max-width: 300px;
    position: relative;
    overflow: hidden;
}

#img-zoom{
    display: block;
    transition: transform 2s ease-in-out;

}

#img:hover{
    transform: scale(1.2);
    transition: transform 0.5s ease-in-out;
}

#start{
    scroll-behavior: smooth;
}

#myBtn {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: red; 
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 10px; 
    font-size: 18px; 
    scroll-behavior: smooth;
  }
  
  #myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
  }

/* @media screen and (min-width: 60rem){
#code{
display: grid;
grid-template-columns: 0.75fr 0.75fr;

}}
 */