/* topnav litir */

:root {
    --topnav-primary: var(--pico-color-indico-550); 
    --topnav-primary-hover: #9232ff !important; 
    --topnav-primary-background: rgba(240, 238, 238, 0.9); 
}
@media only screen and (prefers-color-scheme: dark) {
  :root {
    --topnav-primary: var(--pico-color-indico-300);
    --topnav-primary-hover: #fff;
    --topnav-primary-background: rgba(8,9, 10, 0.9); 
  }
}
#toggle {
    display: none;
}

.topnav {
    padding: 0;
}

.topnav label {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 0 .3rem;
    font-size: 1.5rem;
    border: 1px solid var(--topnav-primary);
    border-radius: .2rem;
    color: var(--topnav-primary);
    background-color: var(--topnav-primary-background);
    z-index: 1010;
}
.topnav label:hover,
.topnav label:active {
    color: var(--topnav-primary-hover);
}
/* TOPMENU */
.topmenu {
    display: flex;
    flex-flow: column;
    margin: 0;
    position: fixed;
    width: 95%;      /* ath! */
    top: 4.5rem;
    right: -80rem;  /* ath! */
    z-index: 1009;
    transition: all 2s ease;
    background-color: var(--topnav-primary-background);
}

.topmenu a {
    display: block;
    width: 100%;
    padding: 2rem 0 1rem 0;
    text-align: center;
    text-decoration: none;
    font-size: .9rem;
    color: var(--topnav-primary);
    border-bottom: 1px solid var(--topnav-primary);
}
.topmenu a:hover,
.topmenu a:active {
    color: var(--topnav-primary-hover);
}

#toggle:checked ~ .topmenu {
    right: 1rem;  /* TOPMENU færist frá -80rem; */
    transition: all .5s ease;
}

.social {
    display: flex;
    flex-flow:row;
    justify-content: center;
    padding: 1rem 2rem 1rem 0;
}
.social a {
    display: block;
    flex-grow: 1;
    padding: 1rem;
    border: 0;
}
.topnav h5 {
    margin: 0;
    padding: .5rem 0 0 1rem;
    text-align: center;
}

@media screen and (min-width:60rem){
    .topnav {
        position: sticky;
        top:0;
        width: 100%;
        background-color: var(--topnav-primary-background);
    }
    .topnav section {
        margin:0;
    }
    .topnav h5 {
        padding: 1rem 0 0 0
    }
    .topmenu {
        position: relative; /* ath! */
        top: 0;
        right: 0;
        flex-flow: row;
        transition: none;
       /* background-color: transparent;   ath! */
    }
    .topmenu a {
        border: 0;
        padding: 1rem 0 0 0;
    }
    .topnav label {
        display: none;  /* topmenu label takki ósýnilegur */
    }
    .social a {
        padding: 0 .5rem;
    }

}