@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;600&family=Roboto:wght@100;400;700;900&display=swap');

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: 'Fira Code', monospace;
  /* font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace; */
}

:root {
  --grayDark: #2d3748;
  --text: #2d3748;
  --background: rgb(247, 250, 252);
  --background-dark: rgb(247, 250, 252);
  --primary: #c05621;
  --primaryHover: #2c5282;
  --secondary: #5a67d8;
  --muted: #e2e8f0;
  --success: #9ae6b4;
  --info: #63b3ed;
  --warning: #faf089;
  --danger: #feb2b2;
  --light: rgb(248, 250, 252);
  --dark: rgb(45, 55, 72);
  --textMuted: #718096;
  --heading: #000;
  --divider: #edf2f7;
  --icon_brightest: #edf2f7;
  --icon_darker: rgb(203, 213, 224);
  --icon_darkest: rgb(113, 128, 150);
  --icon_night: rgb(56, 64, 75);
  --icon_red: rgb(229, 62, 62);
  --icon_blue: rgb(49, 130, 206);
  --icon_orange: rgb(237, 137, 54);
  --icon_yellow: rgb(236, 201, 75);
  --icon_pink: rgb(237, 100, 166);
  --icon_purple: rgb(128, 89, 212);
  --icon_green: rgb(72, 187, 120);
  --shadow: rgba(56, 64, 75, 0.4);
  --shadow-dark: rgba(203, 213, 224, 0.4);
  --grad1: linear-gradient(to right bottom, #D585FF 0%, #00FFEE 100%);
  --grad2: linear-gradient(to right bottom, #D4145A 0%, #FBB03B 100%);
  --grad3: linear-gradient(to right bottom, #662D8C 0%, #ED1E79 100%);
  --grad4: linear-gradient(to right bottom, #009245 0%, #FCEE21 100%);
  --grad5: linear-gradient(to right bottom, #942a2a 0%, #bafc21 100%);
  --grad6: linear-gradient(to right bottom, #916c29 0%, #fc21cd 100%);
  --grad7: linear-gradient(to right bottom, #009245 0%, #FCEE21 100%);
  --grad8: linear-gradient(to right bottom, #972c3e 0%, #5177be 100%);
  --grad9: linear-gradient(to right bottom, #000a92 0%, #66fc21 100%);
  --uigrad_gradegrey: linear-gradient(to right, #bdc3c7, #2c3e50);
  --uigrad_piggypink: linear-gradient(to right, #ee9ca7, #ffdde1);
  --uigrad_coolsky: linear-gradient(to right, #2980b9, #6dd5fa, #ffffff);
  --uigrad_megatron: linear-gradient(to right, #c6ffdd, #fbd786, #f7797d);
  --uigrad_moonlitasteroid: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  --uigrad_jshine: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
  --uigrad_eveningsunshine: linear-gradient(to right, #b92b27, #1565c0);
  --uigrad_darkocean: linear-gradient(to right, #373b44, #4286f4);
  --uigrad_yoda: linear-gradient(to right, #493240, #ff0099);
  --uigrad_metapolis: linear-gradient(to right, #659999, #f4791f);
  --uigrad_harvey: linear-gradient(to right, #1f4037, #99f2c8);
  --uigrad_memariani: linear-gradient(to right, #aa4b6b, #6b6b83, #3b8d99);
  --uigrad_flare: linear-gradient(to right, #f12711, #f5af19);
  --uigrad_witchinghour: linear-gradient(to right, #240b36, #c31432);
  --uigrad_kyoopal: linear-gradient(to right, #dd3e54, #6be585);
}

.grad1 { background: var(--uigrad_yoda); }
.grad2 { background: var(--uigrad_metapolis); }
.grad3 { background: var(--uigrad_jshine); }
.grad4 { background: var(--uigrad_flare); }
.grad5 { background: var(--uigrad_piggypink); }
.grad6 { background: var(--uigrad_harvey); }
.grad7 { background: var(--uigrad_darkocean); }
.grad8 { background: var(--uigrad_memariani); }
.grad9 { background: var(--uigrad_witchinghour); }
.gradMoon { background: var(--uigrad_moonlitasteroid); }
.gradGrey { background: var(--uigrad_gradegrey); }


.layout {
  display: flex;
}

.lightTheme .mainContent {
  background-color: var(--light) !important;
  color: var(--dark) !important;
}

.darkTheme .mainContent {
  background-color: var(--dark) !important;
  color: var(--light) !important;
}

.lightTheme #intro > * { color: var(--dark) !important; }
.darkTheme #intro > * { color: var(--light) !important; }

.menu {
  position: absolute;
  /* For mobile phones: */
  left: .5rem;
  top: 1rem;
}

.menu p {
  display: block;
}

.lightTheme .menu p {
  filter: drop-shadow(0px 0px 2px var(--shadow));
}

.darkTheme .menu p {
  filter: drop-shadow(0px 0px 2px var(--shadow-dark));
}

.menu p button {
  background: none!important;
  border: none;
  padding: 0!important;
  cursor: pointer;
  /* border-radius: .25rem;
  background: #e0e0e0;
  padding: 0.5rem!important;
  box-shadow:  .125rem .125rem .375rem #bebebe,
               -.125rem -.125rem .375rem #ffffff; */
}

.menu p button:active g {
  transform: scale(.9);
  transition: .1s;
}

.menu p button:hover svg {
  transform: scale(1.1);
  transition: .1s;
}

.menu p button:focus-visible svg {
  transform: scale(1.1);
  transition: .1s;
}

/* .menu p a:active img {
  transform: scale(.9);
  transition: .1s;
}
.menu p a:hover img {
  transform: scale(1.1);
  transition: .1s;
} */

/* For mobile phones: */
.inner { padding-left: 3rem; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1rem; }
h4 { font-size: .75rem; }
h5 { font-size: .5rem; }
.intro p { font-size: 1rem; }
.projectCardTitle { font-size: .75rem; }
.projectCardsContainer { grid-gap: 1rem 2rem; grid-template-columns: 1fr; }
.skills { grid-template-columns: repeat(3, 1fr); }
.miniSkills { grid-template-columns: repeat(4, 1fr); }

@media only screen and (min-width: 40rem) {
  /* For tablets: */
  .menu { left: .75rem; }
  .inner { padding-left: 4rem; }
  h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1rem; }
  h5 { font-size: .75rem; }
  .intro p { font-size: 1.5rem; }
  .projectCardTitle { font-size: 1rem; }
  .projectCardsContainer { grid-gap: 1.5rem 3rem; grid-template-columns: 1fr; }
  .skills { grid-template-columns: repeat(5, 1fr); }
  .miniSkills { grid-template-columns: repeat(7, min-content); }
}

@media only screen and (min-width: 50rem) {
  /* For desktop: */
  .menu { left: 1rem; }
  .inner { padding-left: 5rem; }
  h1 { font-size: 4rem; }
  h2 { font-size: 3rem; }
  h3 { font-size: 2rem; }
  h4 { font-size: 1.5rem; }
  h5 { font-size: 1rem; }
  .intro p { font-size: 2rem; }
  .projectCardTitle { font-size: 1.5rem; }
  .projectCardsContainer { grid-gap: 2rem 4rem; grid-template-columns: 1fr 1fr; }
  .skills { grid-template-columns: repeat(6, 1fr); }
  .miniSkills { grid-template-columns: repeat(10, 1fr); }
}

@media only screen and (min-width: 75rem) {
  /* For desktop: wide screen */
  .projectCardsContainer { grid-gap: 2rem 4rem; grid-template-columns: 1fr 1fr 1fr; }
}

/* .projectsBackground {
  background: linear-gradient(to right, SlateBlue 0%, DeepSkyBlue 100%);
  clip-path: polygon(0 15%, 100% 25%, 100% 85%, 0 75%);
} */
.projects-divider-background {
  background: linear-gradient(to right, SlateBlue 0%, DeepSkyBlue 100%);
}

.about-divider-background {
  background: linear-gradient(to right, transparent 0%, var(--success) 100%);
}

.experience-divider-background {
  background: linear-gradient(to right, transparent, var(--danger) 100%);
}

.projectCardsContainer {
  display: grid;
  width: 90%;
}

.projectCardsContainer h2 {
  grid-column: -1/1;
  /* color: white !important; */
}

.projectCard {
  width: 100%;
  box-shadow: 0 0 .25rem var(--icon_night);
  position: relative;
  text-decoration: none;
  border-radius: 1rem;
  padding: 1rem;
  color: var(--icon_brightest);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.projectCard:hover {
  /* color: white !important; */
  transform: scale(1.02);
  box-shadow: 0 0 .5rem var(--icon_night);
}

.projectCard:focus-visible {
  /* color: white !important; */
  transform: scale(1.02);
  box-shadow: 0 0 .5rem var(--icon_night);
}

.projectCard a {
  text-decoration: none;
  color: var(--icon_brightest);
}

.projectCard:hover a {
  text-decoration: underline;
}

.projectCardTitle {
  text-transform: uppercase;
  letter-spacing: wide;
  padding-top: 1rem;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 0.25rem;
}

.projectCardContent {
  opacity: 0.85;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}


.miniSkills {
  display: grid;
  width: 80%;
  grid-gap: .25rem .75rem;
  padding-left: 1rem;
}

.miniSkill {
  justify-content: center;
  text-align: center;
  width: 100%;
  /* box-shadow: 0 0 .125rem var(--icon_night); */
  position: relative;
  text-decoration: none;
  border-radius: .25rem;
  padding: .0675rem .125rem;
  color: var(--icon_brightest);
  text-shadow: 0 0 .25rem var(--icon_night);
  background-color: var(--icon_darkest);
}

.skills {
  display: grid;
  width: 80%;
  grid-gap: 1rem;
}

.skill {
  justify-content: center;
  text-align: center;
  /* width: 100%; */
  box-shadow: 0 0 .25rem var(--icon_night);
  position: relative;
  text-decoration: none;
  border-radius: .5rem;
  padding: .5rem;
  color: var(--icon_brightest);
  background-color: var(--icon_darkest);
  font-weight: bold;
  text-shadow: 0 0 .25rem var(--icon_night);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.skill:hover {
  transform: scale(1.05);
}


.upDown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;}

.upDown > svg {
  animation-name: udKeyFrames;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes udKeyFrames {
  from { transform: translateY(0); }
  to { transform: translateY(2rem); }
}

.upDownWide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.upDownWide > svg {
  animation-name: udwKeyFrames;
  animation-duration: 10s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes udwKeyFrames {
  from { transform: translateY(0); }
  to { transform: translateY(12rem); }
}

.contactWave {
  width: 100%;
}

.contactWave path {
  /* fill: var(--icon_green); */
  stroke: none;
}

#footer {
  text-align: center !important;
  justify-content: center;
}