* {
    font-family: "Geist", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight:300;
    transition:all, 0.2s;
}

h1, h2, h3 {
    font-family: "Newsreader", serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight:500;
}

:root {
  --text-primary: #fff;
  --text-reverse: #000;
  --alt30: #4c4c4c;
  --alt10: #171717;
  --dark: inline-block;
  --light: none;
  --switchtext: 'View in light mode';
  --mid: #B0B0B0;
  --accent: #8B23E1;
  --accent2: #B45AFF;
  --interim:#202530;
}

[data-theme="light"] {
  --text-primary: #302A2A;
  --text-reverse: #fff;
  --alt30: #CDD1E2;
  --alt10: #F9F9F9;
  --dark: none;
  --light: inline-block;
  --switchtext: 'View in dark mode';
  --mid: #7f7f84;
  --accent: #EBD3FF;
  --accent2: #B45AFF;
  --interim:#F9F9F9;
}

.bubba {
    width:100vw;
    height:100vh;
    background: #fafafa;
    position: fixed;
    z-index: -3;
    margin-left:var(--bubba);
    transition: all, 0.6s;
}

#theme-toggle::after {
    content:var(--switchtext);
}

#theme-toggle {
    font-size:16px;
    cursor: pointer;
    background: none;
}

.dark img, .dark {
    display: var(--dark) !important;
}
.light img, .light {
    display: var(--light) !important;
}

body {
    margin:0;
    padding:0;
    background: var(--text-reverse);
    margin-bottom: 100px;
}

b {
    font-weight:600;
}

.hvr-grow {
    -webkit-transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
}

.navBar {
    margin-bottom: 60px;
    display: flex;
    justify-content: space-between;
    align-items:center;
    padding:16px 24px 16px 24px;
    font-size:16px;
    /*background: var(--alt10);*/
    /*border-bottom: 1px solid var(--alt30);*/
}

.navBar .navLeft {
    display: flex;
    gap: 32px;
    align-items:center;
}

.navBar .navRight {
    display: flex;
    gap: 8px;
}

.navLeft a {
    display: inline-flex;
    font-weight: 300;
    text-decoration: none;
    color:var(--mid);
    padding:8px;
}

.navLeft a:hover {
    color:var(--text-primary);
}

.navLeft .logo {
    height:28px !important;
    width:auto;
}

.navRight a, #theme-toggle {
    text-decoration: none;
    padding:8px;
    color:var(--text-primary);
    border-radius: 8px;
    border:1px solid var(--alt30);
    background: var(--text-reverse);
}

.navRight a:hover, #theme-toggle:hover {
    background: var(--text-primary);
    border:1px solid var(--text-primary);
    color:var(--text-reverse);
}

.myname {
    font-weight: 600 !important;
    color:var(--text-primary) !important;
}

.main {
    display: block;
    color:var(--text-primary);
    max-width: 900px;
    margin-left:auto;
    padding:48px;
    margin-right:auto;
    margin-top:-1px;
    border:1px solid var(--alt30);
}

.main:hover {
    background: var(--alt10);
}

.main h1 {
    font-size: 48px;
    text-align: center;
    line-height: 54px;
    letter-spacing: -1px;
}

.main p {
    font-size:16px;
    text-align: center;
    line-height: 30px;
    color:var(--mid);
}

.twoBlockDiv .para {
    display: block;
    font-size:16px;
    text-align: left;
    color:var(--mid);   
}

.buttonContainer {
    margin:auto;
    margin-top:30px;
    display: flex;
    justify-content: center;
    width:auto;
    flex-direction: row;
    gap:16px;
    align-items: center;
}

.buttonContainer:hover .secondary, .buttonContainer:hover .primary, {
    padding:16px 10px 16px 10px;
}

.primary {
    display: inline-flex;
    border-radius: 100px;
    background: var(--text-primary);
    color: var(--text-reverse);
    padding:16px 24px 16px 24px;
    text-decoration: none;
    font-size:16px;
    align-items: center;
}

