/* @import url("../styles/base.css"); */
@import url("../styles/navigation.css");
@import url('https://fonts.googleapis.com/css2?family=B612+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --fontColor: #f1f2da;
    --bgColor: #00303b;
    --font-main: "B612 Mono", monospace;
    --font-scale: 1em;

    --link-color: #ff7777;
    --visited-color: #cf6262;

    --code-background-color: #f2f2f2;
    --code-color: #222;
    --blockquote-color: #ff77776b;

}
html,
body {
    height: 100%;
    background-color: var(--bgColor);
    color: var(--fontColor);
    font-family: var(--font-main);
    font-size: 0.85rem;
    line-height: 1.5;

}

body {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
}




/* NAV */
.navigation {
    margin-top: 2rem;
    margin-left: 15%;
}

/* collumns */

body .left {
    text-align: center;
    height: 100%;
    width: 40%;
    /* background-color: pink; */
}

body .right {
    height: 100%;
    width: 60%;
    /* background: red; */
}

#about {
    display: block;
    margin-top: 5%;
    text-align: left;
    margin-left: 15%;
    margin-right: 30%;
}

#about nav {
    margin-bottom: 2rem;
}

#about .page-title {
    text-transform: lowercase;
}

#about h1 {
    margin-bottom: 1rem;
}

#about h2 {
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
}

#map {
    text-align: center;
    display: none;
    margin-top: 10%;
}

#map p {
    margin-top: 1.5rem;
}


/* collection */

.collection-item {
    margin-top: 10%;
    margin-left: 15%;
    margin-right: 15%;
    text-align: left;
    display: none;
}

.collection-item h1 {
    margin-bottom: -0.5rem;
    text-transform: uppercase;
}

.collection-item h2 {
    font-style: italic;
    font-size: 1.2rem;
    font-weight: normal;
}

.collection-item img,
video {
    height: auto;
    border-radius: 6px;
}

.collection-item img {
    margin-bottom: 1.5rem;
}

.selected {
    font-weight: bold;
}

#bipsi {
    margin-top: 10%;
    margin-left: 0%;
    /* filter: drop-shadow(0 0 2rem rgba(0, 0, 0, 0.534)); */
    /* border-radius: 8px; */
}

#all {
    margin: auto;
    display: none;
}

#about-mobile {
    display: none;
}

#header h1{
    text-transform: lowercase;
}


/* MOBILE VIEW */

@media screen and (max-width: 1100px) {
    :root{
        --width: 520px;

    }
    body{
        display: block;

            padding: 20px;
            margin: 8px;
        
    
    }
    .left {
        display: none;
    }
    .right{
        margin: 0.5rem;
    }

    .collection-item {
        margin-left: -5rem;
    }

    .collection-item img {
        display: none;
    }

    .collection-item h1 {
        font-size: 1.5rem;
    }

    .collection-item h2 {
        font-size: 1rem;
    }

    .collection-item p {
        /* font-size: 0.75rem; */
    }

    #about {
        margin-left: 0%;
        margin-right: 0%;
    }

    #about-desktop {
        display: none;
    }

    #about-mobile {
        display: block;
    }
}


/* BASE */

a {
    color: var(--link-color);
    cursor: pointer;
}

a:hover {
    background-color: var(--link-color);
    color: var(--link-color);
}

a:visited {
    color: var(--visited-color);
}

a:visited:hover {
    color: var(--visited-color);
    background-color: var(--visited-color);
}

/* NAVIGATION */

nav {
    text-transform: uppercase;
    list-style-type: none;
    border-bottom: solid 1px var(--link-color);
}

nav a {
    padding: 0.2rem 0.4rem;
    /* margin-left: 0.5rem;*/
    margin-right: 0.5rem;
}


nav .current-nav {
    background-color: var(--link-color);
    color: var(--bgColor);
    padding: 0.2rem 1rem;
}

nav a:hover {
    background-color: var(--link-color);
    color: var(--link-color);
}

a h1 {
    color: var(--fontColor);
}

.title {
    text-decoration-line: underline;
}

.title:hover {
    text-decoration-line: overline;

}

/* NAVIGATION END */


/* MOBILE */
@media only screen and (max-width: 600px) {
    html {
        margin-left: 0;
    }

    nav a {
        padding: 0rem 0.2rem;
    }
}