.rulepage {
    position: relative;
    background: var(--gray);
    top: 0;
    left: 0;
    width: 100dvw;
    min-height: 100dvh;
    height: auto;
    overflow: hidden;
    display: none;
}

.categories {
    display: grid;
    justify-content: center;
    position: relative;
    gap: 0.5vw;
    background: var(--darkgray);
    width: 25vw;
    height: 75vh;
    margin: 4vw;
    clip-path: polygon(0 0, 90% 0, 100% 5%, 100% 100%, 7.5% 100%, 0 95%);
}

.categoryTitle {
    position: relative;
    font-size: 3vmin;
    font-family: var(--mediumfont);
    font-weight: bold;
    text-align: left;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 2px;
    top: 1vh;
}

.categoryBox {
    display: flex;
    align-items: center;
    background: var(--nightgray);
    position: relative;
    cursor: pointer;
    height: 7vh;
    width: 20vw;
    bottom: 2.5vh;
    clip-path: polygon(0 0, 90% 0, 100% 40%, 100% 100%, 100% 100%, 0 100%);
}

.categoryBox:hover {
    background: var(--yellow);
}

.categoryBox:hover .categoryNumberBox {
    background: var(--black);
    color: var(--white);
}

.categoryBox:hover .categorySubtitle {
    color: var(--black);
}


.categoryNumberBox {
    position: relative;
    font-size: 2vmin;
    left: 1vw;
    font-family: var(--mediumfont);
    font-weight: bold;
    color: var(--black);
    padding: 0.2vw 0.8vw;
    background: var(--yellow);
    border-radius: 4px;
}

.categorySubtitle {
    position: relative;
    font-size: 2vmin;
    left: 2vw;
    font-family: var(--regularfont);
    color: var(--white);
    text-transform: capitalize;
    letter-spacing: 1px;
}

.categoryActive {
    background: var(--yellow);
}

.categoryActive .categoryNumberBox {
    background: var(--black);
    color: var(--white);
}

.categoryActive .categorySubtitle {
    color: var(--black);
}

.rulebox {
    display: grid;
    justify-content: center;
    align-items: start;
    position: relative;
    width: 80vw;
    height: 100vh;
    right: 3.4vw;
    top: 0;
    overflow-y: scroll;
    overflow-x: hidden !important;
}

.rulebox::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.05);
	border-radius: 10px;
	background-color: transparent;
    margin-top: 7.8vh;
}

.rulebox::-webkit-scrollbar
{
	width: 8px;
	background-color: transparent;
}

.rulebox::-webkit-scrollbar-thumb
{
	border-radius: 10px 0px 0px 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: var(--yellow);
}

.ruleset {
    position: relative;
    display: grid;
    gap: 2vh;
    width: 60vw;
    height: auto;
    left: 4vw;
    top: 7.8vh;
    padding-bottom: 3vh;
    margin-right: 10vw;
}

.ruleset:last-child {
    margin-bottom: 15vh;
}

.rule {
    display: flex;
    flex-wrap: wrap;
    background: var(--nightgray);
    padding: 1.5vh 1vw;
    width: 100%;
    border-radius: 4px;
    align-items: center;
    position: relative;
}

.ruleNumber {
    font-family: var(--mediumfont);
    font-size: 2vmin;
    color: var(--black);
    background: var(--yellow);
    padding: 0.5vh 0.5vw;
    border-radius: 4px;
}

.ruleTitle {
    position: relative;
    font-family: var(--mediumfont);
    font-size: 2.3vmin;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 2px;
    left: 1vw;
    user-select: text;
}

.ruleText {
    position: relative;
    top: -1vh;
    font-family: var(--lightfont);
    color: var(--white);
    max-width: 100%;
    font-size: 2vmin;
    user-select: text;
}

.subParagraph {
    position: relative;
    font-family: var(--regularfont);
    font-size: 1.8vmin;
    color: var(--white);
    letter-spacing: 1px;
    word-spacing: 1px;
    word-break: keep-all;
    background: var(--nightgray);
    padding: 0.2vh 0.3vw;
    border-radius: 4px;
}

.referenceURL {
    color: var(--yellow);
}