.primary:hover {
    background:var(--accent);
    color:var(--text-primary);
    border:1px solid var(--text-primary);
}

.secondary {
    display: inline-block;
    border-radius: 100px;
    border: 1px solid var(--alt30);
    color: var(--text-primary);
    padding:16px 24px 16px 24px;
    text-decoration: none;
    font-size:16px;
}

.secondary:hover {
    background:var(--accent);
    color:var(--text-primary);
    border:1px solid var(--text-primary);
}

.twoBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    color:var(--text-primary);
    max-width: 996px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-1px;
    border:1px solid var(--alt30);
}

.twoBlockDiv {
    padding:40px;
    padding-top:40px;
    transition:all, 0s;
    border-right:1px solid var(--alt30);
    margin-bottom: 0px !important;

}

.margin {
    margin-bottom: 100px;
}

.margo {
    margin-top: 100px;
}

.twoBlockDiv:hover {
    background:var(--alt10);
    transition: all, 0s;
}

.twoBlockDiv:last-of-type {
    border-right:none;
}

.twoBlockDiv .articleContainer h1 {
    display: inline-block;
    font-family: Geist, sans-serif;
    font-size:32px;
    align-items: center;
}

.twoBlockDiv .articleContainer span {
    vertical-align: middle;
    gap:5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.tag {
    display: inline-block;
    color:var(--accent2);
    font-size:12px;
    padding:4px;
    font-weight: 500;
    border: 1px solid var(--accent2);
    border-radius: 4px;
}

.twoBlockDiv img {
    margin:0px !important;
    border-radius: 8px;
    width:100%;
}

.threeBlockOverride {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr !important;
}

.threeBlockOverride h1 {
    font-size:22px !important;
    line-height: 28px;
}

.heroContainer {
    width:100%;
    display: block;
    text-align: center;
}

.portHeader .byline {
    font-size:16px;
    color:var(--mid);
    display: block;
    margin-bottom: 14px;
}

.portHeader .byline a {
    text-decoration: underline;
    color:inherit;
}

.portHeader {
    color:var(--text-primary);
    text-align: left;
    padding:36px 36px 36px 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:24px;
}

.portMain .portHeaderLeft {
    padding-left:36px;
    padding-top: 36px;
    padding-bottom: 36px;
}

.portMain .portHeaderRight {
    padding-right:36px;
    padding-top: 36px;
}

.portMain .heroImg {
    padding:36px;
    display: block;
}

.portMain img {
    border-radius:8px;
}

.portMain .portHeader {
    padding:0px;
    border-top:none;
}

.portHeaderRight h3 {
    font-size:20px;
    line-height: 20px;
}

.portHeaderRight b {
    color:var(--text-primary);
    weight:500;
}

.portHeader h1 {
    text-align: left;
    max-width: 30ch;
    margin-top:10px;
    margin-bottom: 10px;
    font-size:36px;
    line-height: 46px;
}

.portHeader p {
    max-width: 80ch;
    font-size: 16px;
    font-weight: 300;
    color:var(--mid);
    margin-top:10px;
    margin-bottom: 10px;
    text-align: left;
}

.factContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0px;
    border-top:1px solid var(--alt30);
}

.factContainer .facts {
    color:var(--text-primary);
    padding:48px 24px 48px 24px;
    border-right:1px solid var(--alt30);
    display: grid;
}

.factContainer .facts:last-of-type {
    border-right:none;
}

.factContainer .facts span:first-of-type {
    font-size:32px;
    font-weight: 600;
    letter-spacing: -1px;
    font-family: "Newsreader", serif;
}

.factContainer .facts span:last-of-type {
    color:var(--mid);
}

/** portfolio stuff **/

.container {
    max-width: 1100px;
    margin-left:auto;
    margin-right:auto;
    border:1px solid var(--alt30);
    border-top: 3px solid var(--accent2);
}

