:root {
    --bg-color1: #ffffff;
    --bg-color2: rgb(113, 32, 145);
    --border-color: #000000;
    --button-hover: #ff218c;
    --text-color: #000000;
    --text-color2: #000000;
    --text-font-size: 1em;
    --event-calendar: rgb(255, 255, 255);
}

* {
    margin: 0 auto;
}

body {
    background-color: var(--bg-color1);
    text-align: center;
    background-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text-color);
}

#content_page {
    display: visible;
}

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

a:hover {
    cursor: pointer;
}

p a:hover {
    color: var(--button-hover);
}

img {
    max-width: 100%;
    height: auto;
}

.pageImg {
    max-width: 90%;
    margin-top: 25em;
}

p,
h2,
h3,
h4 {
    margin-bottom: 1em;
}

h1 {
    margin-bottom: .25em;
    font-size: xxx-large;
}

h2 {
    color: var(--text-color2);
}

h3 {
    font-size: x-large;
    width: 90%;
    font-weight: normal;
    text-transform: uppercase;
}

h4 {
    font-size: x-large;
}

p,
ul,
a {
    width: 90%;
    font-size: 16pt;
}


ul.no_bullets {
    text-align: left;
    list-style-type: none;
    padding: 0;
    font-size: x-large;
    margin-top: -.75em;
}

.list_title {
    font-size: x-large;
    margin-bottom: 1em;
    width: 100%;
    display: block;
    margin-left: 0px;
}

#wrapper {
    margin-top: 1em;
    max-width: 697px;
    height: auto;
    overflow: hidden;
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%,  rgba(255, 255, 255, 0) 100%);
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../assets/dejah_pizza.webp);
}



#artistPortrait {
    border: .35em solid var(--border-color);
    border-radius: 100em;
}

#socialBox {
    margin-bottom: 1em;
}

.social_icon {
    margin: .1em;
}

.social_icon,
.btnBack {
    border: 2px solid black;
    border-radius: 30%;
}

.social_icon:hover,
.btnBack:hover {
    background-color: var(--button-hover);
}

#fpLinkbox {
    margin-top: 0em;
    margin-bottom: 1em;
}

#fpLinkbox a.section_link:first-child {
    margin-left: 0px;
}

a.section_link {
    color: var(--text-color2);
    text-transform: lowercase;
    text-decoration: none;
    margin-left: .5em;
    font-size: xx-large;
}

a.section_link:hover {
    color: var(--button-hover);
}

.itemDiv {
    background-color: white;
    width: 90%;
    padding: .25em 0em .25em 0em;
    border-radius: 2em;
    border: .25em solid var(--border-color);
    margin-bottom: 1em;
}

.itemDiv iframe {
    margin-bottom: 1em;
}

.btnBack {
    padding: .5em;
    font-size: xx-large;
    color: black;
}


#link-list {
    width: 100%;
    display: grid;
    grid-gap: 1em;
    text-align: left;
}

#aboutGrid a {
    color: var(--text-color2);
    text-decoration: none;
}

#aboutGrid a:hover {
    color: var(--button-hover);

}

#aboutGrid div {
    width: 100%;
}

.shopGrid {
    width: 100%;
    text-align: center;
    display: grid;
    margin-top: 1em;
    /* grid-template-columns: 10% 10%; */
    gap: 20px;
    border-radius: 20pt;
    overflow: hidden;
    margin-bottom: 2em;
}

.shopGrid a {
    color: var(--text-color2);
    text-decoration: none;
}

.shopGrid a:hover {
    color: var(--button-hover)
}


#eventCalendar {
    margin-top: 2em;
            background: var(--event-calendar);
            padding: .5em 0em .5em 0em;
            border: 3px solid var(--border-color);
            border-radius: 0em 0em 0em 0em;
            width: 99%;
}

.event-item {
    width: 95%;
    display: grid;
    grid-template-columns: 15% 80%;
    gap: 10px;
    overflow: hidden;
    border-top: 2px solid rgb(136, 136, 136);
    padding: 1em 0em 1em 0em;
}

.event-date, .event-desc {
    display: grid;
    grid-template-columns: 100%;
    gap: 0px;
    overflow: hidden;
}

.event-date {
    border-right: 2px solid rgb(136, 136, 136);
    width: 100%;
}

.event-day {
    font-size: x-large;
}

.event-headline {
    font-weight: bolder;
}
/*
.event-byline{

}*/


footer {
    background-color: var(--border-color);
    border: .35em solid var(--border-color);
    margin-top: -5px;
}

footer p {
    padding-top: 1em;
    font-size: medium;
    color: white;
}

.itemDiv iframe {
    border: 0px;
}


#about p {
    max-width: 95%;
    text-align: justify;
}

p a {
    text-decoration: underline;
    font-weight: bold;
}
.substackSignup {
    overflow: hidden;
}

@media (orientation: portrait) {

    #adsComics,
    #aboutGrid {
        width: 100%;
        text-align: center;
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 0px;
        border-radius: 20pt;
        overflow: hidden;
    }


    #link-list {
        display: block;
    }

    .link-list title {
        width: 100%;
        text-align: left;
    }

    #artistPortrait {
        margin: 10em 0em 1em 0em;
        max-width: 50%;
    }

    .social_icon {
        width: 14%;
    }

    #si_github {
        display: none;
    }

    .img_ad {
        border-radius: 2em;
        margin-top: .5em;
        opacity: 0.85;
    }

    .substackSignup {
        width: 100%;
        height: 320px;
    }

    .itemDivLand {
        display: none;
    }

    .itemDivPort {
        display: inline;
    }

    #aboutGrid {
        padding-top: 1em;
        padding-left: 1em;
        width: 100%;
        text-align: center;
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 0px;
        border-radius: 20pt;
        overflow: hidden;
    }

    #aboutGrid li {
        font-size: large;
    }

    #about p {
        text-align: left;
    }
}

@media (orientation: landscape) {

    #headNavMobile {
        display: none;
    }

    #headNavDesktop {
        display: initial;
    }

    #link-list {
        grid-template-columns: auto auto;
    }

    #artistPortrait {
        margin: 15em 0em 1em 0em;
        max-width: 30%;
    }

    .social_icon {
        width: 10%;
    }

    #adsComics,
    #aboutGrid {
        width: 100%;
        text-align: center;
        display: grid;
        grid-template-columns: 50% 50%;
        gap: 0px;
        border-radius: 20pt;
        overflow: hidden;
    }

    #aboutGrid {
        padding-top: 1em;
        padding-left: 1em;
    }

    .img_ad {
        border-radius: 2em;
        margin-top: .5em;
        opacity: 0.85;
    }

    .img_ad:hover {
        opacity: 1;
        transition: 1s;
    }

    .substackSignup {
        width: 687px;
        height: 320px;
        border: .35em solid var(--border-color);
        border-radius: 2em 2em 0em 0em;
    }

    #substack {
        max-width: 90%;
        border: .35em solid var(--border-color);
        border-radius: 2em;
    }

    .itemDivPort {
        display: none;
    }

    footer {
        width: 100%;
    }

}