style.css

.navigation,footer,main,body{
    background-color: #0E2A47;
    color:#fff;
}
.link-secondary{
    color:#fff;
}

.nav-link{
    color:#fff;
}
.navbar-nav{
    color:#fff;
}
.hover{
    color:#fff;
}
.hover:hover{
    color:#fff;
    border-bottom:1px solid red;
}

.herosection{
    background:url('background5.svg');
    background-size: cover;
    background-repeat: no-repeat;
}

main{
    min-height: 94vh;

}
html{
    background:#141414;
    /* background:url('background2.jpg'); */

}
body{
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    margin:0;
    padding:0;
    max-width:100vw;
    margin:0 auto;
}
.hero{
    margin-top:23vh;
    margin-left:12vh;
}
.htmlpic{
    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    url('blog.jpg');
    width: 100%;
    height: 400px;
    background-size: cover;
    color: white;
    padding: 20px;
}
.csspic{
    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(221, 90, 14, 0.9)),
    url('css.jpg');
    width: 100%;
    height: 400px;
    background-size: cover;
    color: white;
    padding: 20px;
}
.jspic{
    background-image:
    linear-gradient(to top, rgba(245, 246, 252, 0.52), rgba(16, 13, 163, 0.6)),
    url('js.jpg');
    width: 100%;
    height: 400px;
    background-size: cover;
    color: white;
    padding: 20px;
}
.bootstrappic{
    background-image:
    linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(143, 172, 17, 0.9)),
    url('bootstrap.jpg');
    width: 100%;
    height: 400px;
    background-size: cover;
    color:#673AB7;
    padding: 20px ;
}
.learntext{
    width:max-content;
    padding:10px 20px;
    margin:0 auto;
    color:orangered;
}
#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
  }
  
  #myBtn:hover {
    background-color: #555;
  }

@media  screen and (max-width:800px) {
    .hero{
        margin-top:10vh;
        margin-left:1vh;
    }
}