.nocontainer {
    max-width: 800px;
    margin-left:auto;
    margin-right:auto;
    display: block;
    text-align: center;
    color:var(--text-primary);
}

.subTitle {
    padding:24px 24px !important;
    font-size:16px;
    text-align: center;
    max-width: 60ch;
    margin-left:auto;
    margin-right:auto;
    color:var(--text-primary);
}

.threeGrid {
    display: grid;
    margin-top:100px;
    grid-template-columns: 1fr 1fr 1fr;
}

.threeGrid div {
    display: grid;
    grid-gap:10px;
    padding:36px;
    color:var(--text-primary);
    font-size:20px;
    font-weight:500;
    border-right:1px solid var(--alt30);
    border-bottom: 1px solid var(--alt30);
}

.threeGrid div:hover {
    background: var(--alt10);
}

.threeGrid img {
    border-radius: 8px;
    border:1px solid var(--alt30);
}

.threeGrid div a {
    display: block;
    font-weight:300;
    color:var(--text-primary);
    font-size:16px;
}

.threeGrid .hero {
    display: block;
}

.threeGrid .hero h1 {
    display: block;
    font-size:36px;
    color:var(--text-primary);
    margin-bottom: 10px;
}

.threeGrid p {
    margin:0 !important;
    color:var(--mid) !important;
    font-size:18px;
}

.threeGrid p b {
    color:var(--text-primary);
}

/** refugee camp **/

@keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }


.textchain {
    display: flex;
    max-width:700px;
    flex-direction: column;
    align-items: flex-start;
    row-gap:20px;
    margin:auto;
    margin-bottom:200px;
    margin-top:200px;
    justify-content: center;
}

.textchain h3 {
    font-size:24px;
    height:16px;
}

