/*!
  * Variables
*/


img {
    width:100%;
    border-radius:4px;
    border: solid 1px var(--bg-secondary);
}


:root {
    --bg-primary:#110A1A;
    --bg-secondary:#261939;
    --font-primary:#ECE7E3;
    --font-secondary:#FFF6E5;
    --font-tertiary:#ded5cec8;
    --line:#23221e;
    --accent:#FFBF44;
    --font-xl:2.4rem;
    --font-lg:2.2rem;
    --font-md:2rem;
    --font-sm:1.2rem;
    --font-xs:1.1rem;
    --body:1rem;
    --meta:.916rem;
    --s-meta:.750rem;
}

.text-green {
    color: var(--accent);
}
.text-red {
    color: var(--font-tertiary);
}

html {
    color: var(--primary-dark);
    font-size:var(--body);
}

body {
    font-family: 'Poppins', sans-serif;
    color:var(--font-primary);
    line-height:1.5;
    background-color:var(--bg-primary);
}

*:focus {
    outline: none;
    box-shadow: 0 0 0 0.2em var(--accent);
  }

nav a:focus {
    box-shadow: inset 0 0 0 0.2em var(--accent);
}


a {
    text-decoration: underline;
    color: var(--accent);
}

a:active {
    color: var(--accent);
}

a:hover {
    color: var(--accent);
}

h1,
h2,
h3,
h4 {
    margin-bottom: 1rem;
    font-weight:normal;
    line-height:1.2;
}

h1 {
    font-size:var(--font-xl);
    font-weight:500;
}

h2 {
    font-size:var(--font-md);
    font-weight:500;
    color:var(--font-tertiary);
}

h3 {
    font-size:var(--font-sm);
    color:var(--font-tertiary);
}

h4 {
    font-weight:500;
    margin-bottom:0;
}

.rent-card h2 {
    font-size:var(--font-sm);
}

.hidden {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Containers **/

section, footer {
    padding:1.5rem 0rem;
}

section {
    border-bottom: solid .25px var(--line);
}

header {
    padding-top:1rem;
    padding-bottom:1rem;
}

.heading {
    padding-top:1.5rem;
    padding-bottom:1.5rem;
}


.heading p {
    font-size:var(--font-xs);
}

.heading-s {
    color:var(--font-tertiary)
}

.rent-card {
    border: solid 1px var(--font-tertiary);
    border-radius:4px;
    margin-bottom:1rem;
}

.rent-card-content {
    padding:1rem;
}

.rent-card img {
    border-radius:4px 4px 0px 0px;
    border: solid 0px;
}


/* Navigation */

.nav {
    list-style:none;
    padding-left:0;
    display:flex;
    margin-block:0;
    justify-content:space-between;
    font-size:var(--meta);
}

.nav-main {
    display:flex;
}

.nav-main a {
    margin-left:2rem;
}

.nav a:link,
.nav a:visited {
    color:var(--font-primary);
    text-decoration:none;
    transition: ease .2s;
}

.nav-main a[aria-current=true] {
    font-weight:bold;
}

.nav a:hover {
    transition: ease .2s;
    opacity:.7;
}

.nav-logo a {
    display:flex;
    font-weight:bold;
}

.nav-logo a:hover {
    opacity:.7;
}

.nav-logo img {
    max-width:35px;
    margin-right:.5rem;
}

/* Utilities */
.desc {
    display:block;
    font-size:var(--meta);
    color:var(--font-secondary);
    font-family:'Untitled Serif', serif;
}

.m-mt {
    margin-top:1.5rem;
}

/* Tablet at 767 pixels*/

@media only screen and (min-width: 767px) {
    
    .footer div:nth-child(3) {
        text-align:right;
    }

    .m-mt {
        margin-top:0rem;
    }
}

/* Desktop at 992 pixels*/

@media only screen and (min-width: 992px) {

    :root {
        --font-xl:3rem;
        --font-lg:2.8rem;
        --font-md:1.8rem;
        --font-sm:1.3rem;
        --font-xs:1.2rem;
        --body:1.2rem;
        --meta:.916rem;
        --s-meta:.750rem;
    }

    .heading {
        padding-top:5rem;
        padding-bottom:5rem;
    }

    section {
        padding:3rem 0rem;
    }

    header {
        padding: 2rem 0rem;
    }

}