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

}

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

.grid{
    display: grid;
    gap: 40px;
    margin: 40px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 170px;

    grid-template-areas:
      "nameplate        nameplate      selfie        selfie"
      "aboutme          aboutme        selfie        selfie"
      "learnmore        learnmore      selfie        selfie"
      "educationCerts   educationCerts educationCerts educationCerts"
      "certifications   certifications resume        resume"
      "projects         projects       projects      projects"
      "maddysmachines   emberfall      spintegration printer"
      "portfoliowebsite computerBuild  clickerGame   ."
      "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 > .educationCerts       { grid-area: educationCerts; }
.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; }

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

.grid > *, .header{
    color: var(--textColor);
    background-color: var(--gridColor);
    border-radius: 30px;
    padding:40px;
    font-size: 2em;
    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;
}

.grid > *:hover:not(.selfie, .header, .knowhow, .educationCerts, .projects, .nameplate, .aboutme, .funStuff, .python, .java, .lua, .web, .solidworks){
    transform: scale(1.02);
    transition: transform 0.2s ease-in-out;
    cursor: pointer;
}

button {
    background-color: var(--titleColor);
    color: var(--textColor);
    padding: 10px 20px;
    font-size: 2em;
    cursor: pointer;
    border: 2px solid rgba(255, 255, 255, 0);
    border-radius: 15px;
    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: 15px;
    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: 20px;
    font-size: 0.8em;
}

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

/* NAVBAR STYLES */
.header{
    position: fixed;
    top: 0;
    z-index: 2;
    height: 20px;
    font-size: 1.5em;
    margin: 40px;
    display: flex;
    flex-direction: row;
    width: calc(100% - 80px);
    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: 3em;
    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:313px;
    margin-top: 20px;
    border-radius: 15px;
}
.project p {
    font-size: 0.8em;
    text-align: center;
}

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

    }
}

.anglediv1, .anglediv2 {
    background-color: var(--gridColor);
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    border-radius: 20px;
    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: 100px; 
    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: 40px;
    width: 60%;
    border-radius: 20px;
    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.6em;
    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: 20px 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 > h2 {
    font-family: 'Climate Crisis';
    font-weight: 200;
    letter-spacing: 0.05em;
    font-size: 3em;
}

.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: 2.5em;
}

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

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

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  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: 20px;
    border-radius: 20px;
    font-size: 1.2em;
}

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


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

/*THEMES*/
.themes{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 8px;

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

}

.theme p {
    margin: 0;
    text-align: center;
}

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

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

.selectedTheme {
    border: 2px solid var(--textColor);
    transform: scale(1.4);
    z-index: 4;
}

.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: 60px;
  height: 34px;
}

.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: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  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(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

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


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

.profile * {
    border-radius: 15px;
}
.profile > div {
    /* border: 1px solid white; */
    background-color: var(--backgroundColor);
    padding: 20px;
    font-size: 1.3em;
    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%;
}