html {
height: 100%;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}
/* globals */
.fill-avialable {
width: -webkit-fill-available;
width: -moz-available;
}
.snap {
scroll-snap-align: start;
}
.top-radius {
border-top-left-radius: 0.2rem;
border-top-right-radius: 0.2rem;
}
.bottom-radius {
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
body{
margin: 0;
padding: 0;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
color: #fff1ea;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.623);
overflow-x: hidden;
background-color: rgb(78, 31, 13);
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: rgb(220, 252, 134)
}
a:hover {
color: rgb(107, 255, 144);
}
.headline-grid-container {
/* scroll-snap-align: start; */
display: grid;
grid-template-rows: 0fr 0.5fr;
}
.headline-grid-container h1 {
cursor: pointer;
font-family: "Yellowtail", cursive;
color: rgb(255, 206, 160);
font-size: 4rem;
text-align: center;
width: 100%;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.438), 0px -2px 0px rgb(224, 128, 73), 0px 1px 0px rgb(255, 153, 69);
}
.headline-grid-container h1:hover {
transition: 0.3s;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.438), 0px -2px 0px rgb(224, 128, 73), 0px 1px 4px rgb(255, 153, 69), 0px -1px 5px rgb(255, 255, 255);
}
.headline-grid-item {
display: grid;
grid-row: 1;
align-content: center;
background-color: hsl(0deg 42.44% 28.3%);
border: 1px solid rgb(228, 153, 110);
border-left: none;
border-right: none;
}
.headline-grid-item > h1 {
justify-self: center;
margin: 0rem 0rem 2rem 0rem;
padding: 1rem 0rem 1rem 0rem;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.438), 0px 0px 0px 1px rgba(255, 139, 139, 0.329) inset;
border-bottom: 1px solid #7f2121;
border-top: 1px solid #351c1c;
background-image:
radial-gradient(ellipse at top, black, rgba(151, 0, 0, 0.459)),
repeating-linear-gradient(80deg, #363636, #0000008c 1px, #363636 1px, #0000008c 1.8px);
box-shadow: 0px 1px 30px 14px rgb(0 0 0), 0px 56px 10px -13px rgb(28 9 9) inset;
}
.headline-grid-item > a:nth-of-type(-n+2) {
border-right: 1px solid rgba(228, 153, 110, 0.164) !important;
}
.temp-navbar {
/* scroll-snap-align: start; */
display: grid;
grid-row: 2;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
justify-items: center;
box-shadow: 0px 0px 25px 5px rgb(231, 122, 71);
/* background-color: rgb(97, 26, 9); */
background-image: radial-gradient(ellipse at top, black, rgba(151, 0, 0, 0.459)),
repeating-linear-gradient(80deg, #363636, #0000008c 1px, #363636 1px, #0000008c 1.8px);
}
h2 {
font-size: 1em;
}
.temp-navbar a {
grid-row: 2;
cursor: pointer;
margin: 0.3rem;
width: 100%;
height: fit-content;
text-align: center;
font-size: 1em;
border-top: 1px solid hsl(15.58deg 65.82% 30.98% / 47%);
background-color: hsl(15.58deg 65.82% 30.98% / 47%);
color: rgb(255, 206, 160);
text-shadow: 0px 0px 3px rgba(17, 15, 15, 0.842);
}
.temp-navbar a:hover {
transition: 0.3s;
background-color: rgba(194, 76, 47, 0.84);
}
.temp-navbar a:active {
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.322) inset;
background-color: rgba(194, 76, 47, 0.521);
}
h2 > hr {
margin: 0;
visibility: hidden;
}
.icon-style{
mix-blend-mode: soft-light;
filter: invert(100%) drop-shadow(0px 1px 1px rgb(0, 0, 0));
}
.decoration-bar {
position: relative;
top: 0rem;
height: 1rem;
border-top: 1px solid rgba(192, 115, 80, 0.664);
background-image: linear-gradient(rgb(29, 11, 0), rgb(0 0 0 / 60%));
}
/* page main background, container */
.main-content-grid-container {
/* scroll-snap-align: start; */
display: grid;
grid-template-columns: 0rem auto 0rem;
grid-template-rows: auto;
gap: 1rem;
row-gap: 2rem;
height: 100%;
padding: 1.5rem 0rem 0rem 0rem;
justify-items: center;
justify-content: space-around;
border-top: 1px solid rgb(116, 55, 55);
border-bottom: 1px solid rgb(161, 99, 88);
box-shadow: 0px 0px 50px 0px rgba(255, 193, 136, 0.589);
background-color: rgb(22 0 0);
}
.main-content-grid-container > a {
grid-column: 2;
width: 100%;
height: 7rem;
grid-row: auto;
}
.main-content-grid-container > div:first-of-type(1) {
grid-column: 2;
}
/* Release core section overhead */
.main-content-grid-item {
/* scroll-snap-align: start; */
display: grid;
grid-row: 1;
grid-column: 2;
grid-template-columns: 1fr 1fr;
padding: 0.2rem 0.2rem 0.2rem 0.2rem;
border-radius: 0.2rem;
border: 2px solid rgb(155 41 41);
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.438), 0px 0px 0px 1px rgba(255, 255, 255, 0.336) inset;
background-color: rgb(238, 132, 61);
}
.main-content-grid-item:hover {
transition: 0.3s;
box-shadow: 0px 0px 0px 2px rgb(167, 97, 57), 0px 0px 0px 1px rgba(255, 255, 255, 0.336) inset;
background-color: rgb(255, 149, 78);
}
/* left-hand-upper-section STARTS */
.main-content-grid-item > div:nth-of-type(1) {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 3.57rem auto 4rem;
grid-row: 1;
grid-column: 1;
padding: 0;
width: 100%;
height: fit-content;
text-align: center;
border-top: 1px solid #713232;
border-bottom: 1px solid #713232;
background-color: #d6763e;
}
.main-content-grid-item > div > h3, .vault-display-height > h3 {
display: grid;
grid-row: 1;
grid-column: auto;
height: 3.5rem;
text-align: center;
align-items: center;
margin: 0;
width: 100%;
font-size: medium;
border-bottom: 1px solid rgb(255 164 107);
background: rgb(44, 26, 14);
}
#release-image-casing {
/* scroll-snap-align: start; */
display: grid;
grid-row: 2;
grid-column: span 2;
height: fit-content;
justify-items: center;
align-items: center;
padding: 0.5rem;
background-color: rgb(214, 118, 62);
}
.release-download-container {
/* scroll-snap-align: start; */
display: grid;
grid-template-columns: 1fr;
grid-column: span 2;
grid-row: 3;
align-items: center;
justify-self: center;
width: 80%;
border-top: 1px solid rgb(126, 255, 126);
border-top-left-radius: 0.2rem;
border-top-right-radius: 0.2rem;
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.219), 0px 0px 0px 1px rgba(255, 255, 255, 0.075) inset;
background: rgba(144, 238, 144, 0.692);
}
#release-image-clamp {
cursor: pointer;
max-width: 100%;
width: 100%;
height: auto;
padding: 0.2rem;
justify-self: center;
border: 1px solid #713232;
background-color: #a34e2f;
}
.release-download-container > button {
display: grid;
text-align: center;
}
.release-download-container > a {
justify-self: center;
width: -webkit-fill-available;
width: -moz-available;
}
.release-download-container > a > button {
cursor: pointer;
padding: 1rem;
width: 100%;
color: rgb(19, 66, 7);
background-color: transparent;
font-weight: bold;
text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.438);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.589), 0px 0px 0px 1px rgba(255, 255, 255, 0.075) inset;
border: none;
}
.release-download-container > a > button:hover {
transition: 0.3s;
background-color: rgba(124, 255, 124, 0.74);
}
/* LEFT HAND SECTION END */
/* RIGHT HAND SECTION START */
.main-content-grid-item > div:nth-of-type(2) {
display: grid;
position: relative;
overflow-x: auto;
overflow-x: hidden;
grid-template-columns: auto auto;
grid-template-rows: 3.57rem auto auto;
grid-column: 2;
background-color: #1f0e0c;
}
#release-blurb-h3 {
z-index: 1;
height: 3.5rem;
grid-row: 1;
grid-column: span 2;
background-color: rgb(21, 23, 37) !important;
border-left: 1px solid rgb(49, 49, 66);
border-bottom: 1px solid rgb(61 75 141);
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.651);
}
.release-information-blurb {
scroll-snap-type: y mandatory;
grid-row: 2;
position: absolute;
display: flex;
flex-direction: column;
overflow-y: auto;
grid-column: span 2;
text-align: left;
height: -webkit-fill-available;
padding-bottom: 20rem;
background-color: #08251b;
border-left: 1px solid #ffa7a7;
}
.release-information-blurb > h3, .release-shoutboard-container > p {
padding: 1rem;
margin: 0;
text-align: center;
background-color: #6e2300;
}
.release-information-blurb > h3 {
scroll-snap-align: start;
background-image: linear-gradient(0deg, #1f6b51, #103a2b);
border-bottom: 1px solid #389c7b;
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.473);
}
.release-information-blurb > hr, .release-shoutboard > hr, .pinned-comments-container > hr, .awards-container > hr {
width: 50%;
margin: 2rem auto 2rem auto;
border: 1px dashed rgba(255, 255, 255, 0.2);
}
.release-information-blurb > p, .release-shoutboard > div > p, .pinned-comments-container > p {
margin: 0;
padding: 2rem;
line-height: 1.5em;
max-width: 26rem;
align-self: center;
height: -webkit-fill-available;
}
.release-shoutboard-container{
scroll-snap-align: start;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto;
border-top: 1px solid rgb(37 107 88);
border-bottom: 1px solid rgb(107, 37, 37);
box-shadow: 0px 0px 30px 0px black inset;
}
.release-shoutboard-container > h3 {
padding: 1rem;
background-color: rgb(124, 15, 15);
width: -webkit-fill-available;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.438), 0px 0px 0px 1px rgba(255, 255, 255, 0.075) inset;
}
.release-shoutboard-container > div:nth-of-type(1), .release-shoutboard-container > div:nth-of-type(2), .release-shoutboard-container > div:nth-of-type(3) {
grid-row: auto;
}
.release-shoutboard-container > div > h4 {
position: relative;
top: 0.2rem;
background-color: rgb(56, 18, 117);
border-top: 1px solid rgb(108, 55, 124);
padding: 1rem;
text-align: center;
margin: 0;
}
.release-shoutboard {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
background-color: hsl(24deg 51.72% 11.37%) !important;
border-top: 1px solid rgb(141, 61, 47) !important;
border-bottom: 1px solid rgb(134, 66, 45) !important;
}
.release-shoutboard > h4 {
grid-row: 1;
grid-column: span 2;
}
.title-icons {
position: absolute;
top: 0.9rem;
left: 2rem;
filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.438));
}
/* Remove the grid-column span when expanding; */
.release-shoutboard > div:nth-of-type(1), .release-shoutboard > div:nth-of-type(2) {
grid-row: 2;
grid-column: span 2;
background-color: hsl(24deg 51.72% 20%) !important;
}
.release-shoutboard > h4, .release-shoutboard > div {
display: grid;
justify-items: center;
border-top: 1px solid rgb(214, 119, 81) !important;
border-bottom: 1px solid #9c5c43;
background-color: hsl(24deg 51.72% 30%) !important;
margin: 0;
}
.release-shoutboard > div:nth-of-type(2) {
grid-column: auto;
}
.release-shoutboard > div:nth-of-type(1) > p:nth-of-type(odd), .release-shoutboard >div:nth-of-type(2) > p:nth-of-type(even) {
background-color: hsl(24 51% 10% / 1) !important;
}
.release-shoutboard > div:nth-of-type(2) > p:nth-of-type(even), .release-shoutboard > div:nth-of-type(1) > p:nth-of-type(odd) {
background-color: rgb(39, 21, 6);
}
.release-shoutboard > hr {
grid-row: 3;
grid-column: span 2;
}
.pinned-comments-container {
scroll-snap-align: start;
display: grid;
background-color: hsl(284.54deg 40.71% 7.94%) !important;
}
.pinned-comments-container > h4 {
margin-bottom: 0.2rem !important;
background-color: hsl(199 100% 9% / 1) !important;
border-top: hsl(199 100% 22% / 1) solid 1px !important;
}
.pinned-comments-container > h5 {
padding: 1rem;
margin: 0;
border-top: 1px solid hsl(198.69deg 80% 22%);
border-bottom: 1px solid hsl(198.69deg 80% 22%) !important;
background-color: hsl(198.69deg 100% 15.03%) !important;
font-size: 1.1em;
font-weight: normal;
text-align: center;
}
.via-information-span {
font-weight: bold;
color: rgb(245, 134, 255);
font-size: 0.8em;
}
.pinned-comments-container > p {
margin: 0 !important;
justify-self: center;
border-radius: 0 !important;
box-shadow: none !important;
}
.awards-container{
scroll-snap-align: start;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto auto;
border-top: 1px solid rgb(85, 85, 85) !important;
background-image: linear-gradient(180deg, hsl(7 100% 6% / 1), hsl(0deg 100% 10.7%));
padding-bottom: 1rem;
}
.awards-container > h5 {
background-color: hsl(0deg 100% 21.33%);
border-top: 1px solid hsl(0deg 100% 33);
border-bottom: 1px solid hsl(0deg 100% 30%);
font-size: 1.3em;
font-weight: bold;
grid-column: span 3;
padding: 1rem;
margin: 1rem 0;
position: relative;
top: -1.67rem;
}
.awards-container > div {
display: grid;
grid-row: auto;
grid-column: auto;
justify-self: center;
grid-template-columns: 1fr 1fr 1fr;
max-width: 17rem;
height: 100%;
grid-template-rows: 10rem auto auto auto;
padding: 0.1rem;
border-radius: 0.2rem;
background: repeating-linear-gradient(0deg, rgb(255, 255, 255) 1rem, rgba(83, 0, 104, 0.288) 1rem, rgb(54, 20, 20) 1.1rem),
radial-gradient(ellipse at bottom, #ff0000, #000000);;
box-shadow: 0px 0px 0px 1px rgb(255 76 76 / 69%), 0px 0px 14px 1px rgb(255 85 85 / 73%) inset;
}
.awards-container > div:hover, .awards-container > div > p:hover {
transition: 0.3s;
box-shadow: 0px 0px 0px 1px rgb(255 76 76 / 69%), 0px 0px 30px 10px rgb(255 85 85 / 73%) inset;
}
.awards-container > div > p {
grid-row: auto;
grid-column: span 3;
padding: 1rem;
margin: 0;
font-size: 0.9em;
height: -webkit-fill-available;
height: -moz-available;
border-top: 1px solid hsl(0deg 69.85% 26.98%);
}
.award-comment-quote {
background-image: linear-gradient(0deg, hsl(0 100% 18% / 1), hsl(0deg 100% 15.37%)) !important;
}
.awards-container > div > p:nth-of-type(even) {
background-color: hsl(0 100% 13% / 1);
}
.awards-container > div > p:nth-of-type(odd) {
background-color: hsl(0 100% 8% / 1);
}
.awards-container > h4 {
grid-row: 1;
grid-column: span 3;
margin-bottom: 1rem !important;
background-color: hsl(0 100% 13% / 1) !important;
border-top: 1px solid hsl(0 100% 26% / 1) !important;
}
.awards-container > div > img {
grid-column: span 3;
position: relative;
top: -0.20rem;
justify-self: center;
background-color: hsl(0deg 0% 0% / 14%);
padding: 1rem;
margin-bottom: 2rem;
height: -webkit-fill-available;
filter: drop-shadow(0px 2px 1px black);
mix-blend-mode: overlay;
max-width: 7rem;
box-shadow: 0px 0px 50px white inset;
}
.awards-container > hr {
scroll-snap-align: start;
grid-row: 4;
grid-column: span 3;
position: relative;
top: 0.6rem;
}
.thank-you-container {
height: 12rem;
padding-top: 1rem;
margin-bottom: -8.6rem;
background-color: hsl(1 100% 17% / 1);
text-align: center;
border-bottom: hsl(1 100% 55% / 1) solid 1px !important;
border-top: hsl(1 100% 35% / 1) solid 1px !important;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.589), 0px 0px 0px 1px rgba(255, 255, 255, 0.075) inset;
}
.thank-you-container > p {
padding: 1rem;
max-width: 26rem;
margin: 0 auto;
}
.thank-you-container > p:nth-last-child(1) {
color: hsl(1, 100%, 82%);
font-size: small;
}
.reader-information {
display: grid;
position: relative;
align-items: center;
justify-items: center;
grid-row: 3;
height: fit-content;
justify-self: center;
align-self: end;
grid-column: span 2;
text-align: center;
border: 1px solid #712230;
border-left: 1px solid #ffa7a7;
background-image: linear-gradient(185deg, #5d4256, #953a3a);
}
.audio-player-base {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1.4fr 1fr;
background-color: rgb(18 0 0 / 64%);
padding: 0.7rem;
}
.audio-player-btn {
cursor: pointer;
background: rgb(177, 35, 35);
border: none;
border-top: 1px solid rgb(255, 0, 0);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.322) inset;
}
.audio-player-base > button:nth-of-type(2) {
grid-row: 3;
grid-column: 1;
border-top-left-radius: 0.2rem;
border-bottom-left-radius: 0.2rem;
}
.audio-player-base > button:nth-of-type(3) {
grid-row: 3;
grid-column: 5;
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
.audio-player-base > button:nth-of-type(1) {
grid-column: 2/5;
}
.audio-player-base > button:nth-of-type(1):hover, .audio-player-btn:hover {
transition: 0.3s;
background-color: #ff4141;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.322) inset;
box-shadow: 0px 0px 50px 0px rgba(255, 0, 0, 0.226), 0px 0px 20px 0px rgb(255, 0, 0) inset;
}
.audio-player-base > button:nth-of-type(1):active, .audio-player-btn:active {
background-color: #991a1a;
box-shadow: 0px 0px 50px 0px red, 0px 0px 50px 0px rgb(255, 0, 0) inset;
}
#timeDisplay, #seekBar {
grid-row: 1;
grid-column: 1;
}
#timeDisplay {
justify-self: center;
align-self: center;
}
#seekBar {
grid-column: 2/5;
align-self: center;
-webkit-appearance: none;
width: 88%;
height: 0.375rem;
border-radius: 5px;
outline: none;
cursor: pointer;
box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.041);
}
/* Thumb styling (same as before) */
#seekBar::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1.1rem;
height: 1.1rem;
background: #991a1a;
border: 2px solid #af4c4c;
border-radius: 50%;
box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.74)
}
#seekBar::-moz-range-thumb {
width: 14px;
height: 14px;
background: #991a1a;
border: 2px solid #af4c4c;
border-radius: 50%;
cursor: pointer;
}
.volume-overall-container {
align-self: center;
grid-column: 4/5;
grid-row: 1;
}
#volume-icon {
grid-column: 5;
position: relative;
left: -5.9rem;
}
#volumeSlider {
grid-column: 5;
position: relative;
z-index: 0;
-webkit-appearance: none;
width: 7.55rem;
height: 1rem;
border-radius: 0.3rem;
outline: 1px solid rgba(0, 0, 0, 0.582);
cursor: pointer;
box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.041);
}
/* Chrome/Edge/Safari Thumb */
#volumeSlider::-webkit-slider-thumb {
-webkit-appearance: none;
position: relative;
z-index: 1;
width: 0.2rem;
height: 1.25rem;
background: #991a1a;
border: 2px solid #ff7676;
/* border-radius: 50%; */
}
/* Firefox Thumb */
#volumeSlider::-moz-range-thumb {
width: 14px;
height: 14px;
background: #fff;
border: 2px solid #8b0000;
border-radius: 50%;
cursor: pointer;
}
#trackName {
grid-row: 2;
grid-column: 1/6;
align-self: center;
justify-self: center;
padding: 0.5rem;
margin: 1rem;
width: -webkit-fill-available;
background-color: rgba(0, 0, 0, 0.61);
border-radius: 2rem;
}
/* right-hand-down-below-section ENDS */
.ad-side {
display: grid;
grid-column: 2;
grid-row: auto;
text-align: center;
color: rgba(255, 255, 255, 0.281);
text-shadow: none;
width: 100%;
height: 7rem;
justify-items: center;
align-items: center;
outline: 1px dashed rgba(255, 0, 0, 0.582);
background-color: rgba(255, 1, 1, 0.233);
}
.live-stream-container {
/* scroll-snap-align: start; */
display: grid;
grid-template-columns: 0.5fr 0.5fr 1fr 1fr;
grid-template-rows: auto auto;
height: fit-content;
background-color: hsl(283deg 100% 7.95%) !important;
border-top: 1px solid hsl(0deg 0% 100% / 18%) !important;
}
.live-stream-container > div:nth-of-type(1), .live-stream-container > div:nth-of-type(2) {
display: grid;
grid-column: span 2;
grid-row: span 2;
background-color: hsl(283deg 100% 15%);
height: -webkit-fill-available;
padding: 1rem;
}
.live-stream-container > div:nth-of-type(2) {
background-color: hsl(283deg 100% 7.95%);
}
.live-stream-container > div:nth-of-type(2) > p {
background-color: hsl(283 64% 12% / 1);
}
.live-stream-container > div:nth-of-type(2) > p, .live-stream-container > div:nth-of-type(2) > h6, .live-stream-container > div:nth-of-type(2) > h5 {
text-align: center;
justify-self: center;
grid-column: span 2;
margin: 0rem 0rem 2rem 0rem;
padding: 1rem;
width: -webkit-fill-available;
width: -moz-available;
max-width: 52rem;
}
.social-awards-image {
grid-column: span 2;
width: auto;
height: 100%;
justify-self: center;
border: 2px solid hsl(283deg 100% 20%);
border-radius: 0.2rem;
}
.live-stream-container > div:nth-of-type(2) > h5 {
padding: 1rem;
height: fit-content;
font-size: larger;
background-color: hsl(283deg 100% 20%);
}
.live-stream-container > div:nth-of-type(2) > h6 {
font-size: large;
grid-column: span 2;
text-align: center;
background-color: hsl(283deg 100% 15%);
padding: 1rem;
margin: 2rem 0rem 0rem 0rem;
}
.live-stream-container > div:nth-of-type(1) {
align-content: center;
}
.live-stream-container > div:nth-of-type(1) > h4, .live-stream-container > div:nth-of-type(1) > p, .live-stream-container > div:nth-of-type(1) > a {
text-align: center;
grid-column: span 2;
margin: 0;
padding: 1rem;
}
.live-stream-container > div:nth-of-type(1) > a, .live-stream-container > div:nth-of-type(1) > a > button {
cursor: pointer;
background-color: hsl(283deg 100% 20%);
border: none;
color: white;
justify-self: center;
}
.live-stream-container > div:nth-of-type(1) > a {
padding: 0;
margin: 1rem;
}
.live-stream-container > div:nth-of-type(1) > a > button {
padding: 1rem;
font-weight: bold;
background-color: hsl(283deg 100% 30%);
color: hsl(283deg 100% 90%);
}
.live-stream-container > div:nth-of-type(1) > a > button:hover {
transition: 0.3s;
background-color: hsl(283deg 100% 40%);
color: hsl(283deg 100% 95%);
}
.pulse-ring-icon {
justify-self: center;
align-self: center;
grid-row: 1;
grid-column: span 2;
width: 3rem;
height: auto;
width: 30%;
mix-blend-mode: plus-lighter;
}
.end-cap-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row: auto !important;
grid-column: span 2 !important;
padding: 1rem;
height: fit-content;
background-color: rgb(59 26 0);
}
.end-cap-container > a > button {
cursor: pointer;
font-weight: bold;
width: 100%;
padding: 1rem;
border: none;
background-color: rgb(237 135 77);
}
.end-cap-container > a > button:hover {
transition: 0.3s;
background-color: rgb(255, 178, 133);
color: rgb(133, 84, 56);
}
footer {
grid-column: span 2;
padding: 1rem;
justify-self: center;
text-align: center;
background-color: rgb(59 26 0);
}
footer > hr {
margin: 0rem 0rem 2rem 0rem;
border: none;
border-top: 1px solid rgb(100, 53, 53);
border-bottom: 1px solid rgba(255, 235, 212, 0.144);
}
.bottom-section-fix {
row-gap: 0rem !important;
}
.bottom-section-fix-vault {
grid-column: 2 !important;
margin-top: -1rem !important;
}
/* About Us / Contact Us / Privacy Policy / Terms of Service */
.about-personal-information-container {
display: grid;
grid-column: 1;
background-color: rgb(19, 12, 44);
}
.about-personal-information-container > h4 {
text-align: center;
font-size: 1.5em;
}
.about-personal-information-container > hr {
border: 1px dashed rgba(162, 221, 255, 0.178);
width: 50%;
justify-self: center;
align-self: center;
margin: 2rem 0rem 1rem 0rem;
}
.about-image {
justify-self: center;
width: 30%;
height: auto;
border-radius: 50%;
border: 0.35rem solid rgb(179, 183, 238);
margin: 1rem;
}
.about-us-container-specifics > div:nth-of-type(1) {
grid-row: 2;
grid-column: 2;
padding: 1rem;
text-align: center;
width: -webkit-fill-available !important;
background-color: #000c27 !important;
}
.about-us-container-specifics > h4 {
border-bottom: 1px solid hsl(222 27% 16% / 1) !important;
}
.about-us-container-specifics > div:nth-of-type(1) > div {
text-align: center;
border-top: none !important;
background-color: hsl(187.83deg 88.04% 13.48%) !important;
border-radius: 0.2rem;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.185), 0px 0px 0px 1px hsl(187.83deg 88.04% 22%) inset;
}
.about-us-container-specifics > div:nth-of-type(2) {
grid-row: 2;
grid-column: 1;
padding: 1rem;
text-align: center;
background-color: #000c27;
}
.about-us-container-specifics {
grid-template-columns: 1fr 1fr !important;
grid-template-rows: 1fr auto auto !important;
row-gap: 0rem !important;
}
.contact-container-specifics {
row-gap: 0rem !important;
grid-template-rows: 1fr auto auto !important;
grid-template-columns: 1fr 1fr !important;
}
.contact-container-specifics > h4 {
border-bottom: 1px solid hsl(2 91% 18% / 1) !important;
}
.contact-container-specifics > div:nth-of-type(1) {
grid-row: 2;
grid-column: 1;
text-align: center;
background-color: hsl(2 100% 5% / 1);
}
.contact-container-specifics > div:nth-of-type(1) > div {
display: grid;
justify-items: center;
align-content: center;
padding: 1rem;
text-align: center;
background-color: transparent !important;
}
.contact-container-specifics > div:nth-of-type(1) > div > p {
padding: 1rem;
margin: 2rem 0rem;
max-width: 40rem;
}
.contact-container-specifics > div:nth-of-type(1) > div > p:nth-of-type(1) {
font-weight: bold;
font-size: larger;
}
.contact-container-specifics > div:nth-of-type(1) > div > a > button {
cursor: pointer;
background-color: hsl(2 100% 15% / 1) ;
padding: 1rem;
color: white;
width: 20rem;
border: none;
}
.contact-container-specifics > div:nth-of-type(1) > div > a > button:hover {
transition: 0.3s;
background-color: hsl(2 100% 20% / 1) !important;
}
.contact-container-specifics > div:nth-of-type(2) {
display: grid;
align-content: center;
grid-row: 2;
grid-column: 2;
padding: 1rem;
text-align: center;
background-color: hsl(2.31deg 100% 5.1%) !important;
border-top: 1px solid hsl(26 100% 25%);
}
.contact-container-specifics > div > form {
display: grid;
row-gap: 1rem;
justify-items: center;
background-color: hsl(2 100% 14% / 1);
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.281), 0px 0px 0px 1px rgba(255, 156, 156, 0.24) inset;
padding: 2rem;
margin: 1rem;
align-items: center;
justify-content: center;
align-content: space-evenly;
height: fit-content;
}
.contact-container-specifics > div > form > label > input, .contact-container-specifics > div > form > label > textarea {
padding: 1rem;
margin: 1rem;
background-color: hsl(0 98% 10% / 1) !important;
border: 1px solid hsl(0 40% 35% / 1) !important;
color: rgb(255, 255, 255);
}
.contact-container-specifics > div > form > label > input:hover {
transition: 0.3s;
background-color: #4e0a0a !important;
}
.contact-container-specifics > div > form > label > input:focus {
outline: none;
background-color: #4e0a0a !important;
}
.contact-container-specifics > div > form > textarea {
width: 80%;
padding: 1rem;
margin: 0.5rem;
background-color: #3e0503 !important;
color: rgb(255, 255, 255);
}
.contact-container-specifics > div > form > label > textarea:hover {
transition: 0.3s;
background-color: #4e0a0a !important;
}
.contact-container-specifics > div > form > textarea:focus {
outline: none;
background-color: #4e0a0a !important;
}
.contact-container-specifics > div > form > button {
cursor: pointer;
padding: 1rem;
margin: 1rem;
width: 80%;
font-weight: bold;
border: none;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.151), 0px 0px 0px 1px rgba(255, 156, 156, 0.24) inset;
background-color: hsl(0 86% 24% / 1) !important;
color: rgb(255, 255, 255);
}
.contact-container-specifics > div > form > button:hover {
transition: 0.3s;
background-color: #5e0f0f !important;
}
.legal-container-specifics {
display: grid;
grid-template-columns: auto 1fr !important;
grid-template-rows: auto !important;
row-gap: 0rem !important;
background-color: hsl(8.57deg 36.84% 7.45%) !important;
padding: 0;
}
.legal-container-specifics > h4 {
background-color: hsl(7.74deg 32.63% 18.63%) !important;
border-bottom: 1px solid hsl(7.74deg 32.63% 25%) !important;
border-top: 1px solid hsl(7.74deg 32.63% 35%) !important;
}
/* the left hand side of the legal container */
.legal-container-specifics > div:nth-of-type(1) {
position: sticky;
top: 0;
left: 0;
height: 200px;
grid-row: 2;
grid-column: 1;
padding: 0 !important;
text-align: left;
}
.legal-highlight-fix {
border-top: 1px solid hsl(7.74deg 32.63% 10%) !important;
}
.legal-container-specifics > div > div > h4, .legal-container-specifics > div > div > ul, .legal-container-specifics > div > div > p {
background-color: #3f2420;
padding: 1rem;
margin: 0;
}
.legal-container-specifics > div > div > p {
text-align: center;
font-size: 0.8em;
}
.legal-container-specifics > div > div > h4 {
background-color: #2e1a17;
}
.legal-container-specifics > div > div > ul > a > li {
padding: 1rem;
}
.legal-container-specifics > div > div > ul > a {
color: rgb(255, 213, 196);
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.438);
}
.legal-table-fix {
background-color: #2e1a17 !important;
}
.legal-table-fix:hover {
transition: 0.3s;
background-color: #643b35 !important;
}
.legal-container-specifics > div > div > ul > a > li:hover {
transition: 0.3s;
cursor: pointer;
background-color: #643b35;
}
/* the right hand side of the legal container */
.legal-container-specifics > div:nth-of-type(2) {
display: grid;
align-content: center;
grid-row: 2;
grid-column: 2;
padding: 1rem;
text-align: center;
width: -webkit-fill-available !important;
background-color: hsl(7.83deg 36.57% 7.6%) !important;
}
.legal-container-specifics > div:nth-of-type(2) > h5 {
display: grid;
justify-items: center;
background-color: #3f2420;
font-size: 1.2em;
font-weight: lighter;
box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.438), 0px 0px 0px 1px rgba(255, 255, 255, 0.075) inset;
padding: 1rem;
margin: 1rem;
border-radius: 0.2rem;
}
.legal-container-specifics > div:nth-of-type(2) > p, .legal-container-specifics > div:nth-of-type(2) > h5 {
text-align: left;
width: 80%;
justify-self: center;
}
/* blog-section specifics */
.blog-information-container-specifics {
background-color: #642115 !important;
grid-template-rows: 3rem 3rem auto;
row-gap: 2px;
padding: 0 !important
}
.blog-information-container-specifics > div {
width: -webkit-fill-available !important;
}
.blog-content-container {
grid-template-columns: 1fr !important;
background-color: #632214 !important;
}
.blog-content-container > p {
padding: 1rem;
}
.blog-image {
width: auto;
height: auto;
max-width: 70%;
max-height: none;
justify-self: center;
border: 2px solid rgb(204, 137, 75);
}
.blog-information-container-specifics > h4 {
height: fit-content;
font-size: 1.1em;
background-color: rgba(54, 0, 0, 0.829) !important;
margin: 0 !important;
border-top: 1px solid #7c422b !important;
}
.blog-information-container-specifics > p {
font-size: 1.1em;
background-color: #270e00 !important;
border-top: 1px solid #80331469 !important;
grid-column: span 2;
text-align: center;
justify-self: center;
height: fit-content;
width: -webkit-fill-available !important;
font-size: small;
}
/* contact form specifics */
/* spotlight-section specifics */
.spotlight-section-override {
padding: 0 !important;
background-color: rgb(30 22 18) !important;
}
.spotlight-section-override > h4 {
font-size: 1.1em;
width: -webkit-fill-available !important;
margin: 0;
border-top-left-radius: 0.2rem;
border-top-right-radius: 0.2rem;
border-top: 1px solid #7c422b !important;
border-bottom: 1px solid #523225 !important;
border-left: 1px solid #5b4036 !important;
border-right: 1px solid #5b4036 !important;
background-color: #3f2420 !important;
}
.spotlight-grid-container {
display: grid;
grid-column: span 2 !important;
grid-row: 2 !important;
width: 100% !important;
padding: 0 !important;
background-color: #311512;
border-left: 1px solid #251813 !important;
border-right: 1px solid #251813 !important;
}
.spotlight-correction {
display: grid;
justify-items: center;
grid-template-columns: 1fr;
}
.spotlight-correction > div {
display: grid;
justify-items: center;
}
.spotlight-correction > div > p {
background-color: #1f0e0c;
margin: 0;
}
.spotlight-correction > div > p:nth-of-type(1), .spotlight-correction > div > p:nth-of-type(2) {
padding: 1rem;
text-align: center;
}
.spotlight-correction > div > p:nth-of-type(1) {
/* scroll-snap-align: start; */
border-top: 1px solid #44261a !important;
border-bottom: 1px solid #44261aa9 !important;
background-color: #0e0907;
}
.spotlight-correction > div > p:nth-of-type(3) {
width: 80% !important;
max-width: 60rem;
padding: 4rem 2rem 4rem 2rem;
justify-self: center;
font-size: larger;
border-bottom: 1px solid #44261a !important;
background-color: rgb(15, 9, 9);
}
.spotlight-correction > div > p:nth-of-type(1) {
font-size: 1.1em;
text-align: center;
font-weight: bold;
}
.spotlight-correction > div:nth-last-of-type(1) {
background-color: #1f0e0c !important
}
.sp-button-container {
background-color: #1f0e0c !important;
border: none !important;
}
.spotlight-home-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.spotlight-image-casing {
max-width: 90%;
height: auto;
border: 4px solid #523225;
margin: 1rem;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.438);
}
.sp-button-container {
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
}
.sp-button-container > a {
justify-self: center;
cursor: pointer;
grid-row: auto;
grid-column: span 2 !important;
width: 80%;
max-width: 60rem;
margin: 1rem;
justify-items: center;
border-radius: 0.2rem;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.205), 0px 0px 0px 1px rgba(255, 255, 255, 0.075) inset;
background-color: hsl(6 40% 30% / 1) !important;
}
.sp-button-container > a:hover {
transition: 0.3s;
background-color: hsl(6 40% 40% / 1) !important;
}
.spotlight-title-fix {
margin-top: 2rem;
grid-template-columns: 1fr;
}
.spotlight-dl-out {
cursor: pointer;
background-color: hsl(6.32deg 44.19% 5% / 43%) !important;
border-top: 1px solid hsl(6.32deg 44.19% 55% / 38%) !important;
border-bottom: 1px solid hsl(6.32deg 44.19% 8% / 15%) !important;
width: 100%;
}
.spotlight-text {
display: grid !important;
grid-row: 3 !important;
grid-template-rows: auto auto auto !important;
background-color: #160d0c !important;
}
.spotlight-text > p {
padding: 1rem;
margin: 0;
text-align: left;
}
.spotlight-text > p:nth-of-type(1) {
grid-row: 1;
grid-column: 1;
background-color: #2b1816;
}
.spotlight-text > p:nth-of-type(2) {
grid-row: 1;
grid-column: 2;
text-align: center;
background-color: #1d110f;
}
.spotlight-text > p:nth-of-type(3) {
grid-column: span 2;
background-color: #130b0a;
line-height: 1.5em;
}
.next-page-carousel-container {
grid-column: 2;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
justify-items: center;
align-items: center;
width: 100%;
height: fit-content;
border-top: 1px solid #7c422b;
border-bottom: 1px solid #752f0e;
}
.next-page-carousel-container > a {
cursor: pointer;
height: fit-content;
padding: 1rem;
text-align: center;
background-color: #632919 !important;
}
.next-page-button {
color: rgb(48, 11, 2);
text-shadow: 0px 0px 2px rgba(255, 188, 149, 0.651);
cursor: pointer;
height: 4rem;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 0.9em;
align-self: center;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.116);
border:none;
border-top: 1px solid #bb7a4f !important;
background-color: #c56b3a !important;
}
.next-page-button:hover {
transition: 0.3s;
background-color: #a34e2f !important;
}
}
/* social-information specifics */
.social-media-container {
display: grid;
grid-column: span 2 !important;
grid-template-rows: auto auto !important;
grid-template-columns: 0.5fr 1fr !important;
grid-row: 4 !important;
margin: 1rem;
}
.social-media-container {
display: grid;
/* scroll-snap-align: start; */
background-image: linear-gradient(45deg, #000000, #0c101d);
border-top: 1px solid #00ffff0d;
width: -webkit-fill-available !important;
padding: 0 !important;
}
.social-media-container > h4 {
grid-row: 1;
grid-column: 1;
width: 90%;
font-size: larger;
text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.438);
text-align: center;
justify-self: center;
padding: 1rem 0rem 1rem 0rem !important;
border-radius: 0.2rem;
background-color: hsl(224 41% 14% / 1);
}
.social-media-unlisted {
/* scroll-snap-align: start; */
display: grid;
gap: 0.5rem;
grid-template-columns: auto auto;
grid-row: 3;
grid-column: 1;
padding: 1rem;
justify-items: center;
align-items: center;
width: -webkit-fill-available;
height: fit-content;
border-top: 1px solid #353941 !important;
background-color: #111111;
}
.social-media-unlisted > a {
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.438);
height: -webkit-fill-available;
}
.social-media-listed-items {
display: grid;
grid-template-columns: 80px auto auto;
grid-template-rows: auto auto;
margin: 0.5rem;
text-align: center;
height: 9rem;
border-radius: 0.2rem;
margin: 0.1rem 0rem !important;
border-top: 1px solid #7c422b !important;
background-color: #613a14;
}
.social-media-listed-items > div {
justify-self: center;
align-self: center;
align-content: center;
grid-column: 1;
grid-row: 1;
width: 10rem;
background-color: rgba(255, 255, 255, 0.438);
border-radius: 50%;
width: 50px;
height: 50px;
}
.social-media-listed-items > p {
max-width: -webkit-fill-available;
height: auto;
margin: 0;
padding: 1rem;
text-align: left;
align-content: center;
}
.social-media-listed-items:hover {
transition: 0.3s;
background-color: #a34e2f;
}
.social-media-listed-items > p:nth-of-type(1) {
grid-row: 1;
grid-column: 2;
text-align: center;
font-size: 1.4em;
}
.social-media-listed-items > p:nth-of-type(2) {
grid-row: 2;
grid-column: span 3;
width: -webkit-fill-available;
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
border-top: 1px solid #6e493a !important;
background-color: rgb(0 0 0 / 53%);
}
.social-media-listed-items > p:nth-of-type(3) {
grid-row: 1;
grid-column: 3;
text-align: center;
justify-self: right;
width: 10rem;
}
/* download-page specifics */
.dl-display-height {
grid-column: 2;
grid-template-rows: 3rem auto;
}
#download-image-clamp {
cursor: pointer;
grid-row: 2;
grid-column: span 2;
width: 100%;
border: 1px solid #713232;
}
.dl-grid-restructure {
grid-template-rows: auto !important;
row-gap: 1rem;
}
#creator-tag {
position: relative;
left: 2rem;
color: hsl(159.31deg 64.44% 80.82%);
font-size: small;
}
.dl-grid-restructure > a:nth-of-type(1) {
grid-row: 1;
grid-column: 2;
}
.dl-grid-restructure > a {
width: 100%;
height: 7rem;
}
.dl-scope-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
background-color:hsl(159.31deg 64.44% 8.82%);
padding: 1rem;
line-height: 1.3em;
}
.active-dl-h4 {
grid-column: span 2;
text-align: center;
}
.dl-scope-container > h4 {
grid-column: span 2;
grid-row: 2;
justify-self: center;
margin: 0;
font-size: larger;
}
.dl-scope-container > p {
grid-column: span 2;
grid-row: 3;
padding: 1rem;
text-align: center;
justify-self: center;
max-width: 42rem;
}
.dl-scope-container > ul {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 1rem;
grid-column: span 2;
grid-row: 4;
padding: 1rem;
text-align: left;
background-color: hsl(192 73% 3% / 1);
border-radius: 0.2rem;
}
.dl-scope-container > ul > li {
display: grid;
background-color: hsl(192 73% 13% / 1);
margin: 1rem;
border-radius: 0.2rem;
text-align: center;
}
.dl-scope-container > ul > p {
position: relative;
top: 1rem;
grid-column: span 2;
text-align: center;
font-size: larger;
margin: 0rem;
color: hsl(159.31deg 64.44% 80.82%);
}
.dl-scope-container > ul > hr, .lore-correction > hr {
grid-column: span 2;
width: 80%;
justify-self: center;
margin: 1rem 0rem;
border: 1px dashed hsl(159.31deg 40% 20%);
filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.767));
}
.dl-scope-container > ul > li > a {
width: -webkit-fill-available;
height: auto;
font-weight: bold;
padding: 1rem;
color: rgb(255, 255, 255);
}
.dl-scope-container > ul > li:hover {
transition: 0.3s;
background-color: #13576b;
color: rgb(255, 255, 255);
}
.dl-grid-restructure > a:nth-of-type(2) {
grid-row: 3;
grid-column: 2;
}
.dl-grid-restructure > a:nth-of-type(3) {
grid-row: auto;
grid-column: 2;
}
.dl-bandwidth-icon {
grid-row: 1;
grid-column: span 2;
justify-self: center;
height: 3rem;
width: auto;
padding: 1rem;
}
.dl-information-blurb > h4 {
grid-column: span 2;
grid-row: 2;
font-size: larger;
justify-self: center;
}
.dl-display-height > a {
grid-column: span 2;
}
/* vault-page specifics */
.vault-display-height {
scroll-snap-align: start;
grid-column: 2;
grid-row: auto;
grid-template-rows: 3rem auto;
line-height: 1.5em;
}
.vault-text {
display: grid;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto autp !important;
grid-row: 3 !important;
}
.vault-text > p {
text-align: left;
}
.vault-text > p:nth-of-type(1) {
grid-row: 1;
grid-column: 1;
padding: 1rem;
}
.vault-display-height > div > a {
cursor: pointer;
border-top: 1px solid #3c7685;
background-color: #0b3a46;
width: -webkit-fill-available;
}
.vault-display-height > h3:nth-of-type(1), .vault-display-height > h3:nth-of-type(2) {
grid-column: auto !important;
height: 3rem !important;
}
.vault-display-height > div {
grid-column: span 2 !important;
background-color: #0b3a46 !important;
}
.vault-paragraph-styling {
margin: 0;
background-image: linear-gradient(181deg, #13576b, #2a5b59);
}
.vault-paragraph-top {
border-bottom: 1px solid #0b3a46;
box-shadow: 0px -1px 0px 0px rgba(255, 255, 255, 0.144) inset;
}
.vault-paragraph-bottom {
padding: 1.5rem 2rem !important;
}
.vault-download-button {
cursor: pointer;
width: -webkit-fill-available;
height: -webkit-fill-available;
background-color: transparent;
border: none;
font-weight: bold;
color: powderblue;
}
.vault-display-height > div > a:hover {
transition: 0.3s;
background-color: #13576b;
color: rgb(255, 255, 255);
}
.vault-display-height > a {
grid-column: span 2;
}
/* The width was changed from auto to -webkit-fill-available to fix the width of the vault page */
.dl-information-container {
display: grid;
grid-column: 2;
grid-template-columns: 1fr 1fr;
justify-self: center;
height: fit-content;
background-color: hsl(159.31deg 64.44% 4%);
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.589), 0px 0px 0px 1px rgba(255, 255, 255, 0.075) inset;
}
.dl-information-container > h4 {
grid-row: 1;
grid-column: span 2;
margin: 0rem 0rem 0.06rem 0rem;
justify-self: center;
background-color: hsl(159.31deg 64.44% 15%);
padding: 1rem;
text-align: center;
border-top-left-radius: 0.2rem;
border-top-right-radius: 0.2rem;
border-top: 1px solid hsl(159.31deg 64.44% 25%);
border-bottom: 1px solid hsl(159.31deg 64.44% 20%);
}
.dl-information-container > div {
grid-row: 3;
grid-column: span 2;
justify-self: center;
}
.lore-correction {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 1rem;
background-color: hsl(159.31deg 64.44% 8.82%);
line-height: 1.3em;
}
.lore-correction > p {
margin: 1rem;
grid-column: auto;
}
.dl-information-container > p {
padding: 1rem;
grid-row: 2;
margin: 0;
}
.dl-button-container {
display: grid;
grid-template-columns: 1fr 1fr;
background-color: #295747;
padding: 1rem;
}
.dl-button-container > a {
display: grid;
}
.dl-button-container > a > button:first-of-type {
grid-column: 2;
}
.dl-button-container > a > button:last-of-type {
grid-row: 1;
grid-column: 1;
}
.dl-button-container > a > button {
cursor: pointer;
padding: 1rem;
margin: 1rem;
border: none;
font-weight: bold;
background-color: hsl(159.13deg 34.2% 8.91%);
color: rgb(255, 255, 255);
}
.dl-button-container > a > button:hover {
transition: 0.3s;
background-color: hsl(159deg 43.32% 13.84%);
}
.dl-button-container > a > button:active {
transition: 0.1s;
background-color: hsl(159deg 43.32% 4.84%);
box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.205);
}
.dl-information-blurb {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
padding: 1rem;
background-color: rgb(2, 17, 27);
border-top: 1px solid hsl(204 86% 15% / 1);
line-height: 1.3em;
}
.dl-information-container > div > div:last-child {
border-top: 1px solid hsl(26 100% 25%);
background-color: hsl(26 100% 12% / 1);
}
.dl-information-blurb > p {
grid-column: span 2;
margin: 1rem;
padding: 2rem;
max-width: 42rem;
justify-self: center;
}
/* DESKTOP VER */
@media screen and (max-width: 100rem) {
.awards-container > h4 {
grid-column: span 3;
}
.awards-container {
grid-template-columns: 1fr 1fr 1fr;
}
.ad-side {
background-color: rgba(255, 255, 255, 0.137);
height: 7rem;
}
.dl-grid-restructure > a:nth-of-type(4) {
grid-row: auto;
grid-column: 2;
}
.dl-grid-restructure > a:nth-of-type(3) {
grid-row: 3;
grid-column: 2;
}
.dl-grid-restructure > a:nth-of-type(2) {
grid-row: auto;
grid-column: 2;
}
.social-media-unlisted {
grid-template-columns: auto auto;
}
}
/* COMPACT VER */
@media screen and (max-width: 87.5rem) {
.awards-container > h4, .awards-container > hr, .awards-container > h5 {
grid-column: span 2;
}
.awards-container {
grid-template-columns: 1fr 1fr;
}
.awards-container > hr {
top: 0.2rem;
}
.social-media-container {
grid-template-columns: 1fr !important;
}
.social-media-container > div:nth-of-type(1) {
grid-column: 1;
grid-row: 2;
border-bottom-left-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
}
.social-media-unlisted {
grid-row: 3;
grid-column: 1;
grid-template-columns: auto auto;
grid-template-rows: auto auto;
border-top-left-radius: 0rem;
border-top-right-radius: 0rem;
}
.ad-side {
height: 7rem;
grid-column: 2;
grid-row: auto;
background-color: rgb(32, 51, 73);
}
.vault-grid-restructure {
row-gap: 1rem;
}
.dl-grid-restructure > a {
background-color: red;
height: 7rem;
}
.dl-grid-restructure > a:nth-of-type(1) {
grid-column: 2;
grid-row: 1;
}
.dl-grid-restructure > a:nth-of-type(2) {
grid-column: 2;
grid-row: 3;
}
.dl-grid-restructure > a:nth-of-type(3) {
grid-column: 2;
grid-row: 5;
}
.dl-grid-restructure > a:nth-of-type(4) {
grid-column: 2;
grid-row: 7;
}
}
/* MOBILE VER */
@media screen and (max-width: 65rem) {
.main-content-grid-container {
grid-template-columns: 1fr;
grid-template-rows: 0.1fr 1fr;
gap: 0rem;
row-gap: 1rem;
}
.main-content-grid-item {
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.main-content-grid-item > div:nth-of-type(1) {
grid-row: 1;
grid-column: 1;
}
.main-content-grid-item > div:nth-of-type(2) {
grid-row: 2;
grid-column: 1;
}
.release-information-blurb > p {
margin: 0;
}
.live-stream-container {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
height: fit-content;
}
.ad-side {
grid-column: 2;
background-color: rgb(27, 42, 58);
height: 7rem;
}
.dl-display-height {
grid-column: 2;
}
.dl-information-container > h4 {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.dl-information-container > div {
width: -webkit-fill-available;
width: -moz-available;
}
.vault-display-height {
grid-template-columns: 1fr 1fr;
grid-template-rows: 3rem auto;
}
.dl-grid-restructure > a:nth-of-type(1) {
grid-column: 2;
grid-row: 1;
}
.dl-grid-restructure > a:nth-of-type(2) {
grid-column: 2;
grid-row: 3;
}
.about-us-container-specifics {
grid-template-columns: 1fr !important;
}
.about-us-container-specifics > div:nth-of-type(1) {
grid-column: 1 !important;
grid-row: auto !important;
}
.contact-container-specifics {
grid-column: 1 !important;
grid-template-columns: 1fr !important;
grid-template-rows: auto auto !important;
}
.contact-container-specifics > h4 {
grid-column: 1 !important;
grid-row: 1 !important;
}
.contact-container-specifics > div:nth-of-type(2) {
grid-column: 1 !important;
grid-row: 3 !important;
border-top: none !important;
}
.contact-container-specifics > div:nth-of-type(1) {
grid-column: 1 !important;
grid-row: 2 !important;
}
.temp-navbar h2 {
width: 100%;
height: fit-content;
margin: 0.5rem 0rem 0.5rem 0rem;
border-radius: 0rem;
}
/* dl-specifics */
.dl-information-container {
grid-column: 2;
margin: 0;
padding: 0;
border: none;
}
.dl-information-container-fix {
grid-row: 2;
}
.social-media-unlisted {
grid-template-columns: auto;
grid-template-rows: auto auto;
}
}
.spotlight-title-fix {
grid-template-columns: 1fr;
}
.spotlight-aligment-fix {
justify-content: stretch !important;
}