@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&family=Roboto+Mono:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Fira+Sans:wght@500&display=swap');

* {
  box-sizing: border-box;
  font-family: 'Chakra Petch', sans-serif; 
  color:#dddee7;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

html {
  background-color: rgb(10, 10, 10);
}

::selection {
  background-color: #0310ca;
  color: whitesmoke;
}

::-moz-selection {
  background-color: #0310ca;
  color: whitesmoke;
}

.main-header {
  background-color: #1A1B1E;
  padding-left: 15px;
}

.header-spacing {
    padding-bottom: 300px;
}

.main-font {
    font-family: Roboto Mono;
    color: #C7CBE5;
    padding-left: 300px;
}
.main-logo
{
    margin-left: 445px;
    position: absolute;
    bottom: 550px;
}

.sub-font {
    font-family: Fira Sans;
    color: #C7CBE5;
    padding-left: 300px;
    margin-top: -35px;
}

.nav li {
  display: inline;
}

.nav a {
  display: inline-block;
  padding: .5em;
  text-decoration: none;
  transition: .3s;
}

.nav a:hover {
  background-color: #e9eaf0;
  color: #1A1B1E;
  box-shadow: 7px 5px 1000px 28px rgb(239, 241, 241);
}