*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

body {
    font-family: "Outfit", sans-serif;
    background-color: #232343;
    color: #CE1260;
    max-width: 100%;
    overflow-x: hidden;
}

.container {
    display: flex;
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 380px) {
    .container {
        margin-bottom: 2rem;
    }
    }

.title {
font-size: 5rem;
letter-spacing: 1rem;
padding: 1.5rem 0rem -1rem;
margin: 8rem 0rem 0rem;
}

@media (max-width: 800px) {
    .title {
        margin: 8rem 0rem 0rem;
        font-size: 4rem;
    }
    }

    @media (max-width: 550px) {
        .title {
            margin: 8rem 0rem 0rem;
            font-size: 2.7rem;
            letter-spacing: 0.2rem;
        }
        }

.info {
    font-weight: 300;
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
    margin: 0 0 2rem;
}

@media (max-width: 800px) {
    .info {
        font-size: 1.3rem;
    }
    }

    @media (max-width: 550px) {
        .info {
            font-size: 1rem;
            letter-spacing: 0rem;
        }
        }

.titlebox {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}


.MenuCheck {
    display: none;
}

.Menu {
    z-index: 2;
    display: flex;
    justify-content:center ;
    align-items: center;
    position: fixed;
    top: 3rem;
    right: 1.67rem;
    height: 60px;
    width: 60px;
    cursor: pointer;
    transition: color 0.15s;
}

@media (max-width: 1000px) {
    .Menu {
        position: absolute;
    }
    }

.MenuCheck:checked + label {
    color: #e85290;
}

@media (max-width: 1000px) {
    .MenuCheck:checked + label {
        background-color: #232343;
        padding: 1rem;
        border-radius: 10px;
        
    }
    }

.Menu:hover {
    color: #e85290;
    cursor: pointer;
}

.MenuIcon {
    font-size: 3rem;
}

#CreditsOpen {
    transition: 0.25s;
}

.CreditsOpen {
    display: none;
    z-index: 2;
    font-size: 2.5rem;
    color: #CE1260;
    position: fixed;
    right: 2.35rem;
    top: 14.5rem;
    transition: color 0.15s;
}

@media (max-width: 1000px) {
    .CreditsOpen {
        display: block;
        position: absolute;
        right: 14rem;
        top: 2.4rem;
        background-color: #232343;
        padding: 0.7rem;
        border-radius: 10px;
        
    }
    }

.CreditsOpen:hover {
    color: #e85290;
    cursor: pointer;
}

.BlackoutContainer {
    position: absolute;
    background-color: #232343;
    width: 100%;
    height: auto;
    top: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    display: none;
}

.CloseCredits {
    position: absolute;
    top: 3rem;
    right: 2.2rem;
    transition: 0.15s;
}

.CreditsClose {
    font-size: 3rem;
    cursor: pointer;
}

.CloseCredits:hover {
    color: #EB1E73;
}

.credits {
    font-size: 1.5rem;
    text-align: justify;
    line-height: 2;
}

@media (max-width: 900px) {
    .credits {
        font-size: 1rem;
    }
    }

.creditsIntro {
    font-size: 2rem;
    text-align: center;
    letter-spacing: 0.2rem;
    line-height: 1.8;
    margin: 0 0 8rem;
    padding: 0 10rem;
    margin-top: 13rem;
}

@media (max-width: 1150px) {
    .creditsIntro {
        padding: 0 5rem;
        font-size: 1.5rem;
    }
    }

    @media (max-width: 900px) {
        .creditsIntro {
            padding: 0 3rem;
            margin: 10rem 0 8rem;
        }
        }

        @media (max-width: 750px) {
            .creditsIntro {
                padding: 0 1rem;
                margin: 8rem 0 5rem;
            }
            }

.creditsHeader {
    font-size: 2.5rem;
    text-align: left;
    text-transform: uppercase;
    margin-bottom: 3rem;
    letter-spacing: 0.5rem;
}

@media (max-width: 900px) {
    .creditsHeader {
        font-size: 1.5rem;
    }
    }

