:root {
    --titleColor: #000;
    --gridColor: #000;
    --backgroundColor: #000;
    --textColor: #000;
    --imageFade: #000;
}



html, .grid{
    scroll-behavior: smooth !important;
}

.grid{
    display: grid;
    gap: 48px;
    margin: 48px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 204px;
    grid-template-areas:
      "nameplate        nameplate      selfie        selfie"
      "aboutme          aboutme        selfie        selfie"
      "learnmore        learnmore      selfie        selfie"
      "certifications    resume         selfie        selfie"
      "projects         projects       projects      projects"
      "maddysmachines   emberfall      spintegration printer"
      "portfoliowebsite computerBuild  clickerGame   buildings"
      "manim            consord        .             ."
      "knowhow          knowhow        knowhow       knowhow"
      "python           python         java          java"
      "lua              lua            web           web"
      "solidworks       solidworks     soldering     soldering"
      ; 
}

.grid > .nameplate            { grid-area: nameplate; }
.grid > .selfie               { grid-area: selfie; }
.grid > .aboutme              { grid-area: aboutme; }
.grid > .learnmore            { grid-area: learnmore; }

.grid > .knowhow              { grid-area: knowhow; }
.grid > .python               { grid-area: python; }
.grid > .java                 { grid-area: java; }
.grid > .lua                  { grid-area: lua; }
.grid > .web                  { grid-area: web; }
.grid > .solidworks           { grid-area: solidworks; }
.grid > .soldering             { grid-area: soldering; }

.grid > .certifications       { grid-area: certifications; }
.grid > .resume               { grid-area: resume; }

.grid > .projects             { grid-area: projects; }
.grid > .maddysmachines       { grid-area: maddysmachines; }
.grid > .emberfall            { grid-area: emberfall; }
.grid > .spintegration        { grid-area: spintegration; }
.grid > .printer              { grid-area: printer; }
.grid > .portfoliowebsite     { grid-area: portfoliowebsite; }
.grid > .computerBuild        { grid-area: computerBuild; }
.grid > .clickerGame          { grid-area: clickerGame; }
.grid > .buildings            { grid-area: buildings; }
.grid > .manim               { grid-area: manim; }
.grid > .consord             { grid-area: consord; }


body{
    background: var(--backgroundColor);
      background-attachment: fixed;
    transition: background 0.2s ease-in-out;
}

.grid > *, .header{
    color: var(--textColor);
    background-color: var(--gridColor);
    border-radius: 36px;
    padding:48px;
    font-size: 2.4em;
    font-family: 'Special Gothic Expanded One', cursive;
    border: 3px solid transparent;
    transition: background-color 0.2s ease-in-out, border 0.2s ease-in-out, transform 0.2s ease-in-out;
    /* background-image: url(../Icons/butterdog.png);
    background-size: cover;
    background-position: center; */

}

.grid > *:hover:not(.noHover){
    transform: scale(1.02);
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    /* background-image: url(../Icons/butterdog.png);
    background-size: cover;
    background-position: center; */
}

.embrimage{
    position: absolute;
    /* top: 80px; */
    transition: transform 0.2s ease-out;
    transform: translateX(-50%) rotate(0deg);  
    transform-origin: 50% 200%;
    left: 50%;
}
.emberfall:hover #dragon{
    transform: translateX(-50%) rotate(11deg);
}
.emberfall:hover #werewolf{
    transform: translateX(-50%) rotate(-11deg);
}

@keyframes float {
	0% {
		transform: translateY(0px);
	}
	50% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0px);
	}
}
.project:hover img:not(.embrimage),
.project:hover .embrimages{
    animation: float 3s ease-in-out infinite;
}




button {
    background-color: var(--titleColor);
    color: var(--textColor);
    padding: 12px 24px;
    font-size: 2.4em;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0);
    border-radius: 18px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