.interlocutorwrapper {
    display: flex;
    flex-direction: row;
    column-gap:10px;
    animation: fadeInAnimationLeft ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.interlocutorchain {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    margin-left:auto;
}

.interlocutor-profile {
    width:40px;
    height:40px;
    border-radius:150px;
    background: url(img/profile-loc.webp);
    background-size: contain;
    align-self:flex-end;
}

.locutor-profile {
    width:40px;
    height:40px;
    border-radius:150px;
    background: url(img/profile-inter.webp);
    background-size: contain;
    background-repeat: no-repeat;
    align-self:flex-end;
}

.interlocutor {
    display: block;
    background:var(--accent);
    color:var(--text-primary);
    padding:20px;
    font-size: 18px;
    font-weight:300;
    border-radius:20px 20px 20px 0px;
}

@keyframes fadeInAnimationLeft {
            0% {
                opacity: 0;
                margin-left:-20px;
            }

            100% {
                opacity: 1;
                margin-left:0px;
            }
        }

@keyframes fadeInAnimationRight {
            0% {
                opacity: 0;
                margin-right:-20px;
            }

            100% {
                opacity: 1;
                margin-right:0px;
            }
        }

.locutorwrapper {
    margin-left:auto;
    display: flex;
    column-gap:10px;
    animation: fadeInAnimationRight ease 1s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

.locutorchain {
    display: flex;
    flex-direction: column;
    row-gap: 5px;
    margin-left:auto;
}

.interlocutorchain span {
    text-align: left;
    font-size: 14px;
    color:var(--mid);
    margin-right:10px;
}

.locutorchain span {
    text-align:right;
    font-size: 14px;
    color:var(--mid);
    margin-right:10px;
}

.locutor:first-of-type {
    border-radius:20px 20px 20px 20px;
}

.locutor:last-of-type {
    border-radius:20px 20px 4px 20px;
}

.locutor {
    margin-left:auto;
    display: bold;
    background:var(--interim);
    color:var(--text-primary);
    border-radius: 20px;
    padding:20px;
    font-size: 18px;
    max-width: 45ch;
    font-weight:300;
}

/** modal stuff **/

.threeGrid button {
    margin-right:auto;
    width:auto;
    background: inherit;
    padding:12px 24px;
    border:1px solid var(--alt30);
    cursor:pointer;
    color:var(--text-primary);
    border-radius: 100px;
    font-size: 16px;
}

.threeGrid button:hover {
    background:var(--accent);
    color:var(--text-primary);
    border:1px solid var(--text-primary);
}

/* Modal Content */

.modal h2 {
    font-size: 32px;
    display: block;
    padding-bottom: 22px;
    border-bottom:2px solid var(--accent2);
}

.modal h3 {
    font-size: 16px;
    font-family:Geist;
}

.modal img {
    width:100%;
    border-radius: 8px;
    margin-bottom: 30px;
}

.modal p {
    margin-bottom: 20px;
    max-width: 70ch;
}

.modal-content {
  background: white;
  width: 1050px;
  padding: 48px;
  border-radius: 8px;
  position: relative;
  height: 72vh;
  overflow-y:scroll;
}

.close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 36px;
  color:var(--mid);
  cursor: pointer;
  background: none;
  border:none;
  font-weight: 300;
}

.close:hover {
    color:var(--text-reverse);
}

.close2 {
    display: bold;
    position:relative !important;
    width:100%;
    font-size:16px;
    font-weight: 600;
    color:var(--accent2);
    text-align: center;
    padding-top:30px;
    border-top:1px solid var(--mid);
    margin-bottom: 30px;
    margin-top:30px;
}

/** delet **/

.modal {
  position: fixed;
  inset: 0;
  display: none; /* hidden unless active */
  justify-content: center;
  align-items: center;
  background: rgba(0,0,0,0.25);
  z-index: 4;

  /* animation states */
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.2s ease, transform 0.35s ease;
}

.modal.active {
  display: flex; /* force layout before transition */
}

.modal.show {
  opacity: 1;
  transform: translateY(0);
}

.endModule {
    max-width: 1100px;
    margin-left:auto;
    margin-right:auto;
    color:var(--text-primary);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: end;
}

.pastModule {
    text-align: left;
    display: grid;
    text-decoration: none;
}

.home {
    font-size:20px;
    text-align: center;
    text-decoration: none;
    color:var(--text-primary);
}

.nextModule {
    text-align: right;
    display: grid;
    text-decoration: none;
}

.pastModule span:first-of-type {
    color:var(--mid);
    font-size:14px;
    padding-left:23px;
}

.nextModule span:first-of-type {
    color:var(--mid);
    font-size:14px;
    padding-right:23px;
}

.pastModule span:last-of-type, .nextModule span:last-of-type {
    color:var(--text-primary);
    font-size:20px;
}

.pastModule:hover span, .nextModule:hover span, .home:hover {
    color:var(--accent2) !important;
}

.winsfails b, .blockOpen b {
    color:var(--text-primary);
}

/** nuclear waste handling **/

.block-note {
    width: 250px;
    margin: 100px auto 40px auto;
    display: block;
    display: grid;
    color:var(--text-primary);
    padding:24px;
}

.block-note li {
    list-style: none;
}

.block-note a {
    color:var(--text-primary);
    text-decoration: none;
    font-size: 16px;
    line-height: 24px;
}

.block-note h2 {
    text-align: left;
}

.note-nogrid {
    display: block;
    border: 1px solid var(--accent2);
    border-radius: 11px;
}

.blockOpen {
    display: flex;
    flex-direction: column;
    justify-content:center;
    padding:24px;
}

.blockOpen h2 {
    font-size: 32px;
    color:var(--text-primary);
}

.blockOpen p {
    max-width: 80ch;
    font-size: 16px;
    font-weight: 300;
    color: var(--mid);
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: left;
}

.xray2 input[type="checkbox"] {
    content: url('img/cs/landing.webp');
    appearance: none;
    display: block;
    width: 100%;
    height: auto;
    cursor:pointer;
}

.xray2 input[type="checkbox"]:checked {
    content: url('img/cs/landingnote.webp');
}

.container2 {
    max-width: 1100px;
    margin-left:auto;
    margin-right:auto;
}

/** about stuff **/

#about {
    font-size: 32px;
    text-align: left;
    max-width:997px;
    margin-left:auto;
    margin-right:auto;
    color:var(--text-primary);
}