.textbox1 {
    background-color: #31315e67;
    padding: 5rem;
}

@media (max-width: 900px) {
    .textbox1 {
        padding: 5rem 2rem;
    }
    }

.textbox2 {
    padding: 5rem;
}

@media (max-width: 900px) {
    .textbox2 {
        padding: 5rem 2rem;
    }
    }

.creditsList {
text-align: left;
margin-left: 5rem;
margin-top: 2rem;
}

@media (max-width: 900px) {
    .creditsList {
        margin-left: 2rem;
    }
    }

.creditsEnt {
    line-height: 2;
    color: #CE1260;
    transition: color 0.2s;
}

.creditsEnt:hover {
    color: #e85290;
}

.creditsEnt:hover > .creditsLink {
    opacity: 100%;
    transform: translateX(0);
}

.creditsLink {
    color: #e85290;
    margin: 0 0.1rem 0;
    font-size: 1rem;
    opacity: 0%;
    transition: 0.5s;
    transform: translateX(-10px);
}

.submitText {
    margin: 1rem 0 0;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
}

.SignOff {
    text-align: center;
    font-size: 2.2rem;
    line-height: 2;
}

@media (max-width: 900px) {
    .SignOff {
        font-size: 1.5rem;
    }
    }

.and {
    text-align: center;
    margin-top: 1rem;
    font-size: 4rem;
    line-height: 2;
}

@media (max-width: 900px) {
    .and {
        font-size: 3;
    }
    }

.creditsEnding {
    display: flex;
    margin-inline: auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.creditsEndingA {
    background-color: #31315E;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    color: #DED3BA;
    border-radius: 15px;
    filter: brightness(0.9);
    transition: 0.15s;
    text-decoration: none;
}

.creditsEndingA:hover {
    filter: brightness(1);
}

.creditsEndingP {
    background-color: #31315E;
    cursor: default;
    padding: 1.5rem;
    text-align: center;
    color: #DED3BA;
    border-radius: 15px;
    filter: brightness(0.9);
    transition: 0.15s;
    text-decoration: none;
}

.SignOffLink {
    color: #CE1260;
    transition: 0.15s;
}

.SignOffLink:hover {
    color: #e85290;
}

.link {
    color: #CE1260;
    transition: 0.15s;
}

.link:hover {
    color: #e85290;
}

.SubmitSuggestion {
    margin-top: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    margin-inline: auto;
    text-decoration: none;
    color: #CE1260;
    font-size: 2rem;
    transition: 0.25s;
    text-align: center;
}

@media (max-width: 800px) {
    .SubmitSuggestion {
        font-size: 1.5rem;
    }
    }

    @media (max-width: 500px) {
        .SubmitSuggestion {
            font-size: 1rem;
        }
        }

.SubmitSuggestion:hover {
    color: #e85290;
}

.mailIconSub {
    font-size: 1.5rem;
    margin-left: 0.5rem;
}

@media (max-width: 800px) {
    .mailIconSub {
        font-size: 1rem;
    }
    }

.Reset {
    display: none;
    z-index: 2;
    cursor: pointer;
    position: fixed;
    right: 2.3rem;
    top: 6.1rem;
    border-radius: 10px;
    font-size: 3rem;
    border: none;
    transition: 0.15s;
    font-weight: 400;
    transition: 0.25s;
    background-color: rgba(255, 222, 173, 0);
}

.ResetBtn {
    color: #CE1260;
    font-size: 2.5rem;
    transition: 0.25s;
}

@media (max-width: 1000px) {
    .Reset {
        display: block;
        position: absolute;
        right: 6rem;
        top: 1.8rem;
        background-color: #232343;
        padding: 0.7rem;
        border-radius: 10px;
        
    }
    }

.ResetBtn:hover {
    color: #e85290;
}

.OpenClose {
    display: none;
    cursor: pointer;
    z-index: 2;
    border: none;
    background-color: #08178700;
    color: #CE1260;
    font-size: 2.5rem;
    position: fixed;
    right: 2.35rem;
    top: 10.5rem;
    transition: 0.25s;
}

.OpenClose:hover {
    color: #e85290;
}


.OpenCloseCheck:checked + label {
    color: #e85290;
}

@media (max-width: 1000px) {
    .OpenClose {
        display: block;
        position: absolute;
        right: 10rem;
        top: 2.35rem;
        background-color: #232343;
        padding: 0.7rem;
        border-radius: 10px;
        
    }
    }

.FilterInfo {
    margin-top: 4.5rem;
    font-size: 1.3rem;
    text-align: left;
    font-weight: 400;
    letter-spacing: 0.1rem;
}

@media (max-width: 550px) {
    .FilterInfo {
        margin-top: 2rem;
        font-size: 1rem;
        letter-spacing: 0rem;
        margin-bottom: 0.2rem;
    }
    }

.icon {
    margin: 0 0.5rem 0 0 ;
}

@media (max-width: 550px) {
    .icon {
        font-size: 1rem;
    }
    }

.tagcontainer {
    display: grid;
    margin-inline: auto;
    width: 85%;
}

.sections {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0 1rem;
    list-style-type: none;
    align-items: center;
    justify-content: center;
}

.Radio {
    grid-area: 1 / 1 / 2 / 2;
}

.Film {
    grid-area: 1 / 2 / 2 / 3;
}

.Game {
    grid-area: 1 / 3 / 2 / 4;
}

.typebtn {
    margin: 0.5rem 0 0 0;
    background-color: #31315E;
    color: #DED3BA;
    border: none;
    font: inherit;
    border-radius: 15px;
    padding: 2rem 0;
    font-size: 1.5rem;
    transition: 0.15s;
    text-align: center;
    cursor: pointer;
    filter: brightness(0.9);
}

@media (max-width: 500px) {
    .typebtn {
        font-size: 1rem;
        padding: 1.5rem 0;
    }
    }

.typebtn:hover {
filter: brightness(1);
}

input[type=checkbox]{
    display: none;
}

/* FIX TURNED ON LIGHT*/

.RadioCheck:checked + label {
    filter: brightness(1.5)
}

.TypeGrid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
}