button:hover {
    color: var(--textColor);
    transform: scale(1.05);
    border: 2px solid var(--textColor);
    border-radius: 18px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.grid ol, .grid li {
    padding-left: 24px;
    font-size: 0.96em;
}

.header, .knowhow, .projects {
    background-color: var(--titleColor);
    font-family: 'Climate Crisis', cursive;
    font-weight: 200;
    letter-spacing: 0.05em;
    font-size: 2.4em;
}

/* NAVBAR STYLES */
.header{
    position: fixed;
    top: 0;
    z-index: 2;
    height: 24px;
    font-size: 1.8em;
    margin: 48px;
    display: flex;
    flex-direction: row;
    width: calc(100% - 96px);
    border: 3px solid var(--textColor);
    overflow-y: hidden;
    background-color: var(--titleColor);
    transition: background-color 0.2s ease-in-out;
    scale: 102%;
    z-index: 100;
}

.navbar {
    display: flex;
    align-items: center;
    width: 100%;
}

.navbar a, #themepicker {
    color: var(--textColor);
    text-decoration: none;
    padding: 0 1em;
    cursor: pointer;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.navRight {
    margin-left: auto;
    display: flex;
    gap: 1em;
    transition: transform 0.2s ease-in-out;
}

.navRight a:hover, #themepicker:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
    
}



/* --------------------------- */

.grid > .selfie{
    background-color: transparent;
    background-image: url(../Images/Luna1.png);
    padding: 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.nameplate{
    font-family: 'Climate Crisis';
    font-size: 3.6em;
    font-weight: 200;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
}
.project{  
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: relative;
}
.project img {
    height:376px;
    margin-top: 24px;
    border-radius: 18px;
}
.project p {
    font-size: 0.96em;
    text-align: center;
}



.anglediv1, .anglediv2 {
    background-color: var(--gridColor);
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 24px;
    top: 0;
    transition: background-color 0.2s ease-in-out, clip-path 0.3s ease-in-out ;

}
.anglediv1{
    clip-path: polygon(0 0, 50% 0, 30% 100%, 0% 100%);          
}
.anglediv2{
    clip-path: polygon(70% 0, 100% 0, 100% 100%, 50% 100%);
}

.portfoliowebsite:hover .anglediv1 {
    clip-path: polygon(0 0, 0% 0, 0% 100%, 0% 100%);
    transition: clip-path 0.3s ease-in-out;
}
.portfoliowebsite:hover .anglediv2 {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: clip-path 0.3s ease-in-out;
}


/* MODAL STYLES */
.modal, .themepicker {
    display: none;
    position: fixed; 
    z-index: 1000;
    padding-top: 120px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4);
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
}

.modalContent {
    background-color: var(--gridColor);
    margin: auto;
    padding: 48px;
    width: 60%;
    border-radius: 24px;
    font-family: 'Special Gothic Expanded One';
    color: var(--textColor);
    animation-duration: 0.25s;
    animation-fill-mode: forwards;
    transform-origin: top center;
    z-index: 3;
    transition: background-color 0.2s ease-in-out;

}

.modalContent p {
    font-size: 1.92em;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 900;
}

.modalDescription {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modalDescription.profile {
    display: grid;
    flex-direction: unset;
    justify-content: unset;
    align-items: unset;
}



.modalDescription * {
    margin: 24px 0px;
}

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

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

@keyframes fadeInModalContent {
    from { opacity: 0; transform: translateY(-10px) scaleX(1) scaleY(0.1); }
    to   { opacity: 1; transform: translateY(0) scaleX(1) scaleY(1); }
}

@keyframes fadeOutModalContent {
    from { opacity: 1; transform: translateY(0) scaleX(1) scaleY(1); }
    to   { opacity: 0; transform: translateY(-10px) scaleX(1) scaleY(0.1); }
}

.modal.fade-in { animation-name: fadeInModalBackground; }
.modal.fade-out { animation-name: fadeOutModalBackground; }
.modalContent.fade-in { animation-name: fadeInModalContent; }
.modalContent.fade-out { animation-name: fadeOutModalContent; }



.modalContent > div > hr {
    border: 1px solid var(--textColor);
    margin: 20px 0px
}

.modalHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.modalHeader > h2 {
    font-family: 'Climate Crisis';
    font-weight: 200;
    letter-spacing: 0.05em;
    font-size:3em ;

}

.modalHeader > div {
    display: flex;
    gap: 24px;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: hidden;
    height: 100%;
}

.modalHeader > div > img {
    height: 84px;
    width: auto;
}

.modalHeader > h2, .headerIcons{
    min-width: 0;
}



.close {
  color: #aaaaaa;
  float: right;
  font-size: 34px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

br {
    margin-bottom: 20px;
}


#computerBuildModal ul {
    list-style: none;
    padding: 0;
}

#computerBuildModal li {
    background: var(--backgroundColor);
    padding: 24px;
    border-radius: 24px;
    font-size: 1.44em;
}