.workImg {
    max-width: 997px;
    margin-left:auto;
    margin-right:auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:10px;
    margin-top:24px;
}

.workImg img {
    border-radius: 8px;
}

.aboutMain {
    max-width: 997px;
    margin-left:auto;
    margin-right:auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border:1px solid var(--alt30);
}

.workExp {
    color:var(--text-primary);
    padding:24px;
}

.line {
    width:100%;
    display: block;
    background: var(--alt30);
    height:1px;
    margin-bottom: 24px;
    width:100%;
}

.workItem {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 36px;
}

.workLeft span:first-of-type {
    display: block;
    font-size: 18px;
    font-weight: 400;
}

.workLeft span:last-of-type {
    display: block;
    font-size: 14px;
    color:var(--mid);
    font-weight: 400;
}

.workRight {
    font-family: Geist, sans-serif;
    text-align: right;
}

.workRight span {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size:14px;
    font-weight: 400 !important;
}

.workAbt {
    color:var(--text-primary);
    padding:24px;
    border-right:1px solid var(--alt30);
}

.workAbt h1 {
    display: block;
    line-height: 36px;
    font-size:32px;
}

.workAbt p {
    color:var(--mid);
}

.footer {
    width:100%;
    display: block;
    color:var(--mid);
    text-align: center;
    font-size:16px;
    font-family:Geist, sans-serif;
    font-weight: 300;
    margin-top:100px;
}

.resumeButton {
    display: block;
    background: ;
}

/** media queries **/

@media only screen and (max-width: 1100px) {

.aboutMain {
    margin-left: 30px;
    margin-right: 30px;
    display: block;
}

#about {
    margin-left: 30px;
    margin-right: 30px;
}

.workImg {
    margin-left:30px;
    margin-right:30px;
}

.workAbt {
    border-bottom:1px solid var(--alt30);
}

.threeGrid {
    display: grid;
    margin-top:100px;
    grid-template-columns: 1fr 1fr;
    text-align: left;
}

.container, .endModule {
    margin-left:30px;
    margin-right:30px;
}

.navBar {
    font-size:24px;
}

.heroContainer {
    margin-top:25px;
}

/*body {
    text-align: center;
}*/

.twoBlock, .threeBlockOverride {
    display: grid;
    grid-template-columns: 1fr !important;
    margin-left:30px;
    margin-right:30px;
}

.twoBlockDiv {
    border-bottom: 1px solid var(--alt30);
    border-right:none !important;
}

.threeBlockOverride h1 {
    font-size:32px !important;
}

.buttonContainer {
    display: flex;
    flex-direction: column;
    gap:16px;
    margin-bottom: 30px;
}

.main {
    padding:24px;
    margin-left:30px;
    margin-right:30px;
}

#theme-toggle::after {
    content:none;
}

.goaway {
    display: none !important;
}

.modal-content {
    margin-left:30px;
    margin-right:30px;
}

.navBar {
    margin-bottom: 20px;
}

.portHeader {
    display: block;
    padding-left:36px !important;
    padding-right:36px !important;
}

.textchain {
    max-width: 500px;
}

}

@media only screen and (max-width: 500px) {

.textchain {
    margin-left:16px;
    margin-right:16px;
}

.locutor, .interlocutor {
    font-size: 16px;
}

.modal img {
    width:100%;
}

.threeGrid {
    display: grid;
    margin-top:100px;
    grid-template-columns: 1fr;
    text-align: left;
}

.factContainer {
    display: block;
    text-align: center;
}

.factContainer .facts {
    /*display: block;*/
    border-bottom: 1px solid var(--alt30);
}

}