/* FFFOLIO */
    /* FFFOLIO */
    /* FFFOLIO */
    
    /* by Lannan */
    
    /* This template is free for anyone to use, modify, and distribute however you want. Credit is appreciated but not required. If you would /like/ to credit me, please link back to either https://lofrequency.net or https://fffolio.neocities.org. I'm not the best at CSS, so if you have a way to do something with better code, I'm all ears! */
    
    /*UNIVERSAL STYLES - ALL SCREEN SIZES*/

body {
    background-color: #fff;
    height:auto;
    font-family: monospace, tahoma, helvetica, sans serif;
    font-size:0.7em;
    line-height:1.5em;
    padding-top: clamp(40px, 5%, 20px);
    /*padding:40px 20px 20px 20px;*/
}
h1, h2, h3 { 
    font-family: Century Gothic, Helvetica, sans serif; 
    text-transform: uppercase; 
    font-weight: bold; 
}
h1 {
    color: #02A0E9; 
    font-size:3em;}
h2 {
    color: #000;
    font-size: 3em;
    line-height: 0.9em;
    margin-top: 5px;
}
h3 {
    color: #F92D86;
    font-weight: bold; 
    font-size: 1.5em; 
    line-height: 1em;
}
p {
    color:#000;
    }
b {
    color:#F92D86;
}
.divider {
    width:100%;
    height: 4px;
    background-color:#F92D86;
    margin: 50px auto 20px auto;
}
#ceiling {
    width:100%;
    height:4px;
    background-color:#F92D86;
}

    /* LINKS */
    /* These style all basic links in <p> elements. */

p > a, h2 > a, h3 > a {
    color: #000; 
    background: #FFFE00;
    text-decoration: none;
    border-bottom: none;
    font-variant-emoji: text;
}
p > a:hover, h2 > a:hover {
    color: #000; 
    background: transparent;
    text-decoration: underline;
    border-bottom: none;
}
h2 > a {
    text-decoration: none;
    color: #F92D86;
    font-size: 1em;
    background-color: transparent;
    font-variant-emoji: text;
}
h2 > a:hover, h3 > a:active {
    background-color: #FFFE00;
    text-decoration: none;
}
    /* GALLERY GRID */
    /* These are styles for the front page gallery tiles using <ul> and <li> elements arranged in a flex box. */
    /* All art is displayed so that you do NOT have to upload separate thumbnail images if you don't want to. Just link to the full image size and they will automatically crop to create a square thumbnail. */

    /* FLEXBOX GALLERY CONTAINER */
ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    }
    
    /* FLEXBOX ITEM */
li {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    width: 300px;
    height: 300px;
    }
    
    /* GRID STYLING */
ul img {
    width: 300px; 
    height: 300px;
    object-fit: cover;
    }
ul, li {
    margin: 10px;
    line-height: 0px; 
    list-style-type: none;
    }
    
    /* ARTIST INTRO TILE */
    /* This styles the first flexbox item, which is meant to introduce you! The length of this flex item CAN expand beyond 300px if your content necessitates it, but your page will look better if it doesn't. Try to keep this content short and sweet. */
    
li#intro {
    text-align: center;
    font-size: 1.1em;
    line-height: 1.1em;
    overflow: visible;
}
li#intro img {
    margin:5px;
}
li#intro img.social {
    height: 30px;
    width: auto;
}

    /* ARTIST INTRO IMAGES */
    /* These style the #portrait image and .social icons in your #intro tile. */

li#intro > #portrait {
    width:150px;
    height:auto;
    margin:0 auto;
}
li#intro > .social { 
    max-width: 30px;
    height: auto;
}

    /* GALLERY TILE HOVER EFFECT */
    /* This creates the zoom effect on hover. */
    
li.art img:hover {
    overflow: hidden;
    transform: scale(1.25,1.25)
}
    /* GALLERY SECTION HEADER */
    /* This styles the flexbox item that serves as your section header. */
