.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; } h1 { font-size: 38px } h2 { font-size: 32px } h3 { font-size: 24px } h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px } .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; } /* the 4 classes below here are a temp fix for the games dropdown stylings */ .dropdownMainMenu.dropdownMainMenuAlt { max-height: unset!important; } .dropdownMainMenu.dropdownMainMenuAlt > div { height: unset!important; } .dropdownMainMenu.dropdownMainMenuAlt > div > div { height: unset!important; width: 100%!important; display: flex; flex-direction: column; gap: 5px; max-height: 300px; overflow: auto; padding: 5px; } .dropdownMainMenu.dropdownMainMenuAlt > div > div > div { position: relative!important; left: unset!important; top: unset!important; } .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; cursor: pointer; } .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; position: relative; overflow: hidden; border-radius: 10px; } .inputWrapperMain.inputWrapperMainAlt { overflow: unset; } .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; } .btnMain.btnMainInsideField:hover { background: unset; } .btnMain.btnMainInsideField { position: absolute; right: 0; top: 0; bottom: 0; border-radius: unset; } .inputMain.inputMainWithBtn { padding-right: 50px; } .errorMain { width: 100%; border-radius: 10px; padding: 10px; background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.5); display: flex; flex-direction: row; grid-gap: 10px; } .errorMainColor { width: 5px; border-radius: 2px; background: tomato; } .errorMainText { }