.computerflex{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.computerimage {
    width: 50%; 
    height: auto;
    object-fit: contain; 
    padding: 12px; 
    border-radius: 36px;
}


/**************************************/

/*THEMES*/
.themes{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.theme {
    position: relative;
    padding: 10px;
    font-size: 0.em;
    border-radius: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center; 
    height: 48px; 
    overflow: hidden; 
    cursor: pointer;
    transition: transform 0.2s ease-in-out;

}

.theme p {
    margin: 0;
    text-align: center;
    line-height: 20px;
    font-size: 1.3em;
}

.themeSamples {
    display: none;
    flex-direction: column; 
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24px; 
}

.theme:hover {
    transform: scale(1.4);
    cursor: pointer;
    z-index:3;
    /* border: 2px solid var(--textColor); */
    transition: transform 0.2s ease-in-out;

}

.selectedTheme {
    border: 2px solid var(--textColor);    
    transform: scale(1.2);

    z-index: 2;
}

.selectedTheme .themeSamples {
    display: flex;
}



.theme:hover .themeSamples {
    display: flex;
}

.themeSample {
    flex: 1; 
    margin: 0;
    padding: 0;
    width:200%;
}


/** Switch **/
.switch {
  position: relative;
  display: inline-block;
  width: 72px;
  height: 41px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 31px;
  width: 31px;
  left: 5px;
  bottom: 5px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--titleColor);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--titleColor);
}