@media (max-width: 800px) {
    .TypeGrid {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    }

    @media (max-width: 400px) {
        .TypeGrid {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        }
        }

.BookJS {
    grid-area: 1/1/2/2;
    
}

@media (max-width: 800px) {
    .BookJS {
        grid-area: 1/1/2/3;
    }
    }

    @media (max-width: 400px) {
        .BookJS {
            grid-area: 1/1/2/3;
        }
        }

.BlogJS {
    grid-area: 1/2/2/3;
}

@media (max-width: 800px) {
    .BlogJS {
        grid-area: 1/3/2/5;
    }
    }

    @media (max-width: 400px) {
        .BlogJS {
            grid-area: 2/1/3/3;
        }
        }

.ForumJS {
    grid-area: 1/3/2/4;
}

@media (max-width: 800px) {
    .ForumJS {
        grid-area: 1/5/2/7;
    }
    }

    @media (max-width: 400px) {
        .ForumJS {
            grid-area: 3/1/4/3;
        }
        }

.TutorialJS {
    grid-area: 1/4/2/5;
}

@media (max-width: 800px) {
    .TutorialJS {
        grid-area: 2/1/3/4;
    }
    }

    @media (max-width: 400px) {
        .TutorialJS {
            grid-area: 4/1/5/3;
        }
        }

.ShowJS {
    grid-area: 1/5/2/6;
}

@media (max-width: 800px) {
    .ShowJS {
        grid-area: 2/4/3/7;
    }
    }

    @media (max-width: 400px) {
        .ShowJS {
            grid-area: 5/1/6/3;
        }
        }

.typefilt {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    font: inherit;
    border-radius: 15px;
    font-size: 1.2rem;
    transition: 0.15s;
    color: #EBE4D5;
    filter: brightness(0.8);
    padding: 1.4rem 1rem;
}

@media (max-width: 1200px) {
    .typefilt {
        font-size: 1rem;
    }
    }



.typefilt:hover {
    filter: brightness(1);
}

.typefilt2 {
    border-radius: 0 15px 15px 0;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #EBE4D5;
    filter: brightness(0.8);
}

.typefilt2:hover {
    filter: brightness(1);
}

.typearrow:hover {
    transition: 0.15s;
}

.TypeCheck:checked + .typefilt {
    filter: brightness(1.5)
}

.subtypefilt {
    cursor: pointer;
    margin: 0rem 0.4rem;
    background-color: #31315E;
    color: #DED3BA;
    font-size: 1.2rem;
    padding: 1.3rem 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    filter: brightness(0.8);
    transition: 0.15s;
}

@media (max-width: 1200px) {
    .subtypefilt {
        margin: 0.5rem 0.4rem 0;
    }
    }

.subtypefilt:hover {
    filter: brightness(1);
}

.SubTypeCheck:checked + .subtypefilt {
    filter: brightness(1.5)
}

.introtextbox {
    margin: 3rem 0 20rem;
    display: none;
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
}

.introheader {
    font-weight: 400;
    font-size: 3rem;
}

.divider {
    display: flex;
    flex-direction: row;
    width: 90%;
    margin: 0 0 2rem ;
    margin-inline: auto;
    align-items: center;
    justify-content: center;
}

.dividingLine{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    flex-direction: row;
    width: 85%;
    margin-inline: auto;
    justify-content: space-between;
    align-items:end;
}

@media (max-width: 500px) {
    .dividingLine {
        display: flex;
    }
    }

.searcher{
    grid-area: 1 / 1 / 2 / 3;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}



.searchClear {
    margin: 0 0 0 1rem;
    cursor: pointer;
    font-size: 2rem;
    color: #EBE4D5;
    filter: brightness(0.7);
    transition: 0.25s;
}

.searchClear:hover{
    filter: brightness(0.9);
}

.line {
    margin:0 0 4rem;
    margin-inline: auto;
    width: 85%;
    color: #EBE4D5;
    filter: brightness(0.7);
}

.entryCount{
    grid-area: 1 / 3 / 2 / 4;
    text-align: right;
    font-size: 1.2rem;
    color: #EBE4D5;
    filter: brightness(0.7);
    margin-bottom: 0.5rem;
}

@media (max-width: 1150px) {
    .entryCount {
        font-size: 1rem;
    }
    }

@media (max-width: 500px) {
    .entryCount {
        display: none;
    }
    }

.Search {
    filter: brightness(0.7);
display: block;
width: 70%;
background-color: #23234300;
font: inherit;
border-radius: 10px;
border: none;
height: auto;
padding: 0.5rem 1rem;
color: #EBE4D5;
font-size: 1.5rem;
background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    transition: 0.25s;
}

::placeholder {
    color: #EBE4D5;
    font-size: 1.5rem;
  }

.introtext {
    margin: 1rem 15rem 0;
    text-align: center;
    font-weight: 300;
    font-size: 1.5rem;
}

.entry {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background-color: #2A2A50;
    margin: 0 0 1rem;
    margin-inline: auto;
    border-radius: 10px;
    width: 85%;
    padding: 1rem 1rem 2rem 2rem;
    text-decoration: none;
    height: 90px;
    overflow: hidden;
    max-height: 120px;
    transition: filter 0.2s, transform 0.5s, max-height 1s;
}

    @media (max-width: 500px) {
        .entry {
            padding: 0.5rem 0rem 1rem 1rem;
            height: 55px;
        }
        }

.entry:hover {
    filter: brightness(1.2);
}

.EntryCheck:checked + label {
    filter: brightness(1.2);
    height: auto;
    max-height: 500px;
}

.enttopbar {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

@media (max-width: 950px) {
    .enttopbar {
        margin-bottom: 1rem;
    }
    }

.enttitle {
    display: block;
    font-size: 2rem;
    color: #CE1260;
    text-decoration: none;
    transition: color 0.2s;
}

@media (max-width: 1150px) {
    .enttitle {
        font-size: 1.5rem;
    }
    }

    @media (max-width: 550px) {
        .enttitle {
            font-size: 1rem;
        }
        }

.enttitle:hover {
    color: #e85290;
}

.enttitle:hover > .LinkArrow {
    opacity: 100%;
    transform: translateX(0);
}


.LinkArrow {
    color: #e85290;
    margin: 0 0.5rem 0;
    font-size: 1.5rem;
    opacity: 0%;
    transition: 0.5s;
    transform: translateX(-10px);
}

@media (max-width: 500px) {
    .LinkArrow {
        display: none;
    }
    }


.entinfo {
    display: block;
    font-size: 1.2rem;
    font-weight: 200;
    color: #CE1260;
    text-align: justify;
}

@media (max-width: 950px) {
    .entinfo {
        font-size: 1rem;
    }
    }

    @media (max-width: 500px) {
        .entinfo {
            font-size: 1rem;
            margin-right: 0.8rem;
        }
        }

.entright {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.enttype {
    margin: 0 0.5rem;
    font-size: 1rem;
    background-color: #2A2A50;
    color: #F2EDE3;
    border-radius: 10px;
    height: auto;
    width: auto;
    overflow: hidden;
}

@media (max-width: 500px) {
    .enttype {
        font-size: 0.8rem;
    }
    }

.enttag {
    display: flex;
    justify-content: right;
    align-items: center;
    filter: brightness(1);
    background-color: #38386B;
    color: #F2EDE3;
    padding: 0.75rem 1rem;
    opacity: 0.75;
    border-radius: 10px;
    margin: 0 0.5rem;
    font-size: 1rem;
}

@media (max-width: 900px) {
    .enttag {
        padding: 0.75rem 0.5rem;
        margin: 0 0.2rem;
        font-size: 0.8rem;
    }
    }

    @media (max-width: 800px) {
        .enttag {
            display: none;
        }
        }

.EntIcon {
    margin: 0 1rem 0 0;
}

@media (max-width: 500px) {
    .EntIcon {
        margin: 0 0.5rem 0 0;
    }
    }

.entname {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0rem;
    z-index: 3;
}

/*
.entfilt {
    padding: 0.5rem 1.5rem;
    margin: 0 0.5rem;
    font-size: 1rem;
    color: #EBE4D5;
    filter: brightness(1.2);
    border-radius: 10px;
}*/

.entfilt {
    grid-area: 1/2/2/3;
    filter: brightness(1.2);
    opacity: 0.75;
}

.entsub {
    display: flex;
    justify-content: right;
    align-items: center;
    filter: brightness(1.2);
    padding: 1rem;
    opacity: 0.75;
}

@media (max-width: 500px) {
    .entsub {
        padding: 0.5rem;
    }
    }



/*
.entsub {
    padding: 0.5rem 1.5rem;
    margin: 0 0.5rem;
    font-size: 1rem;
    color: #EBE4D5;
    filter: brightness(1.2);
    border-radius: 10px;
}*/


.Book {
    background-color: #8F0005;
}

.Blog {
    background-color: #8F3700;
}

.Forum {
    background-color: #8F6900;
}

.Tutorial{
    background-color: #537817;
}

.Show{
    background-color: #10547E;
}

.TableList {
    margin-bottom: 5rem;
}

.endSection {
    position: fixed;
    bottom: 0px;
    left: 0px;
    height: 35px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: #2A2A50;
    padding: 0.2rem;
}

@media (max-width: 1000px) {
    .endSection {
        height: 30px;
    }
    }

.sendSuggestion {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    align-items: baseline;
    color: #CE1260;
    font-size: 1.2rem;
    transition: 0.25s;
}

.sendSuggestion:hover {
    color: #e85290;
}

.mailIcon {
    margin: 0 0 0 0.5rem;
    font-size: 1rem;
    }

@media (max-width: 1000px) {
    .sendSuggestion {
        font-size: 1rem;
    }
    }

    @media (max-width: 1000px) {
        .endText {
            display: none;
        }
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        td, th {
            width: 100%;
        }


/* Help section */

.helpLabel {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    position: absolute;
    right: 10rem;
    top: 23rem;
    font-size: 1.7rem;
    rotate: -5deg;
    transition: 0.25s;
    z-index: 2;
}

@media (max-width: 800px) {
    .helpLabel {
        top: 21.5rem;
        right: 1rem;
        font-size: 1.3rem;
    }
    }

    @media (max-width: 550px) {
        .helpLabel {
            top: 17rem;
            right: 1.3rem;
            font-size: 1rem;
        }
        }

        @media (max-width: 380px) {
            .helpLabel {
                top: 17rem;
                right: 1.5rem;
                font-size: 1rem;
            }
            }

.helpText {
    position: relative;
    left: 0.2rem;
    top: 0.5rem;
}

.helpLabel:hover {
    color: #e85290;
    rotate: 2deg;
}

.helpInput:checked + label {
    color: #e85290;
    rotate: 2deg;
}

.helpArrow {
    position: relative;
    top: 0.5rem;
    rotate: 186deg;
    font-size: 1.2rem;
}

@media (max-width: 800px) {
    .helpArrow {
        font-size: 1rem;
    }
    }

    @media (max-width: 550px) {
        .helpArrow {

            font-size: 0.8rem;
        }
        }

.helpBox {
    display: none;
}

.helpFont {
    color: #DED3BA; 
    font-size: 1.2rem;
}

.helpMediums {
    margin: 0 0 4rem 1.5rem;
    text-align: left;
}

@media (max-width: 800px) {
    .helpMediums {
        margin: 0 0 2rem 1.5rem;
    }
    }

.helpMediumsArrow {
    position: relative;
    rotate: 180deg;
    bottom: 0.5rem;
    right: 0.2rem;
}

@media (max-width: 800px) {
    .helpMediumsArrow {
        display: none;
    }
    }

.helpFormats {
    margin: 0 4rem 2.5rem ;
    text-align: right;
}

@media (max-width: 800px) {
    .helpFormats {
        margin: 0 2rem 2rem;
    }
    }

.helpFormatsArrow {
    position: relative;
    bottom: 0.3rem;
    left: 0.2rem;
}

@media (max-width: 898px) {
    .helpFormatsArrow {
display: none;
    }}

.helpList {
    list-style-type: none;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1.5rem 0 2rem;
}

@media (max-width: 800px) {
    .helpList {
        margin: 1rem 0 1rem;
    }
    }

    @media (max-width: 650px) {
        .helpList {
            justify-content: start;
        }
        }

.helpListEnt {
    display: inline;
    padding: 1rem 2rem;
    border-radius: 15px;
    margin: 0 0.5rem;
}

@media (max-width: 800px) {
    .helpListEnt {
        padding: 0.5rem 0.5rem;
    }
    }

.helpSearch {
    width: 78%;
    margin: 2.5rem 0 0.1rem;
    margin-inline: auto;
    text-align: left;
}

.helpSearchArrow {
    position: relative;
    rotate: 180deg;
    top: 0.5rem;
    right: 0.4rem;
}

@media (max-width: 800px) {
    .helpSearchArrow {
        display: none;
    }
    }

.helpEntTips {
    flex-direction: row;
    flex-wrap: wrap;
}

.helpEnts {
    width: 75%;
    margin: 2.5rem 0 1rem;
    margin-inline: auto;
}

.helpEntsArrow {
    position: relative;
    rotate: 180deg;
    top: 0.5rem;
    right: 0.4rem;
}

@media (max-width: 800px) {
    .helpEntsArrow {
        display: none;
    }
    }

.helpEnts2 {
    width: 75%;
    margin: 2.5rem 0 1rem;
    margin-inline: auto;
    text-align: right;
}

.helpEntsArrow2 {
    position: relative;
    top: 0.5rem;
    left: 0.4rem;
}

@media (max-width: 800px) {
    .helpEntsArrow2 {
        display: none;
    }
    }

    @media (max-width: 500px) {
        .helpFont {
            font-size: 1rem;
            text-align: center
        }
        }