html {
    overflow-y: scroll;
  }

body{
    margin: 0;
    font-size: 24px;
}

.home-body{
    background-color: #f8bfa5;
}

.main-nav {      
    height: var(--basic-unit);
    position: relative;
}

.main-nav nav{
    float: right;
    width: calc(var(--basic-unit)*5);

    position: absolute;
    right: var(--basic-unit);
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    justify-content: space-between;
}

a{
    text-decoration: none;
}

.mobile-nav {
    text-align: center;
    display: flex;
    flex-direction: column;
}

.mobile-nav-a,
.main-nav a{
    font-family: 'Cairo';

    color: var(--basic-grey-color);
    text-decoration: none;
    text-transform: lowercase;
}

@media only screen and (min-width: 920px) {
    .mobile-nav {
      display: none;
    }
  }

@media only screen and (max-width: 920px) {
    .main-nav {
      display: none;
    }
  }

.main-nav .selected{
    color: var(--red-pastec);
    font-weight: 500;
}

.main-nav .a-circle{
    border: solid red 2px;
}

.nav-a{
    height: 32px;
    width: 32px;

    left: var(--basic-unit);
    top: 50%;
    transform: translateY(-50%);
}

.nav-circle circle{
    fill: var(--red-pastec);
}

.header-home h1{
    left: var(--basic-unit);
    top: var(--basic-unit);
    
    width: var(--basic-unit);
    height: auto;
    margin-block: 0;
}