li.text {
    border-top: 20px black solid;
    text-align: left;
}
li.text > h2 {
    color: #000;
    text-transform: uppercase;
    font-size:3em;
    line-height:0.9em;
    margin-top: 5px;
}

    /* PAGE CONTENT (ART DETAILS) */
    /* These style the main content container on pages that give details about your art when a gallery tile is clicked. You can use this to make pages for collections of work, or give every piece its own page. */
    
ul.detail {
    overflow:visible;
    object-fit: none;
}
ul.detail img {
    width: auto;
    height: auto;
}
li.detail {
    flex-grow: 2;
    max-width: 700px;
    overflow:visible;
    object-fit: none;
    border-top: 20px black solid;
}
li.detail p {
    font-family: monospace, tahoma, helvetica, sans serif;
    font-size:1.2em;
    line-height:1.5em;
}
li.detail h1 {
    line-height: 1em;
}
li.detail img {
    display: block;
    overflow: visible;
    object-fit: contain;
    margin: 0 auto;
    max-width: 100%;
    max-height: 120vh; /* This makes your images no taller than 120% of the screen so the viewer doesn't have to scroll a lot to see the art (delete if you don't mind scrolling) */
    height: auto;
    padding: 10px;
}
ul.detail > li#intro > #portrait {
    width:150px;
    height:auto;
    margin:0 auto;
}
ul.detail > li#intro > .social img { 
    width: 30px;
    height: auto;
}

    /* LINKS PAGE ONLY */
    /* This styles your "linktree" page. (Optional.) */

#links-head {
        text-align:center;
    }
#links-container {
    margin:0 auto;
    display: flex;
    width:30%;
    min-width: 500px;
    max-width: 30vw;
    height:auto;
    flex-direction:column;
    align-items:stretch;
    padding-bottom:20px;
}
#links-top {
    text-align:center; 
    margin:0 auto;
    padding:15px;
}
.links-item {
    color:#000;
    font-size: 1.3em;
    text-decoration:none;
    text-decoration-color:#fff;
    letter-spacing:.2em !important;
    border:1px solid transparent;
    text-align: center;
    vertical-align: middle;
    background-color:#02A0E9;
    margin:10px;
    padding:13px;
    box-shadow: 10px 10px #FFFE00;
}
a {
    text-decoration:none;
}
.links-item:hover, .item:active {
    color:#F92D86;
    text-decoration:none;
    text-decoration-color:#fff;
    border:1px solid #F92D86;
    background-color: #fff;
    margin:10px;
    padding:13px;
    box-shadow: 10px 10px #F92D86;
}
#links-top > img#portrait {
    width:150px;
    height: auto;
}
#links-top p {
    font-size: 1.2em;
}
    
/* MID-SIZED SCREEN STYLING */
    
    @media only screen and (max-width: 1032px) and (min-width:736px) {
            
h2 {
    color: #000;
    font-size:3em;
    line-height:0.9em;
    margin-top: 5px;
}
p {
    color:#000;
}
b {
    color:#F92D86;
}

/* GALLERY GRID */
    
ul {
    width: 90%;
    margin-left: -40px;
    }
li {
    justify-content: center;
    margin: 10px;
    }
li#intro {
    width: 100%;
    flex-grow: 3;
}
li.text {
    border-top: 20px black solid;
    text-align: left;
}
    }
    
/* SMALL/PHONE SCREEN STYLING */
    
    @media only screen and (max-width: 735px) and (min-width:300px) {
        

/* GALLERY GRID */
    
ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width:100%;
    margin: 0 auto;
    margin-left: -40px;
    }
li {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    width: 300px;
    height: 300px;
    margin: 10px;
    /*margin: 0 auto;*/
    }
ul, li {
    margin-top: 20px;
    line-height: 0px; 
    list-style-type: none;
    }
li#intro {
    width: 100%;
    text-align: center;
    font-size: 1.1em;
    line-height: 1.3em;
    overflow: visible;
    flex-grow: 3;
}
li#intro img {
    margin:5px;
}
li.text {
    border-top: 20px black solid;
    margin-top: 40px;
    text-align: left;
    height: auto;
}
    }