input:checked + .slider:before {
  -webkit-transform: translateX(31px);
  -ms-transform: translateX(31px);
  transform: translateX(31px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 41px;
}


.profile {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    grid-template-areas: 
        "p1 img"
        "p2 img"
        "p4 img"
        "img2 p3"
}

.profile * {
    border-radius: 15px;
}
.profile > div {
    /* border: 1px solid white; */
    background: var(--backgroundColor);
    padding: 24px;
    font-size: 1.56em;
    margin: 0px 0px;
    
    display: flex;
    align-items: center;
}
.profile > img{
    margin: 0px;
}
.profile > .p1 { grid-area: p1;}
.profile > .p2 { grid-area: p2;}
.profile > .p3 { grid-area: p3;}
.profile > .p4 { grid-area: p4;}
.profile > .profileimg {grid-area: img;}
.profile > .profileimg2 {grid-area: img2;}

.slider.round:before {
  border-radius: 50%;
}

/* *{
    background-image: url(../Icons/butterdog.png);
    background-size: cover;
    background-position: center;
} */

.butterdog{
    background-image: url(../Icons/butterdog.png);
    background-size: cover;
    background-position: center;
}
.butterdogtheme{
    background-image: url(../Icons/butterdog.png);
    background-size: cover;
    background-position: center;
}

.footer{
    width:100%;
    height: 200px;
    background-color: var(--titleColor);
    color: var(--textColor);
    font-family: 'Special Gothic Expanded One';
    text-align: center;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

}
.footer a{
    text-decoration: none;
    color: var(--textColor);
}


@media (min-width: 1800px) {
    .grid {
        gap: 48px;
        margin: 48px;
        margin-top: 204px;
        grid-template-columns: repeat(4, minmax(0,1fr));        
        grid-template-areas:
            "nameplate        nameplate      selfie        selfie"
            "aboutme          aboutme        selfie        selfie"
            "learnmore        learnmore      selfie        selfie"
            "certifications   resume         selfie        selfie"
            "projects         projects       projects      projects"
            "maddysmachines   emberfall      spintegration printer"
            "portfoliowebsite computerBuild  clickerGame   buildings"
            "manim            consord        .             ."
            "knowhow          knowhow        knowhow       knowhow"
            "python           python         java          java"
            "lua              lua            web           web"
            "solidworks       solidworks     soldering     soldering";
    }

    .grid > *, .header {
        border-radius: 36px;
        padding: 48px;
        font-size: 2.4em;
    }

    .header {
        height: 24px;
        font-size: 1.8em;
        margin: 48px;
        width: calc(100% - 96px);
        scale: 102%;
    }

    .project img {
        height: 376px;
        margin-top: 24px;
        border-radius: 18px;
    }

    .nameplate { font-size: 3.6em; }

    .mobile {
        display: none;
    }

}


@media (max-width: 1799px) and (min-width: 1300px) {
    .grid {
        gap: 40px;
        margin: 40px;
        margin-top: 176px;
        grid-template-columns: repeat(6, minmax(0,1fr));        
        grid-template-areas:
            "nameplate        nameplate      nameplate      selfie selfie selfie"
            "aboutme          aboutme        aboutme        selfie selfie selfie"
            "learnmore        learnmore      learnmore      selfie selfie selfie"
            "certifications   certifications certifications selfie selfie selfie"
            "resume           resume         resume         selfie selfie selfie"
            "projects         projects       projects projects projects projects"
            "maddysmachines maddysmachines   emberfall emberfall      spintegration spintegration"
            "printer printer          portfoliowebsite portfoliowebsite computerBuild computerBuild"
            "clickerGame clickerGame      buildings buildings manim manim"
            "consord consord . . . ."
            "knowhow knowhow knowhow knowhow          knowhow        knowhow"
            "python python python          java java java          "
            "lua lua lua web web web              "
            "solidworks solidworks solidworks     soldering soldering soldering";
    }

    .grid > *, .header {
        border-radius: 32px;
        padding: 40px;
        font-size: 2em;
    }

    .header {
        height: 20px;
        font-size: 1.6em;
        margin: 40px;
        width: calc(100% - 80px);
        scale: 102%;
    }

    .project img {
        height: 220px;
        margin-top: 20px;
        border-radius: 16px;
    }

    .nameplate { font-size: 3em; }

    .themes {
        grid-template-columns: repeat(3, 1fr);

    }

    .mobile {
        display: none;
    }

}


@media (max-width: 1299px) and (min-width: 760px) {
    .grid {
        gap: 24px;
        margin: 24px;
        margin-top: 120px;
        grid-template-columns: repeat(2, minmax(0,1fr));        
        grid-template-areas:
            "nameplate        nameplate"
            "selfie           selfie"
            "aboutme          aboutme"
            "learnmore        learnmore"
            "certifications   resume"
            "projects         projects"
            "maddysmachines   emberfall"
            "spintegration    printer"
            "portfoliowebsite computerBuild"
            "clickerGame      buildings"
            "manim            consord"
            "knowhow          knowhow"
            "python           python"
            "java             java"
            "lua              lua"
            "web              web"
            "solidworks       solidworks"
            "soldering        soldering";
    }

    .grid > *, .header {
        border-radius: 20px;
        padding: 28px;
        font-size: 1.4em;
    }

    .header {
        position: fixed;
        top: 0;
        height: 80px;
        font-size: 1em;
        margin: 0;
        padding: 12px 24px;
        width: 100%;
        border: none;
        border-radius: 0;
        box-sizing: border-box;
        scale: 1;
        z-index: 100;
        overflow: visible;
    }

    .navRight { display: none; }
    .navbar > a:first-child { display: block; }

    .project {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        max-height: unset;
        gap: 12px;
    }

    .project img {
        height: 140px;
        width: 100%;
        object-fit: cover;
        margin-top: 8px;
        border-radius: 12px;
    }

    .project p {
        font-size: 0.8em;
        text-align: center;
        margin: 0;
    }

    .selfie { height: 600px; }
    .nameplate { font-size: 2.4em; }

    .header, .knowhow, .certifications, .projects { font-size: 1.6em; }

    .behindthescenes, .anglediv1, .anglediv2 { display: none; }

    .embrimage {
        position: static;
        transform: none;
        left: unset;
        height: 80px;
        width: 80px;
        object-fit: contain;
    }

    .embrimages { display: contents; }
    .emberfall #dragon,
    .emberfall #werewolf { display: none; }

    .modalContent {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%; height: 100%;
        margin: 0px; padding: 20px;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .modal { padding-top: 0; }
        .mobile {
        display: none;
    }

}


/* 1 COLUMN — mobile */
@media (max-width: 759px) {
    .grid {
        gap: 24px;
        margin: 24px;
        margin-top: 120px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "nameplate"
            "selfie"
            "aboutme"
            "learnmore"
            "certifications"
            "resume"
            "projects"
            "maddysmachines"
            "emberfall"
            "spintegration"
            "printer"
            "portfoliowebsite"
            "computerBuild"
            "clickerGame"
            "buildings"
            "manim"
            "consord"
            "knowhow"
            "python"
            "java"
            "lua"
            "web"
            "solidworks"
            "soldering";
    }

    .grid > *, .header {
        border-radius: 16px;
        padding: 24px;
        font-size: 1.2em;
    }

    .header {
        position: fixed;
        top: 0;
        height: 80px;
        margin: 0;
        padding: 12px 24px;
        width: 100%;
        border: none;
        border-radius: 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        scale: 1;
        z-index: 100;
        overflow: visible;
        background-color: var(--titleColor);
        color: var(--textColor);
        font-size: 1em;
    }

    .navbar {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: space-between;
        color: var(--textColor);
    }

    .navRight { display: none; }
    .navbar > a:first-child { display: block; }

    .navRight #themepicker {
        color: var(--textColor);
        cursor: pointer;
    }

    .selfie { height: 400px; }

    .behindthescenes, .anglediv1, .anglediv2 { display: none; }

    .headerIcons { display: none; }

    .embrimage {
        position: static;
        transform: none;
        left: unset;
        height: 50px;
        width: 50px;
        object-fit: contain;
        flex-shrink: 0;
    }

    .embrimages { display: contents; }
    .emberfall #dragon,
    .emberfall #werewolf { display: none; }

    .project {
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
        position: relative;
        max-height: 120px;
        gap: 12px;
    }

    .project img {
        height: 50px;
        width: 50px;
        margin-top: 0;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .project p {
        font-size: 0.7em;
        text-align: left;
        flex-grow: 1;
        margin: 0;
    }

    .nameplate { font-size: 2em; }

    .header, .knowhow, .certifications, .projects { font-size: 1.6em; }

    button {
        padding: 8px 16px;
        font-size: 1.2em;
        border-radius: 12px;
    }

    .modalContent {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        width: 100%; height: 100%;
        margin: 0; padding: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    .modalContent > div:first-child {
        position: sticky;
        top: 0;
        background-color: var(--gridColor);
        z-index: 1001;
        border-bottom: 2px solid var(--textColor);
        padding: 24px;
    }

    .modalContent > div:not(:first-child) {
        padding: 24px;
        overflow-y: auto;
    }

    .modalHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .modalHeader > h2 { font-size: 1.8em; }
    .modalHeader > div > img { height: 50px; }

    .close {
        font-size: 24px;
        margin: 20px;
        color: var(--textColor);
        scale: 120%;
    }

    .modal { padding-top: 0; }
    .modal, .themepicker { background-color: rgba(0, 0, 0, 0.9); }

    .profile {
        grid-template-columns: 1fr;
        gap: 16px;
        grid-template-areas:
            "p1"
            "p2"
            "p3"
            "p4"
            "img"
            "img2";
    }

    .profile > div {
        padding: 16px;
        font-size: 1em;
    }

    .grid ol, .grid li {
        padding-left: 16px;
        font-size: 0.8em;
    }

    #computerBuildModal li {
        padding: 16px;
        border-radius: 12px;
        font-size: 1em;
    }

    .computerflex { flex-direction: column; }

    .computerimage {
        width: 100%;
        padding: 8px;
        border-radius: 16px;
    }

    .theme {
        padding: 6px;
        font-size: 0.5em;
        border-radius: 6px;
        height: 32px;
    }

    .themeSamples { width: 16px; }

    .switch {
        width: 48px;
        height: 27px;
    }

    .slider:before {
        height: 21px;
        width: 21px;
        left: 3px;
        bottom: 3px;
    }

    input:checked + .slider:before { transform: translateX(21px); }

    .slider.round { border-radius: 27px; }
    .mobile {
        display: block;
    }

}