/* CSS DONE BY CHRIS NICOLAS 2024 | Mod */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

/* APPEND */
html,
body {
    margin: 0;
    padding: 0;
    /* cursor: none; */
}

.topRowPadding {
    margin-top: 30px;
}

.noScroll {
    margin: 0;
    padding: 0;
    /* overflow: hidden; */
    overflow-x: hidden;
    overflow-y: scroll;
}

::-moz-selection {
    color: #fefefe;
    background: transparent;
    opacity: 0.5;
}

::selection {
    color: #ffb900;
    background: transparent;
    opacity: 0.5;
}

::-webkit-scrollbar {
    display: none;
}

a {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: white;
  text-decoration-thickness: 0.7px;
  color: inherit;
  -webkit-transition: 0.2s;
  transition: 0.2s;
  transition-timing-function: linear;
}

a:hover {
    /* color: 588B8B; */
    color: inherit;
    opacity: 0.3; /*0.3*/
    /* cursor: none; */
}

a:before {
    color: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

/* HEADERS */
p {
    font-family: "Roboto Mono", monospace, Helvetica, Arial,
        sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 1.5;
    /* text-transform: lowercase; */
    text-decoration: inherit;
    letter-spacing: 0px;
    word-spacing: 0px;
    text-align: inherit;
    -webkit-font-variant-ligatures: no-common-ligatures;
}

h1 {
    font-family: "Roboto Mono", monospace, Helvetica, Arial,
        sans-serif;
    font-weight: 300;
    word-wrap: break-word;
    font-size: 24px;
    line-height: 1;
    color: inherit;
    text-transform: none;
    letter-spacing: 0px;
    -webkit-font-variant-ligatures: no-common-ligatures;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    transition-timing-function: linear;
}

h2 {
    font-family: "Roboto Mono", monospace, Helvetica, Arial,
        sans-serif;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 300;
    word-wrap: break-word;
    letter-spacing: 0px;
    text-transform: none;
    -webkit-font-variant-ligatures: no-common-ligatures;
}

h3 {
  font-family: "Roboto Mono", monospace, Helvetica, Arial,
      sans-serif;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 300;
  word-wrap: break-word;
  letter-spacing: 0px;
  text-transform: none;
  -webkit-font-variant-ligatures: no-common-ligatures;
}

h4 {
  font-family: "Roboto Mono", monospace, Helvetica, Arial,
      sans-serif;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 300;
  word-wrap: break-word;
  letter-spacing: 0px;
  -webkit-font-variant-ligatures: no-common-ligatures;
  margin-top: -4px;
}

/* TEXT ALIGN*/
.textAlignCenter {
    text-align: center;
}

.textAlignLeft {
    text-align: left;
}

.textAlignRight {
    text-align: right;
}

.textAlignJustify {
    text-align: justify;
}

/* TEXT COLOR */
.cBlack {
    color: #06090e;
}

.cBrightBlue {
    color: #21d4ff;
}

.cDodgerBlue {
    color: #007eff;
}

.cBrightPurple {
    color: #6d21ff;
}

.cCeleste {
    color: #89e7e5;
}

.cCyan {
    color: #00dfff;
}

.cDarkBlue {
    color: #0900ac;
}

.cDarkerBlue {
    color: #002d40;
}

.cDarkGray {
    color: #434a54;
}

.cDarkRed {
    color: #a1001f;
}

.cDarkerGray {
    color: #26292e;
}

.cDarkerBlack {
    color: #16191e;
}

.cElectricGreen {
    color: #65d901;
}

.cGray {
  color: #5a6370;
}

.cGreen {
    color: #9ae659;
}

.cLightGray {
  color: #AAB2BD;
}

.cOrange {
    color: #ff5700;
}

.cPurple {
    color: #665eff;
}

.cRed {
    color: #ff4f4f;
}

.cSunshine {
    color: #ffb900;
}

.cWhite {
    color: #fff;
}

/* BACKGROUND-COLORS */
.cbgBrightBlue {
    background-color: #21d4ff;
}

.cbgGreen {
    background-color: #9ae659;
}

.cbgDarkBlack {
    background-color: #16191e;
}

.cbgElectricGreen {
    background-color: #65d901;
}

.cbgBlack {
    background-color: #06090e;
}

.cbgLightWhite {
    background-color: #e6e9ed;
}

.cbgOrange {
    background-color: #ff5500;
}

.cbgPurple {
    background-color: #665eff;
}

.cbgRed {
    background-color: #ff214c;
}

.cbgSpotifyGreen {
    background-color: #23cf5f;
}

.cbgWhite {
    background-color: #fefefe;
}

.cbgYellow {
    background-color: #665EFF;
}

/* BOXES */ 
.box1 {
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 16px;
  border-radius: 12px;
  border-width: .5px;
  border-style: solid;
  border-color: #665EFF;
  background-color: rgba(102,94,255,0.1);
}

.toolsBox {
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 16px;
  border-radius: 12px;
  border-width: .5px;
  border-style: solid;
  border-color: #21d4ff;
  background-color: rgba(33,212,255,0.1);
}

.box3 {
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 16px;
  border-radius: 12px;
  border-width: .5px;
  border-style: solid;
  border-color: #ffb900;
  background-color: rgba(255,185,0,0.1);
}

.techGearBox {
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 16px;
  border-radius: 12px;
  border-width: .5px;
  border-style: solid;
  border-color: #5a6370;
  background-color: rgba(90,99,112,0.1);
}

.startclassBox {
  width: 100%;
  height: 100%;
  min-height: 80px;
  padding: 16px;
  border-radius: 12px;
  border-width: .5px;
  border-style: solid;
  border-color: #718F94;
  background-color: rgba(113,143,148,0.1)
}

/* PILLS */
.box1Pill {
  margin-bottom: 8px;
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background-color: #665eff;
}

.boxPill2 {
  margin-bottom: 8px;
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background-color: #21d4ff;
}

.boxPill3 {
  margin-bottom: 8px;
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background-color: #ffb900;
}

.techGearPill {
  margin-bottom: 8px;
  width: 40px;
  height: 4px;
  border-radius: 100px;
  background-color: #5a6370;
}

/* LIST */
ul {
  list-style-type: none;
}

/* p.liLink {
  text-decoration: none;
}

p.liLink:hover {
  opactiy: 0.5;
} */


/* BACKGROUND-IMAGES */
.imgScale {
    z-index: 0;
    position: relative;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    max-height: auto;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    opacity: 1;
}

.imgScaleAlt {
    z-index: 0;
    position: relative;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    max-height: auto;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    opacity: 1;
}

/* CHIPS */
.sunshineChips {
    display: inline-block;
    padding: 15px;
    padding-bottom: 0px;
    margin-top: 5px;
    height: auto;
    width: auto;
    background-color: rgba(255, 185, 0, 0.3);
    border: 2px solid rgba(255, 185, 0, 1);
    border-radius: 4px;
}

/* CONTAIN */
.contain {
    padding-left: 10%;
    padding-right: 10%;
    position: relative;
}

.pageContain {
    padding-top: 0%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 11%;
}

.pageContainTight {
    padding-top: 15%;
    padding-left: 17%;
    padding-right: 17%;
    padding-bottom: 16%;
    height: 100%;
    max-width: auto;
}

.pageContainFooter {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 17%;
    padding-right: 17%;
}

.pageContainTightNoBottom {
    padding-top: 15%;
    padding-left: 17%;
    padding-right: 17%;
    height: 100%;
    max-width: auto;
}

.pageContainLoose {
    padding-top: 10%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10%;
    height: 100%;
    max-width: auto;
}

.pageContainNoTop {
    padding-left: 17%;
    padding-right: 17%;
    padding-bottom: 16%;
    height: 100%;
    max-width: auto;
}

.pageContainNoTopBottom {
    padding-left: 17%;
    padding-right: 17%;
    height: 100%;
    max-width: auto;
}

.pageContainImages {
    padding-left: 17%;
    padding-right: 0%;
}

.pageContainFinalNotes {
    padding-top: 15%;
    padding-left: 17%;
    padding-right: 17%;
    padding-bottom: 5%;
}

svg {
    position: relative;
}

.tight-contain {
    padding-left: 17%;
    padding-right: 17%;
}

/* MATERIAL DESIGN ICONS */
@font-face {
    font-family: "Material Design Icons";
    font-style: normal;
    font-weight: 400;
}

.material-design-icons {
    font-family: "Material Design Icons";
    font-weight: normal;
    font-style: normal;
    color: inherit;
    font-size: inherit; /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: "liga";
}
/* MATERIAL ICON SIZING */
.material-design-icons.sm-mdi {
    font-size: 12px;
}
.material-design-icons.mdi {
    font-size: 16px;
}
.material-design-icons.md-mdi {
    font-size: 20px;
}
.material-design-icons.lg-mdi {
    font-size: 32px;
}
.material-design-icons.xl-mdi {
    font-size: 48px;
}
.material-design-icons.xxxl-mdi {
    font-size: 104px;
}

/* NAVIGATION */
nav {
    position: fixed;
    margin: 20px;
    padding-top: 16px;
    padding-bottom: 12px;
    width: calc(100vw - 40px);
    height: auto
    opacity: 1;
    border-radius: 8px;
}

nav.navAlt {
    transform: translate(-50%, -50%);
    top: 15%;
    left: 10%;
}

.stickyNav {
    width: 100%;
    position: -webkit-sticky;
    position: sticky;
    z-index: 0;
    opacity: 1;
    transform: translate(0%, 0%);
    top: 0%;
    left: 0%;
    margin: auto;
}

/* TABLES */
th {
}

td {
}

tr {
}

.table-borderless tbody tr td,
.table-borderless tbody tr th,
.table-borderless thead tr th {
    border: none;
}

/* text-type */
.centerText {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    margin: auto;
}

.centerTextLeft {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 10%;
    top: 50%;
    margin: auto;
}

.offCenterTextLeft {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 10%;
    top: 40%;
    margin: auto;
}

.centerTextLeft2 {
    position: absolute;
    transform: translate(-50%, -50%);
    left: 25%;
    top: 50%;
    margin: auto;
}

@keyframes fadeMe {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeMe {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadeMe {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes right {
    0% {
        -webkit-transform: translate(-15px);
    }
    50% {
        -webkit-transform: translate(15px);
    }
    100% {
        -webkit-transform: translate(-15px);
    }
}

@-webkit-keyframes left {
    0% {
        -webkit-transform: translate(15px);
    }
    50% {
        -webkit-transform: translate(-15px);
    }
    100% {
        -webkit-transform: translate(15px);
    }
}

@-moz-keyframes right {
    0% {
        -moz-transform: translate(-15px);
    }
    50% {
        -moz-transform: translate(15px);
    }
    100% {
        -moz-transform: translate(-15px);
    }
}

@-moz-keyframes left {
    0% {
        -moz-transform: translate(15px);
    }
    50% {
        -moz-transform: translate(-15px);
    }
    100% {
        -moz-transform: translate(15px);
    }
}

@keyframes right {
    0% {
        transform: translate(-15px);
    }
    50% {
        transform: translate(15px);
    }
    100% {
        transform: translate(-15px);
    }
}

@keyframes left {
    0% {
        transform: translate(15px);
    }
    50% {
        transform: translate(-15px);
    }
    100% {
        transform: translate(15px);
    }
}

/*,div,section,nav,footer*/
/* FADE IN */
#fadein p,
h1,
h2,
h3,
h4,
h5,
ul,
li,
div,
.lightningClass {
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 2s; /* Firefox < 16 */
    -ms-animation: fadein 2s; /* Internet Explorer */
    -o-animation: fadein 2s; /* Opera < 12.1 */
    animation: fadein 2s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* MEDIA */

@media all and (orientation: portrait) {
    #info {
        display: block;
    }
}

@media screen and (min-width: 920px) {
    .paddingRight {
        padding-right: 30px;
    }

    .paddingLeft {
        padding-left: 30px;
    }

    .centerTextLarge {
        position: relative;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 50%;
        margin: auto;
        width: 100%;
    }
}

@media screen and (max-width: 992px) {
    h1.largeTitle {
        font-size: 40px;
    }

    .projectSpacingMobile {
        padding-top: 30px;
    }
    
    .pageContainLoose {
      padding-top: 80px;
      padding-left: 32px;
      padding-right: 32px;
      padding-bottom: 80px;
      height: 100%;
      max-width: auto;
    }
}

/* // */