body {
    text-align: center;
    font-family: system-ui;
    color: var(--fontPrimaryDark);
    margin: 0;
    padding: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

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

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

header {
    right: 0;
    left: 0;
    top: 0;
    height: 4rem;
    position: fixed;
    display: flex;
    align-items: center;
    z-index: 500;
}
.articleListHelpfulTagBox{
    row-gap: 1vw;
    column-gap: 1vw;
}
#headerContents {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

#headerImgLogo {
    height: 4rem;
}

header h1 {
    float: left;
}

header a {
    text-decoration: none;
}

#gloathLeftNav {
    position: absolute;
    top: 4em;
    width: 22%;
    left: 0;
    border-radius: 0.16em;
    overflow: scroll;
    height: 100vh;
    display: block;
    height: auto;
    padding-bottom: 1em;
}
#leftNavFlexBox {
    row-gap: 1vw;
}

#gloathRightNav {
    position: absolute;
    top: 4em;
    width: 22%;
    right: 0;
    border-radius: 0.16em;
    overflow: scroll;
}

.gloathRightNavComponentLatestArticles {
    display: flex;
    flex-direction: column;
    row-gap: 0.32rem;
}

.gloathRightNavComponent {
    width: 100%;
}

#gloathchatbox {
    position: absolute;
    height: 95%;
    width: 22%;
    right: 0;
    top: 4em;
    border-radius: 0.16em;
    overflow: scroll;

}

#image {
    width: 50%;
}

#chatHeaderDiv {
    position: sticky;
    top: 0;
    width: 100%;;
}

#chatHeaderDiv h3 {
}

#inputbox {
    position: sticky;
    bottom: 0;
}

.inputWidth80 {
    width: 80%;
}

.width50 {
    width: 50%;
}

.inputWidth30 {
    width: 30%;
}


.postDiv {
    border-radius: 0.32em;
}

#postHistory {
}

.feedLink {
    border-radius: 0.2em;
}

.feedLink:hover {
    cursor: pointer;
}

.navSectionHeader {

}

#footerImgLogo {
    width: 2em;
}

.pointer:hover {
    cursor: pointer;
}

#pageContent {
    width: 50%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    row-gap: 0.5rem;
    margin: auto;
    padding-top: 1%;
    padding-bottom: 2%
}

#streamImage {
    width: 95%;
    min-width: 95%;


}

#pageContentBoundBox {
    min-height: 100vh;
}

#navToHome {
    text-align: center;
}

.noMargins {
    margin: 0;
}

#articleHeadImage {
    max-width: 98%;
}

.articleHeadlineMainText {
    text-transform: capitalize;
}

.floatLeft {
    float: left;
}

.floatRight {
    float: right;
}

.imgHalfWidth {
    width: 50%;
}

.img20Width {
    width: 20%;
}

.clearBoth {
    clear: both;
}
.alignItemsEnd {
    align-items: end;
}
.alignItemsCenter {
    align-items: center;
}
.alignContentCenter {
    align-content: center;
}

.textAlignCenter {
    text-align: center;
}

.textAlignLeft {
    text-align: left;
}

.textAlignRight {
    text-align: right;
}

.overflowHidden {
    overflow: hidden;
}

.overflowScroll {
    overflow: scroll;
}

.articleMediumListItem {
    clear: both;
    width: 100%;
    min-height: 13em;
    overflow: hidden;
    border-radius: 0.16em;
}

.articleMediumListItem:hover {
    cursor: pointer;
}

.articleMediumListItemImg {
    float: left;
    max-width: 50%;
    max-height: 77%;
}

.articleListItem {
    float: left;
    width: 48%;
    height: 13em;
    border-radius: 0.16em;
    overflow: inherit;
}

.outlineBorder {
    outline: 1px solid var(--primary);
}

.flexWrapWrap {
    flex-wrap: wrap;
}

.articleListItem:hover {
    cursor: pointer;
}

.articleListItemImg {
    float: left;
    max-width: 100%;
}

.articleListItemHeadline {
}

.articleListItemHeadlineSubtext {
}


.photoListItem {
    float: left;
    width: 100%;

    border-radius: 0.16em;

}

.photoListItemImg {
    max-height: 32vh;
    float: left;
    max-width: 32%;
}

.justifyText {
    text-align: initial;
    word-break: break-word;
}

.articleSocialMediaIcon {
    width: 1.28em;
    float: right;
}

#articleAuthorText {
    height: 2em;
}

#articleAuthorAndSocialDiv {
}

.lineHeightArticle {
    line-height: 1.56em;
}

#articleBody img {
}

.noUnderline {
    text-decoration: none;
}

.hoverUnderline:hover {
    text-decoration: underline !important;
}

