.mb-sm { margin-bottom: 1rem;}
.mb-md { margin-bottom: 3rem;}
.mb-lg { margin-bottom: 4rem;}
.mb-hg { margin-bottom: 8rem;}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit; 
}

html {
    font-size: 62.5%; 
}

body {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
    font-size: 2.5rem;
    line-height: 1.3;
    color: #FFFF; 
    background-color: #556D83;
    /* padding: 10rem;  */
}

@media only screen and (max-width: 30em) {
    html {
        font-size: 46%; 
    } 
  
}

.heading-1 {
    font-size: 4rem;
    font-weight: 100;
}
.heading-2 {
    font-size: 3rem;
    font-weight: 400;
}
.heading-3 {
    font-size: 2rem;
    font-weight: 400;
}
.heading-4 {
    font-size: 3rem;
    font-weight: 300;
}
.heading-5 {
    font-size: 1.5rem;
    font-weight: 400;
}
.story-text {
    font-size: 2rem;
    font-weight: 200;
}


.container{
    padding-top: 10rem;
    display: grid;
    justify-items: center;
    
    grid-template-columns: minmax(.5rem, 1fr) 3rem minmax(18rem, 60rem) minmax(.5rem, 1fr) ;
    grid-template-rows: auto;
    gap: 1rem;
}

.mid-icon {
    width: 3rem;
    grid-column: 2 / 2;
    
}

.mid-item {
    grid-column: 3 / 3;
    
}

.footer {
    display: grid;
    justify-items: center;
    /* gap: 30rem; */
    /* grid-template-columns: 1fr;
    grid-template-rows: auto; */
    /* padding: 10rem; */
}

.nav {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, auto); 
    /* minmax(auto, 1fr)  */
    /* auto-fit */
    grid-template-rows: auto;
    column-gap: 1rem;
    
}

.nav__link:link,
.nav__link:visited {
    text-decoration: none;
    color: white;
    /* padding: 1.5rem; */
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    /* background-color: #232c35; */
    display: block;
    border-radius: .5rem;
    font-size: 2rem;
    
}

.nav__link:hover,
.nav__link:active {
    background-color: hsla(210, 20%, 17%, 0.242);
}

.small-font {
    font-size: 1.5rem;
    font-weight: 200;
}

.reversed {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
}


@media only screen and (prefers-color-scheme: dark) {
    /* body { background: black; }
    h1 { color: orangered; }
    p { color: white; } */
    body {
        
        background-color: #232c35;
    }
    
    .nav__link:hover,
    .nav__link:active {
        background-color: hsl(0, 0%, 0%);
    }
}