diff --git a/index.html b/index.html index e377241..581eae5 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,10 @@ content="Never get your game mods censored, get banned, lose your history, nor lose the connection between game mod creators and fans. Download your mods freely." /> +
+ diff --git a/src/layout/index.tsx b/src/layout/index.tsx index 7bb8edd..0a44908 100644 --- a/src/layout/index.tsx +++ b/src/layout/index.tsx @@ -1,3 +1,4 @@ +import { HomePage } from '../pages/home' import mainStyles from '../styles/main.module.scss' import { Footer } from './footer' import { Header } from './header' @@ -6,6 +7,7 @@ export const Layout = () => { return (
+
) diff --git a/src/pages/home.tsx b/src/pages/home.tsx new file mode 100644 index 0000000..e4d677f --- /dev/null +++ b/src/pages/home.tsx @@ -0,0 +1,349 @@ +import '../styles/cardBlogs.css' +import '../styles/cardGames.css' +import '../styles/cardLists.css' +import '../styles/cardMod.css' +import '../styles/SimpleSlider.css' +import '../styles/styles.css' + +export const HomePage = () => { + return ( +
+
+
+
+
+
+
+
+
+
+

Game Mod Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Integer nec odio. Praesent libero. Sed cursus ante + dapibus diam. Sed nisi. Nulla quis sem at nibh elementum + imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce + nec tellus sed augue semper porta. Mauris massa. + Vestibulum lacinia arcu eget nulla. className aptent + taciti sociosqu ad litora torquent per conubia nostra, + per inceptos himenaeos. Curabitur sodales ligula in + libero. +
+

+ +
+
+
+
+
+

Game Mod Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Integer nec odio. Praesent libero. Sed cursus ante + dapibus diam. Sed nisi. Nulla quis sem at nibh elementum + imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce + nec tellus sed augue semper porta. Mauris massa. + Vestibulum lacinia arcu eget nulla. className aptent + taciti sociosqu ad litora torquent per conubia nostra, + per inceptos himenaeos. Curabitur sodales ligula in + libero. +
+

+ +
+
+
+
+
+

Game Mod Title

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Integer nec odio. Praesent libero. Sed cursus ante + dapibus diam. Sed nisi. Nulla quis sem at nibh elementum + imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce + nec tellus sed augue semper porta. Mauris massa. + Vestibulum lacinia arcu eget nulla. className aptent + taciti sociosqu ad litora torquent per conubia nostra, + per inceptos himenaeos. Curabitur sodales ligula in + libero. +
+

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Cool Games

+
+
+ + + + + +
+
+ + View All + +
+
+
+
+

Awesome Mods

+
+
+ + + +
+
+ + View All + +
+
+
+
+

Latest Mods

+
+
+ + + + +
+ +
+ + View All + +
+
+
+
+

Blog Posts

+
+
+ + + + +
+ +
+ + View All + +
+
+
+
+
+ ) +} + +type GameCardProps = { + backgroungLink: string +} + +const GameCard = ({ backgroungLink }: GameCardProps) => { + return ( + +
+
+

This is a game title, the best game title

+
+ + ) +} + +type ModCardProps = { + backgroundLink: string +} + +const ModCard = ({ backgroundLink }: ModCardProps) => { + return ( + +
+
+
+

+ This is a mod title for an awesome game that will make everyone + happy! The happiest! +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec + odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla + quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent + mauris. Fusce nec tellus sed augue semper porta. Mauris massa. + Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad + litora torquent per conubia nostra, per inceptos himenaeos. + Curabitur sodales ligula in libero. +
+
+

+
+
+
+
+ + + +

420

+
+
+ + + +

420

+
+
+ + + +

420

+
+
+
+
+ + ) +} + +type BlogCardProps = { + backgroundLink: string +} + +const BlogCard = ({ backgroundLink }: BlogCardProps) => { + return ( + +
+
+

+ This is a blog title, the best blog title in the world! +

+
+
{' '} + + ) +} diff --git a/src/styles/SimpleSlider.css b/src/styles/SimpleSlider.css new file mode 100644 index 0000000..9ea9e1a --- /dev/null +++ b/src/styles/SimpleSlider.css @@ -0,0 +1,257 @@ +.swiper-pagination-bullet-active { + background: rgba(255,255,255,0.5); + box-shadow: 0 0 4px 0 rgba(0,0,0,0.5); +} + +.simple-slider .swiper-slide { + height: 400px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +@media (max-width: 576px) { + .simple-slider .swiper-slide { + height: 200px; + } +} + +@media (max-width: 360px) { + .simple-slider .swiper-slide { + height: 150px; + } +} + +.simple-slider .swiper-button-next, .simple-slider .swiper-button-prev { + width: 50px; + margin-left: 00px; + margin-right: 00px; + color: rgba(255,255,255,0.5); + background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626); + padding: 10px; + height: 75px; + border-radius: 10px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin-top: -35px; +} + +.simple-slider .swiper-button-next:hover, .simple-slider .swiper-button-prev:hover { + background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626); +} + +.swiper-button-next:after, .swiper-button-prev:after { + font-size: 18px; +} + +@media (max-width:992px) { + .simple-slider .swiper-button-next, .simple-slider .swiper-button-prev { + bottom: 0; + top: unset; + width: 48%; + height: unset; + padding: 10px; + } +} + +.simple-slider.IBMSMSlider { + cursor: grab; + /*border-radius: 10px;*/ + overflow: hidden; + margin: 0; +} + +.simple-slider.IBMSMSlider:active { + border-radius: 10px; + cursor: grabbing; +} + +.swiper-container.IBMSMSliderContainer { + padding: 0 0 35px 0; +} + +.swiper-wrapper.IBMSMSliderContainerWrapper { +} + +.swiper-slide.IBMSMSliderContainerWrapperSlider { + position: relative; + display: grid; + grid-template-columns: 1.25fr 0.75fr; + grid-gap: 25px; + padding: 0 75px; + height: unset; +} + +@media (max-width: 992px) { + .swiper-slide.IBMSMSliderContainerWrapperSlider { + grid-template-columns: 1.15fr 0.85fr; + padding: 0 0 25px 0; + grid-gap: 15px; + } +} + +@media (max-width: 768px) { + .swiper-slide.IBMSMSliderContainerWrapperSlider { + grid-template-columns: 1fr; + } +} + +.IBMSMSliderContainerWrapperSliderAction { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.btnMain.IBMSMSliderContainerWrapperSliderActionbtn::before { + transition: ease 0.4s; + opacity: 0; + content: ''; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: linear-gradient(rgba(255,255,255,0.15), rgba(255,255,255,0.15)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626); + z-index: -1; + border-radius: 10px; +} + +.btnMain.IBMSMSliderContainerWrapperSliderActionbtn { + width: 100%; +} + +.btnMain.IBMSMSliderContainerWrapperSliderActionbtn:hover::before { + transition: ease 0.4s; + opacity: 1; +} + +.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction { + width: 100%; + bottom: 0; +} + +.swiper-button-next, .swiper-button-prev { + position: absolute; +} + +.swiper-button-next { + right: 5px; +} + +@media (max-width: 992px) { + .swiper-button-next { + right: 0px; + } +} + +.swiper-button-prev { + left: 5px; +} + +@media (max-width: 992px) { + .swiper-button-prev { + left: 0px; + } +} + +.SliderWrapper { + width: 100%; + padding: 50px 0; + background: rgba(0,0,0,0.1); + backdrop-filter: blur(5px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + margin: -25px 0 0 0; + border-bottom: solid 1px rgba(255,255,255,0.05); +} + +.IBMSMSCWSPic { + border-radius: 10px; + overflow: hidden; + border: solid 1px rgba(255,255,255,0.05); + padding-top: 50%; + z-index: 1; + box-shadow: 0 0 8px 0 rgba(0,0,0,0.25); +} + +.IBMSMSCWSInfo { + display: flex; + flex-direction: column; + grid-gap: 25px; + justify-content: center; + padding: 25px; + border-radius: 10px; + background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)), linear-gradient(to top right, rgb(38,38,38), rgb(41,41,41), rgb(38,38,38)); + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + border: solid 1px rgba(255,255,255,0.05); +} + +@media (max-width: 768px) { + .IBMSMSCWSInfo { + /*margin: -25px 10px 0 10px;*/ + } +} + +@media (max-width: 576px) { + .IBMSMSCWSInfo { + grid-gap: 10px; + padding: 15px; + } +} + +.IBMSMSCWSInfoHeading { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 2; + font-size: 20px; + line-height: 1.25; + color: rgba(255,255,255,0.75); + font-weight: bold; +} + +.IBMSMSCWSInfoText { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 8; + color: rgba(255,255,255,0.5); + font-size: 15px; + line-height: 1.5; + flex-grow: 1; +} + +@media (max-width: 576px) { + .IBMSMSCWSInfoText { + -webkit-line-clamp: 4; + font-size: 14px; + } +} + +.swiper-pagination { +} + +@media (max-width: 992px) { + .swiper-pagination { + display: none; + } +} + +.swiper-pagination-bullet { + background: rgba(0,0,0,0.5); + opacity: 1; + width: 12px; + height: 12px; + border-radius: 3px; +} + +.swiper-pagination-bullet.swiper-pagination-bullet-active { + background: rgba(128,0,255,0.5); +} + diff --git a/src/styles/cardBlogs.css b/src/styles/cardBlogs.css new file mode 100644 index 0000000..7861ec7 --- /dev/null +++ b/src/styles/cardBlogs.css @@ -0,0 +1,40 @@ +.cardBlogMain { + padding-top: 56.25%; + position: relative; + border-radius: 10px; +} + +.cardBlogMainWrapperLink { + transition: ease 0.4s; + text-decoration: unset; + color: unset; + overflow: hidden; + border-radius: 10px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + position: relative; + border: solid 1px #232323; +} + +.cardBlogMainWrapperLink:hover { + transition: ease 0.4s; + transform: scale(1.03); +} + +.cardBlogMainWrapperLink:active { + transition: ease 0.1s; + transform: scale(1.02); +} + +.cardBlogMainInside { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + justify-content: end; + align-items: start; + padding: 15px; +} + diff --git a/src/styles/cardGames.css b/src/styles/cardGames.css new file mode 100644 index 0000000..4aee260 --- /dev/null +++ b/src/styles/cardGames.css @@ -0,0 +1,39 @@ +.cardGameMainWrapperLink { + transition: ease 0.4s; + display: flex; + flex-direction: column; + grid-gap: 10px; + text-decoration: unset; +} + +.cardGameMainWrapperLink:hover { + transition: ease 0.4s; + transform: scale(1.02); + text-decoration: unset; +} + +.cardGameMainWrapperLink:active { + transition: ease 0.1s; + transform: scale(1); +} + +.cardGameMain { + padding-top: 150%; + border-radius: 15px; + background: rgba(255,255,255,0.05); + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.cardGameMainTitle { + transition: ease 0.4s; + color: rgba(255,255,255,0.5); + padding: 0 15px; + font-weight: bold; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 1; + font-size: 18px; + line-height: 1.5; +} + diff --git a/src/styles/cardLists.css b/src/styles/cardLists.css new file mode 100644 index 0000000..c8dcf17 --- /dev/null +++ b/src/styles/cardLists.css @@ -0,0 +1,87 @@ +.IBMSecMain.IBMSMListWrapper { + grid-gap: 25px 0; +} + +.IBMSMList { + width: 100%; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + grid-gap: 15px; +} + +.IBMSMListAlt { + grid-template-columns: 1fr 1fr 1fr; +} + +@media (max-width: 992px) { + .IBMSMList { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 25px; + } +} + +@media (max-width: 768px) { + .IBMSMList { + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 25px; + } +} + +@media (max-width: 576px) { + .IBMSMList { + display: grid; + grid-template-columns: 1fr; + grid-gap: 25px; + } +} + +.IBMSMList.IBMSMListFeatured { + grid-template-columns: 1fr 1fr 1fr; +} + +@media (max-width: 768px) { + .IBMSMList.IBMSMListFeatured { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 576px) { + .IBMSMList.IBMSMListFeatured { + grid-template-columns: 1fr; + } +} + +.IBMSMList.IBMSMListFeaturedAlt { + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; +} + +@media (max-width: 992px) { + .IBMSMList.IBMSMListFeaturedAlt { + grid-template-columns: 1fr 1fr 1fr; + } +} + +@media (max-width: 768px) { + .IBMSMList.IBMSMListFeaturedAlt { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 360px) { + .IBMSMList.IBMSMListFeaturedAlt { + grid-template-columns: 1fr; + } +} + +.IBMSMList.IBMSMListFeed { + grid-template-columns: 1fr 1fr; +} + +@media (max-width: 1200px) { + .IBMSMList.IBMSMListFeed { + grid-template-columns: 1fr; + } +} + diff --git a/src/styles/cardMod.css b/src/styles/cardMod.css new file mode 100644 index 0000000..e59ff12 --- /dev/null +++ b/src/styles/cardMod.css @@ -0,0 +1,118 @@ +.cardModMain { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background: rgba(255,255,255,0.05); + border-radius: 10px; + overflow: hidden; + background: linear-gradient(to top right, #262626, #292929, #262626); +} + +.cMMPicture { + position: relative; + width: 100%; + padding-top: 56.25%; + background: rgba(0,0,0,0.1); +} + +.cMMBody { + padding: 15px; + color: rgba(255,255,255,0.5); + display: flex; + flex-direction: column; + grid-gap: 15px; + flex-grow: 1; +} + +.cMMFoot { + width: 100%; + padding: 10px 25px; + border-top: solid 1px rgba(255,255,255,0.05); + font-size: 14px; + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; +} + +.cardModMainWrapperLink { + transition: ease 0.4s; + text-decoration: unset; + color: unset; + transform: scale(1); + border-radius: 12px; + padding: 2px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.05); +} + +.cardModMainWrapperLink:hover { + transition: ease 0.4s; + text-decoration: unset; + color: unset; + transform: scale(1.01); +} + +.cardModMainWrapperLink:active { + transition: ease 0.1s; + transform: scale(1); +} + +.cardModMainWrapperLink::before { + transition: ease 0.4s; + background: linear-gradient(to top, #8000ff 0%, #232323 50%, rgba(255,255,255,0) 100%); + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0; + z-index: -1; + border-radius: 12px; +} + +.cardModMainWrapperLink:hover::before { + transition: 0.4s ease; + opacity: 1; +} + +.cMMBodyTitle { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 2; + font-size: 20px; + line-height: 1.25; + color: rgba(255,255,255,0.75); + font-weight: bold; +} + +.cMMBodyText { + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + -webkit-line-clamp: 3; + color: rgba(255,255,255,0.5); + font-size: 15px; + line-height: 1.5; +} + +.cMMFootReactions { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + flex-wrap: wrap; + grid-gap: 25px; +} + +.cMMFootReactionsElement { + display: flex; + flex-direction: row; + grid-gap: 5px; + justify-content: center; + align-items: center; + color: rgba(255,255,255,0.25); +} + diff --git a/src/styles/styles.css b/src/styles/styles.css new file mode 100644 index 0000000..bf9a1a6 --- /dev/null +++ b/src/styles/styles.css @@ -0,0 +1,520 @@ +.htmlMain { + Background: linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b); + Background: -webkit-linear-linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b); + Background: -moz-linear-linear-gradient(to top right, #1b1b1b, #232323, #1b1b1b); + min-height: 100%; + display: flex; + flex-direction: column; + scroll-behavior: smooth; + font-family: 'Roboto'; +} + +.bodyMain { + background: unset; + display: flex; + flex-direction: column; + align-items: center; + flex-grow: 1; + min-height: 100vh; + position: relative; + letter-spacing: 1px; + font-size: 16px; + line-height: 25px; + word-break: break-word; + color: #ffffff; +} + +.ContainerMain { + max-width: 1400px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: end; + padding: 0 10px 0 10px; + position: relative; +} + +p { + margin: 0; +} + +.InnerBodyMain { + width: 100%; + display: flex; + flex-direction: column; + flex-grow: 1; + align-items: center; + padding: 25px 0; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0; +} + +.IBMSecMain { + width: 100%; + display: flex; + flex-direction: column; +} + +.IBMSMTitleMain { + width: 100%; + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; +} + +@media (max-width: 768px) { + .IBMSMTitleMain { + } +} + +.IBMSMTitleMainHeading { + color: rgba(255,255,255,0.75); +} + +.btnMain { + transition: ease 0.4s; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + padding: 10px 15px; + background: rgba(255,255,255,0.05); + border-radius: 10px; + color: rgba(255,255,255,0.5); + font-weight: bold; + text-align: center; + outline: unset; + border: unset; + grid-gap: 10px; +} + +.btnMain:hover { + transition: ease 0.4s; + outline: unset; + border: unset; + color: rgba(255,255,255,0.75); + background: rgba(255,255,255,0.1); + transform: scale(1.01); + text-decoration: unset; +} + +.btnMain:active { + transition: ease 0.1s; + transform: scale(1); +} + +.btnMain:focus { + background: rgba(255,255,255,0.1); +} + +.btnMain.btnMainClear { + background: rgba(255,255,255,0); +} + +.btnMain.btnMainClear:hover { + background: rgba(255,255,255,0.1); +} + +.btnMain.btnMainClear.btnMainClearActive { + background: rgba(255,255,255,0.1); +} + +.btnMain.btnMainAltText { + justify-content: start; +} + +.IBMSecMainGroup { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 75px; + padding: 50px 0; +} + +.IBMSMAction { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +.btnMain.IBMSMActionBtn::before { + transition: ease 0.4s; + opacity: 0; + content: ''; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626), linear-gradient(to top right, #262626, #292929, #262626); + z-index: -1; + border-radius: 10px; +} + +.btnMain.IBMSMActionBtn { + background: unset; + box-shadow: unset; + padding: 10px 25px; + border: solid 1px rgba(255,255,255,0.05); + color: rgba(255,255,255,0.25); +} + +.btnMain.IBMSMActionBtn:hover { + border: solid 1px rgba(255,255,255,0); + color: rgba(255,255,255,0.75); +} + +.btnMain.IBMSMActionBtn:hover::before { + transition: ease 0.4s; + opacity: 1; +} + +.IBMSecMainGroup.IBMSecMainGroupAlt { + grid-gap: 25px; + padding: 25px 0; +} + +.IBMSMTitleMainHeadingSpan { + font-weight: normal; +} + +.blockquoteMainWrapper { + padding: 0 0 0 25px; + margin: 15px 0; + width: 100%; +} + +.blockquoteMain { + width: 100%; + border-radius: 0 10px 10px 0; + border-left: solid 6px rgba(255,255,255,0.1); + padding: 25px; + background: #232323; + font-style: italic; + color: rgba(255,255,255,0.75); + margin: 0; +} + +.blockquoteMainText { +} + +.dropdownMain { + /*width: 100%;*/ + background-color: unset; + flex-grow: 1; +} + +.btnMain.btnMainDropdown { + width: 100%; + box-shadow: unset; + border: unset; + padding: 5px 15px; + color: rgba(255,255,255,0.5); + background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), linear-gradient(to top right, #262626, #292929, #262626); + font-size: 16px; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + grid-gap: 5px; +} + +.btnMain.btnMainDropdown:focus { + outline: unset; + box-shadow: unset; + background: rgba(255,255,255,0.05); +} + +.dropdownMainMenu { + width: 100%; + padding: 5px 5px 0 5px; + background: #232323; + border-radius: 10px; + border: solid 1px rgba(255,255,255,0.1); + flex-direction: column; + grid-gap: 10px; + max-height: 200px; + overflow: auto; + font-size: 16px; +} + +.dropdownMainMenuItem { + transition: ease 0.4s; + background: linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)), linear-gradient(to top right, #262626, #292929, #262626); + color: rgba(255,255,255,0.75); + border-radius: 5px; + color: rgba(255,255,255,0.5); + padding: 5px 10px; + margin: 0 0 5px 0; + white-space: normal; + display: flex; + flex-direction: row; + justify-content: start; + align-items: center; + grid-gap: 10px; +} + +.dropdownMainMenuItem:hover { + transition: ease 0.4s; + background: linear-gradient(rgba(255,255,255,0.05), rgba(255,255,255,0.05)), linear-gradient(to top right, #262626, #292929, #262626); + color: rgba(255,255,255,0.75); + text-decoration: unset; +} + +.inputMain { + transition: ease 0.4s; + background: rgba(0,0,0,0.1); + outline: unset; + border-radius: 10px; + padding: 10px 15px; + border: solid 1px rgba(255,255,255,0.1); + box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.1); + color: white; + width: 100%; +} + +.inputMain:focus { + border: solid 1px rgba(255,255,255,0.2); +} + +.labelMain { + margin: 0; + color: rgba(255,255,255,0.5); + display: flex; + flex-direction: column; + justify-content: center; +} + +.inputWrapperMain { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 10px; +} + +.inputWrapperMainWrapper { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.labelDescriptionMain { + color: rgba(255,255,255,0.35); + font-size: 14px; +} + +.btnMain.btnMainRemove { + background: rgba(255,255,255,0); + padding: 0; + width: 50px; + min-width: 50px; +} + +.btnMain.btnMainRemove:hover { + background: rgba(255,255,255,0.05); + color: tomato; +} + +.btnMain.btnMainAdd { + background: rgba(255,255,255,0); +} + +.btnMain.btnMainAdd:hover { + background: rgba(255,255,255,0.05); +} + +.labelWrapperMain { + width: 100%; + display: flex; + flex-direction: row; + grid-gap: 15px; + justify-content: space-between; + align-items: center; +} + +.inputLabelWrapperMain { + width: 100%; + display: flex; + flex-direction: column; + grid-gap: 10px; +} + +.inputLabelWrapperMain.inputLabelWrapperMainAlt { + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.inputLabelWrapperMain.inputLabelWrapperMainAltStylized { + padding: 10px 15px; + border-radius: 10px; + background: rgba(255,255,255,0.05); + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.linkMain { + color: rgba(255,115,255,0.5); +} + +.FundingCampaign { + width: 100%; + background: rebeccapurple; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} + +@media (max-width: 992px) { + .FundingCampaign { + flex-direction: column; + } +} + +.FundingCampaignLink { + color: rgba(255,255,255,0.75); + font-weight: bold; + text-decoration: unset; + padding: 10px; + flex-grow: 1; + text-align: center; +} + +@media (max-width: 992px) { + .FundingCampaignLink { + width: 100%; + } +} + +.FundingCampaignLink:hover { + color: rgb(255,255,255); +} + +.CheckboxMain { + -webkit-appearance: none; + appearance: none; + width: 30px; + height: 30px; + min-width: 30px; + min-height: 30px; + font-size: 14px; + color: rgba(255,255,255,0.5); + border-radius: 8px; + border: solid 1px rgba(255,255,255,0.1); + background-color: rgba(0,0,0,0.1); + box-shadow: inset 0 0 8px 0 rgb(0,0,0,0.1); + display: grid; + place-content: center; + cursor: pointer; +} + +.CheckboxMain::before { + transition: ease 0.4s; + content: "\2713"; + width: 24px; + height: 24px; + transform: scale(0); + transition: 120ms transform ease-in-out; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.CheckboxMain:checked::before { + transition: ease 0.2s; + transform: scale(1); + background: rgba(255,255,255,0.1); + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); + border-radius: 6px; +} + +.CheckboxMain:hover { + border: solid 1px rgba(255,255,255,0.15); +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-track { + background: rgb(44,44,44); +} + +::-webkit-scrollbar-thumb { + background: rgba(255,255,255,0.1); + border-radius: 10px; + box-shadow: 0 0 4px 0 rgb(0,0,0,0.1); +} + +::-webkit-scrollbar-thumb:hover { + background: rgba(255,255,255,0.25); +} + +a { + color: rgba(255,115,255,0.5); + text-decoration: unset; +} + +a:hover { + color: rgba(255,115,255,0.75); + text-decoration: underline; +} + +.inputWrapperMainBox { + width: 50px; + min-width: 50px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + color: rgba(255,255,255,0.25); +} + +.form-range.inputRangeMain { + background: rgba(255,255,255,0.1); + padding: 5px; + border-radius: 5px; +} + +.form-range.inputRangeMain::-webkit-slider-runnable-track { + transition: ease 0.4s; + background: rgba(0,0,0,0.25); + border-radius: 5px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.form-range.inputRangeMain::-webkit-slider-runnable-track:hover { + transition: ease 0.4s; + background: rgba(0,0,0,0.35); + border-radius: 5px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.form-range.inputRangeMain::-webkit-slider-thumb { + transition: ease 0.4s; + background: #a0a0a0; + border-radius: 5px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.form-range.inputRangeMain::-webkit-slider-thumb:hover { + transition: ease 0.4s; + background: #dcdcdc; + border-radius: 5px; + box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); +} + +.inputLabelWrapperMainSliderWrapper { + display: flex; + flex-direction: row; + grid-gap: 10px; +} +