.articleFeaturedListItem {
    width: 100%;
    overflow: hidden;
    min-height: 16em;
    background-size: cover !important;

}

.articleFeaturedListItemImg {
    max-width: 64%;
    height: 90%;
    float: left;
}


.dividerItem {
    width: 100%;
    height: 0.08em;
    clear: both;
    background-color: var(--primary);
}

.dividerItem2 {
    width: 100%;
    height: 0.08em;
    clear: both;
    background-color: var(--secondary);
}


.dividerItemWidth30 {
    width: 30%;
    height: 0.08em;
    clear: both;
}

.dividerItemWidth50 {
    width: 50%;
    height: 0.08em;
    clear: both;
}


.articleTagLink {
}

.marginBlue {
    margin: 1.28em;
}

.marginRed {
    margin: 0.512em;
}

.marginTopRed {
    margin-top: 0.512em;
}

.marginBottomRed {
    margin-bottom: 0.512em;
}

.marginLeftRed {
    margin-left: 0.512em;
}

.marginRightRed {
    margin-right: 0.512em;
}

.marginLeftAuto {
    margin-left: auto;
}

.marginRightAuto {
    margin-right: auto;
}

.paddingRed {
    padding: 0.512em;
    box-sizing: border-box;
}

.wugButton {
    border: 0;
    font-weight: 600;
}

.cinnobarButton {
    border: 2px solid black;
}

.navSectionMoreItems {

}

.articleFeaturedListItemOuterDiv {
    clear: both;
    width: 100%;
    display: flex;
    background-size: cover !important;
    background-position: center !important;
}

.marginBottomRed {
    margin-bottom: 0.512em;
}

.marginTopRed {
    margin-top: 0.512em;
}

.displayNone {
    display: none;
}

.pageCommentDiv {
    border-radius: 0.32em;
}

.pageCommentImg {
    width: 45%;

}

.pageCommentLeftBlock {
    /*width: 16%;*/
}

.pageCommentRightBlock {
    /* width: auto;*/
}

.textAlignLeft {
    text-align: left;
}

.loginBlockerDiv {
    border-radius: 0.256em;
    overflow: hidden;
}

.loginBlockerHeader {
}

.strong {
    font-weight: 700;
}

#userProfilePremiumImage {
    width: 4%;
    position: absolute;
    top: 20%;
    right: 32%;
}

.strawpoll-embed {
    margin: 2% !important;
}

.fontSizeHeader {
    font-size: 150%;
}

.fontSizeFeaturedHeadlineTitle {
    font-size: 3.2rem;
}

.fontSizeSmall {
    font-size: 0.7rem;
}

.paddingLeft0 {
    box-sizing: border-box;
    padding-left: 0;
}

.paddingRight0 {
    box-sizing: border-box;
    padding-right: 0;
}

.paddingTop0 {
    box-sizing: border-box;
    padding-top: 0;
}

.paddingBottom0 {
    box-sizing: border-box;
    padding-bottom: 0;
}

.paddingLightGrey {
    padding: 0.5%;
    box-sizing: border-box;
}

.paddingGrey {
    padding: 1%;
    box-sizing: border-box;
}

.paddingBottomGrey {
    padding-bottom: 1%;
    box-sizing: border-box;
}

.paddingGreyTop {
    padding-top: 1%;
    box-sizing: border-box;
}

.paddingBlue {
    padding: 2%;
    box-sizing: border-box;
}

.paddingBlueTop {
    padding-top: 2%;
    box-sizing: border-box;
}

.paddingBlueBottom {
    padding-bottom: 2%;
    box-sizing: border-box;
}

.marginBlue {
    margin: 2%;
}

.marginBlueTop {
    margin-top: 2%;
}

.marginBlueBottom {
    margin-top: 2%;
}

.marginPink {
    margin: 4%;
}

.marginPinkBottom {
    margin-bottom: 4%;
}

.marginPinkTop {
    margin-top: 4%;
}

.paddingPink {
    padding: 4%;
    box-sizing: border-box;
}

.paddingPinkRight {
    padding-right: 4%;
    box-sizing: border-box;
}

.paddingPinkLeft {
    padding-left: 4%;
    box-sizing: border-box;
}

.paddingPinkTop {
    padding-top: 4%;
    box-sizing: border-box;
}

.paddingPinkBottom {
    padding-bottom: 4%;
    box-sizing: border-box;
}

.paddingPinkBottom {
    padding-bottom: 4%;
    box-sizing: border-box;
}

.fontWeightPink {
    font-weight: 400;
}

/*Green*/
.fontWeightGreen {
    font-weight: 800;
}

/* Grey */
.imgGrey {
    width: 16%;
}

.minHeightGrey {
    min-height: 32%;
}

.maxHeight32 {
    max-height: 32%;
}

.maxHeight45 {
    max-height: 45%;
}
.maxHeight64vh {
    max-height: 64vh;
}


/** widths **/

.width8 {
    width: 8%;
}
.width16 {
    width: 16%;
}

.width20 {
    width: 20%;
}

.width25 {
    width: 25%;
}

.width32 {
    width: 32%;
}

.width45 {
    width: 45%;
}

.width62 {
    width: 62%;
}

.width64 {
    width: 64%;
}

.width85 {
    width: 85%;
}

.width95 {
    width: 95%;
}

.width100 {
    width: 100%;
}

.maxWidthPink {
    max-width: 2.56em;
}

.minWidth64 {
    min-width: 64%;
}

.height2 {
    height: 2%;
}

.height4 {
    height: 4%;
}

.height32 {
    height: 32%;
}

.height64 {
    height: 64%;
}

.height80 {
    height: 80%;
}


/** generic **/

.columns2 {
    column-count: 2;
    column-gap: 1em;
}

.header3 {
    font-size: 128%;
}

.font64 {
    font-size: 64%;
}

.dialogFullScreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(68, 68, 68, 0.32);
    z-index: 501;
    display:none;
}

.dialogFullScreenContent {
    width: 48%;
}

.marginAuto {
    margin: auto;
}

.toastDiv {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.toastDebugDiv {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.zindexDebug {
    z-index: 8;
}

.zindexToast {
    z-index: 1600;
}

.bold {
    font-weight: 1000;
}

.articleListItemPriceSub {
    color: aqua;
}

.articleListItemPrice {
    color: aquamarine;
}

#pageFab {
    background: var(--primary);
    font-size: 4em;
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 500;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    color: var(--fontPrimaryLight);
}

#itemImageCarousel img {
    width: 23%;
    background-color: var(--primary);
    float: left;
}

.backgroundColorBlack {
    background-color: var(--black);
}

.backgroundDarkTransparentGradient1 {
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,255,255,0.64) 16%, rgba(255,255,255,0.64) 84%, rgba(0,0,0,0) 100%);
}

.articleListLineItem1 {
    height: 8rem;
    float: left;
    display: flex;
}

.imgArticleListLineItem1 {
    height: 100%;
    aspect-ratio: 1/1;
    background: url('https://img.wug.nz/wuglogo2.png');
    background-position: center !important;
    background-size: cover !important;
}

.articleListLineItem1Headline {
    font-size: 1.1rem;
}

.lineListItemRightSection {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.displayFlex {
    display: flex;
}

.rowGap1 {
    row-gap: 1vw;
}

.rowGap2 {
    row-gap: 2vw;
}

.columnGapGrey {
    column-gap: 1%;
}

.columnGap2 {
    column-gap: 2vw;
}

.flexBasisContent {
    flex-basis: content;
}

.justifyContentCenter {
    justify-content: center;
}

.flexDirectionRow {
    flex-direction: row;
}

.flexDirectionColumn {
    flex-direction: column;
}

#profileEditMainBlock {
    flex-direction: column;
}

.borderRadius50 {
    border-radius: 50%;
}

.borderRadius32 {
    border-radius: 32%;
}

.borderRadius16 {
    border-radius: 16%;
}

.hoverBorder:hover {
    outline: 2px solid var(--primary);
}

.alignItemsCenter {
    align-items: center;
}

.positionAbsolute {
    position: absolute;
}

.rightNone {
    right: 0;
}

.leftNone {
    left: 0;
}

.backgroundPrimaryGradient1 {
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary) 55%, rgba(0, 0, 0, 0) 100%);
}

.backgroundPrimaryGradient2 {
    background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%, rgba(0, 0, 0, 0) 100%);
}

.backgroundPrimary {
    background-color: var(--primary);
}

.backgroundSecondary {
    background-color: var(--secondary);
}

.backgroundSizeCover {
    background-size: cover !important;
}

.fontWhite {
    color: var(--white);
}
.fontLight {
    color: var(--fontPrimaryLight);
}
.fontStrokeLight {
    -webkit-text-stroke: 1px var(--fontPrimaryLight);
}

.glButton1:hover {
    cursor: pointer;
}

.glButton4:hover {
    cursor: pointer;
}

.glButton1 {
    padding: 1%;
    margin: 0;
    margin-left:auto;
    margin-right:auto;
    box-sizing: border-box;
    background-color: var(--primary);
    border: 0;
    outline: 1px solid var(--fontPrimaryDark);
}

.glButton4 {
    padding: 4%;
    margin: 0;
    box-sizing: border-box;
    background-color: var(--primary);
    border: 0;
    outline: 1px solid var(--fontPrimaryDark);
}