{"version":3,"sources":["main.18a9b59e.chunk.css","webpack://src/index.scss","webpack://src/vars.scss","webpack://src/App.scss","webpack://src/components/Footer.scss","webpack://src/components/Header.scss","webpack://src/components/ProjectGrid.scss","webpack://node_modules/include-media/dist/_include-media.scss","webpack://src/components/AboutMe/AboutMe.scss"],"names":[],"mappings":"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","file":"main.18a9b59e.chunk.css","sourcesContent":["@import url(https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Montserrat:wght@400;500;600;700&display=swap);\n*{color:var(--text)}body{margin:0;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;background-color:var(--background) !important}code{font-family:source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace}\n\n\n\n:root{--text: black;--background: #3767a8;--header: #84B7DB;--footer: var(--header);--about-me: #F1F1F1;--grid-background: #FECEA8;--grid-header-background: #1C1C1c;--grid-header-text: #F1F1F1;--grid-element-background: #F1F1F1;--chainlink-icon-background: rgba(224, 255, 255, 0.7);--link-color: #1890ff;--grid-element-subheader: darkgrey}\n\n.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion: no-preference){.App-logo{-webkit-animation:App-logo-spin infinite 20s linear;animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:white}.App-link{color:#61dafb}@-webkit-keyframes App-logo-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes App-logo-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}\n\n.site-footer{background:var(--footer);margin:10px;border-radius:5px}.site-footer h2{font-family:\"Fira Code\", monospace;margin:0}.site-footer p{font-family:\"Montserrat\", sans-serif}@media screen and (min-width: 900px){.site-footer p{font-size:16px}}.footer-grid{display:flex;justify-content:space-evenly}.footer-grid .blurb{flex:9 1}.footer-grid .links-container{flex:4 1}.footer-grid .footer-links{padding-left:0;margin:0;-webkit-columns:100px 2;columns:100px 2}.footer-grid .footer-links li{list-style:none}.footer-grid .footer-links a{font-family:\"Montserrat\", sans-serif;text-decoration:underline}\n\nheader{display:flex;flex-direction:row;margin:10px;padding:10px;border-radius:5px;background:var(--header);font-family:\"Fira Code\", monospace}header h1{font-weight:600;margin:0 0 0 5px}header .headerLinks{display:flex;flex-direction:row;align-content:center;margin-left:auto}header .headerLinks h2{margin:0;border-radius:5px;line-height:normal}header .headerLinks h2:hover{background:#ddd}header .headerLinks h2.active{background-color:#4CAF50;color:white}header .headerLinks h2:last-of-type{margin-right:5px}header .icon{display:none}@media screen and (max-width: 660px){header h2{display:none}header .icon{margin-left:auto;display:block;position:absolute;top:19px;right:24px;font-size:30px;border:none}header .headerLinks{visibility:hidden;transition:visibility 0s, opacity 0.5s linear}}@media screen and (max-width: 660px){header.responsive{display:block}header.responsive .headerLinks{visibility:visible;display:flex;flex-direction:column;align-items:flex-start}header.responsive h1{text-align:left}header.responsive h2{display:block;margin-left:5px}}\n\n\n#project-grid-parent{margin:10px;background:var(--grid-background);border-radius:5px}#project-grid-parent>#project-header{background:var(--grid-header-background);border-radius:5px 5px 0 0;margin-bottom:2px;padding:5px}#project-grid-parent>#project-header *{color:var(--grid-header-text)}#project-grid-parent>#project-header h2{margin-bottom:0;font-family:\"Fira Code\", monospace;font-size:24px}#project-grid-parent>#project-header p{margin:0 0 3px;font-family:\"Montserrat\", sans-serif;font-size:18px}@media (max-width: 430px){#project-grid .GridSizer,#project-grid .OneWide,#project-grid .FourByOne .Medium{width:100%}}@media (min-width: 431px) and (max-width: 659px){#project-grid .GridSizer,#project-grid .OneWide .Medium{width:49%}#project-grid .FourByOne{width:100%}}@media (min-width: 660px) and (max-width: 899px){#project-grid .GridSizer,#project-grid .OneWide .Medium{width:33%}#project-grid .FourByOne{width:99%}}@media (min-width: 900px) and (max-width: 1299px){#project-grid .GridSizer,#project-grid .OneWide{width:24.9%}#project-grid .Medium{width:49.8%}#project-grid .FourByOne{width:74.6%}}@media (min-width: 1300px) and (max-width: 1559px){#project-grid .GridSizer,#project-grid .OneWide{max-width:300px;width:19.9%}#project-grid .Medium{max-width:600px;width:39.8%}#project-grid .FourByOne{width:59.5%;max-width:900px}}@media (min-width: 1560px){#project-grid .GridSizer,#project-grid .OneWide{width:300px}#project-grid .Medium{width:600px}#project-grid .FourByOne{width:900px}}.GridElement{padding:5px}.GridElement .GridElementInternal{padding:9px;border-radius:5px;background:var(--grid-element-background);box-shadow:0 1px 2px rgba(0,0,0,0.15);transition:box-shadow 0.3s ease-in-out}.GridElement .GridElementInternal:hover{box-shadow:0 2px 5px rgba(0,0,0,0.3)}.GridElement h2{font-family:\"Fira Code\", monospace;font-weight:400;margin-bottom:0px;line-height:normal}.GridElement h3{line-height:normal;color:var(--grid-element-subheader);margin-bottom:3px}.GridElement p{font-family:\"Montserrat\", sans-serif;font-size:16px;color:black;margin-bottom:0}.OneWide{display:flex;flex-direction:column;width:available}.OneWide img{width:100%;margin-bottom:5px}.Medium img{width:100%;margin-bottom:5px}@media (max-width: 899px){.Medium{display:flex;flex-direction:column;width:available}.Medium img{width:100%;margin-bottom:5px}}@media (min-width: 900px){.Medium .image{float:left;width:50%;-webkit-shape-outside:inset(0);shape-outside:inset(0)}.Medium .image img{margin-bottom:0}.Medium .description{display:inline}.Medium .description p{text-align:justify}.Medium .description h2 h3{display:inline}}@media (min-width: 1561px){.Medium .image{width:40%}}.FourByOne .GridElementInternal{display:flex;align-items:center}.FourByOne .GridElementInternal .image{flex:1 1}.FourByOne .GridElementInternal .image img{width:100%;max-width:100%}.FourByOne .GridElementInternal .description{min-width:20ch;width:30ch}@media (min-width: 661px){.FourByOne .GridElementInternal{flex-direction:row}}@media (max-width: 660px){.FourByOne .GridElementInternal{flex-direction:column}.FourByOne .GridElementInternal .description{width:95%}}.LinkIcon{position:absolute;right:12px;top:12px;font-size:24px;color:black;background:var(--chainlink-icon-background);border-radius:5px}\n\n#about-me-parent{margin-left:10px;margin-right:10px;display:flex;flex-direction:row;justify-content:center}#about-me-parent b{font-weight:500}#about-me-parent .about-me-card{background:var(--about-me);border-radius:5px;margin:0 5px 0;padding:10px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}#about-me-parent #about-me{background:var(--about-me);border-radius:5px;padding:15px;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}#about-me-parent #about-me #info-parent{display:flex;flex-direction:row}#about-me-parent #about-me #info-parent #specific-info{flex:1 1}#about-me-parent #about-me #info-parent #fun-info{flex:1 1}@media screen and (max-width: 660px){#about-me-parent #about-me #info-parent{flex-direction:column}}#about-me-parent #about-me h1{font-family:\"Fira Code\", monospace;font-weight:500}#about-me-parent #about-me h2{font-family:\"Fira Code\", monospace;line-height:normal;margin-bottom:0;font-weight:400;text-align:left}#about-me-parent #about-me p{font-family:\"Montserrat\", sans-serif;font-size:16px;margin:0}#about-me-parent #about-me ul{text-align:left;padding-left:40px;margin-bottom:0}#about-me-parent #about-me li{font-family:\"Montserrat\", sans-serif;font-size:18px;list-style-type:symbols(\"+\");list-style-position:inside}button{background:none !important;border:none;padding:0 !important;color:var(--link-color);cursor:pointer}a{color:var(--link-color)}\n\n","* {\n  color: var(--text);\n}\n\nbody {\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',\n  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',\n  sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  //background: url(\"./images/y-so-serious-white.png\") repeat;\n  background-color: var(--background) !important;\n}\n\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',\n  monospace;\n}\n",":root {\n  --text: black;\n  --background: #3767a8;\n  --header: #84B7DB;\n  --footer: var(--header);\n  --about-me: #F1F1F1;\n  --grid-background: #FECEA8;\n  --grid-header-background: #1C1C1c;\n  --grid-header-text: #F1F1F1;\n  --grid-element-background: #F1F1F1;\n  --chainlink-icon-background: rgba(224, 255, 255, 0.7);\n --link-color: #1890ff;\n --grid-element-subheader: darkgrey;\n}\n\n//:root {\n//  --text: black;\n//  --background: #FFFFFF;\n//  --header: #55CDFC;\n//  --footer: #55CDFC;\n//  --about-me: #F7A8B8;\n//  --grid-background: #F7A8B8;\n//  --grid-header-background: #55CDFC;\n//  --grid-header-text: black;\n//  --grid-element-background: #FFFFFF;\n//  --chainlink-icon-background: rgba(224, 255, 255, 0.7);\n//  --link-color: white;\n//  --grid-element-subheader: #F7A8B8;\n//}\n\n// SASS style sheet */\n// Palette color codes */\n// Palette URL: http://paletton.com/#uid=5320u0k7JRF0n+X3HY4c4I2gzvX */\n\n// Feel free to copy&paste color codes to your application */\n\n\n// As hex codes */\n\n$color-primary-0: #B0E8CF;\t// Main Primary color */\n$color-primary-1: #FCFFFE;\n$color-primary-2: #DBF8EB;\n$color-primary-3: #82D0AD;\n$color-primary-4: #55B086;\n\n$color-secondary-1-0: #B1CFE4;\t// Main Secondary color (1) */\n$color-secondary-1-1: #FCFEFF;\n$color-secondary-1-2: #DCECF7;\n$color-secondary-1-3: #82ABC9;\n$color-secondary-1-4: #5482A3;\n\n$color-secondary-2-0: #D8F7BB;\t// Main Secondary color (2) */\n$color-secondary-2-1: #FDFFFC;\n$color-secondary-2-2: #EDFDDF;\n$color-secondary-2-3: #BFEF95;\n$color-secondary-2-4: #A5E46E;\n\n\n\n// As RGBa codes */\n\n$rgba-primary-0: rgba(176,232,207,1);\t// Main Primary color */\n$rgba-primary-1: rgba(252,255,254,1);\n$rgba-primary-2: rgba(219,248,235,1);\n$rgba-primary-3: rgba(130,208,173,1);\n$rgba-primary-4: rgba( 85,176,134,1);\n\n$rgba-secondary-1-0: rgba(177,207,228,1);\t// Main Secondary color (1) */\n$rgba-secondary-1-1: rgba(252,254,255,1);\n$rgba-secondary-1-2: rgba(220,236,247,1);\n$rgba-secondary-1-3: rgba(130,171,201,1);\n$rgba-secondary-1-4: rgba( 84,130,163,1);\n\n$rgba-secondary-2-0: rgba(216,247,187,1);\t// Main Secondary color (2) */\n$rgba-secondary-2-1: rgba(253,255,252,1);\n$rgba-secondary-2-2: rgba(237,253,223,1);\n$rgba-secondary-2-3: rgba(191,239,149,1);\n$rgba-secondary-2-4: rgba(165,228,110,1);\n\n\n\n// Generated by Paletton.com © 2002-2014 */\n// http://paletton.com */\n","@import '~antd/dist/antd.css';\n\n.App {\n  text-align: center;\n}\n\n.App-logo {\n  height: 40vmin;\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .App-logo {\n    animation: App-logo-spin infinite 20s linear;\n  }\n}\n\n.App-header {\n  background-color: #282c34;\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  font-size: calc(10px + 2vmin);\n  color: white;\n}\n\n.App-link {\n  color: #61dafb;\n}\n\n@keyframes App-logo-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n",".site-footer {\n  background: var(--footer);\n  margin: 10px;\n  border-radius: 5px;\n\n  h2 {\n    font-family: \"Fira Code\", monospace;\n    margin: 0;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n\n    @media screen and (min-width: 900px) {\n      font-size: 16px;\n    }\n  }\n}\n\n.footer-grid {\n  display: flex;\n  justify-content: space-evenly;\n\n  .blurb {\n    flex: 9;\n  }\n\n  .links-container {\n    flex: 4;\n  }\n\n  .footer-links {\n    padding-left: 0;\n    margin: 0;\n\n    columns: 100px 2;\n\n    li {\n      list-style: none;\n    }\n\n    a {\n      //color: black;\n      font-family: \"Montserrat\", sans-serif;\n      text-decoration: underline;\n    }\n  }\n\n}\n","header {\n  display: flex;\n  flex-direction: row;\n\n  margin: 10px;\n  padding: 10px;\n  border-radius: 5px;\n  background: var(--header);\n  font-family: \"Fira Code\", monospace;\n\n  h1 {\n    font-weight: 600;\n    margin: 0 0 0 5px;\n  }\n\n  .headerLinks {\n    display: flex;\n    flex-direction: row;\n    align-content: center;\n    margin-left: auto;\n\n    h2 {\n      margin: 0;\n      border-radius: 5px;\n      line-height: normal;\n\n      &:hover {\n        background: #ddd;\n      }\n\n      &.active {\n        background-color: #4CAF50;\n        color: white;\n      }\n    }\n\n    h2:last-of-type {\n      margin-right: 5px;\n    }\n  }\n\n  /* Hide the link that should open and close the topnav on small screens */\n  .icon {\n    display: none;\n  }\n\n  @media screen and (max-width: 660px) {\n    h2 {\n      display: none;\n    }\n\n    .icon {\n      margin-left: auto;\n      display: block;\n      position: absolute;\n      top: 19px;\n      right: 24px;\n      font-size: 30px;\n      border: none;\n    }\n\n    .headerLinks {\n      visibility: hidden;\n      transition: visibility 0s, opacity 0.5s linear;\n    }\n  }\n\n  @media screen and (max-width: 660px) {\n    &.responsive {\n      display: block;\n\n      .headerLinks {\n        visibility: visible;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n      }\n\n      h1 {\n        text-align: left;\n      }\n\n      h2 {\n        display: block;\n        margin-left: 5px;\n      }\n    }\n  }\n}\n","@import \"~include-media/dist/_include-media.scss\";\n\n$breakpoints: (x-small: 430px, small: 660px, medium: 900px, large: 1300px, x-large: 1560px);\n\n// Override Sass min()\n@function min($numbers...) {\n  @return m#{i}n(#{$numbers});\n}\n\n// Override Sass max()\n@function max($numbers...) {\n  @return m#{a}x(#{$numbers});\n}\n\n#project-grid-parent {\n  margin: 10px;\n  background: var(--grid-background);\n  border-radius: 5px;\n\n  & > #project-header {\n    background: var(--grid-header-background);\n    border-radius: 5px 5px 0 0;\n    margin-bottom: 2px;\n\n\n    padding: 5px;\n\n    * {\n      color: var(--grid-header-text);\n    }\n\n    h2 {\n      margin-bottom: 0;\n      font-family: \"Fira Code\", monospace;\n      font-size: 24px;\n    }\n\n    p {\n      margin: 0 0 3px;\n      font-family: \"Montserrat\", sans-serif;\n      font-size: 18px;\n    }\n\n  }\n}\n\n\n#project-grid {\n\n  //padding: 10px;\n\n  @include media(\"<=x-small\") {\n    .GridSizer, .OneWide, .FourByOne .Medium {\n      width: 100%;\n    }\n  }\n\n  @include media(\">x-small\", \"<small\") {\n    .GridSizer, .OneWide .Medium {\n      width: 49%;\n    }\n    .FourByOne {\n      width: 100%;\n    }\n  }\n\n  @include media(\">=small\", \"<medium\") {\n    .GridSizer, .OneWide .Medium {\n      width: 33%;\n    }\n    .FourByOne {\n      width: 99%;\n    }\n  }\n\n  @include media(\">=medium\", \"<large\") {\n    .GridSizer, .OneWide {\n      width: 24.9%;\n    }\n    .Medium {\n      width: 49.8%;\n    }\n    .FourByOne {\n      width: 74.6%;\n    }\n  }\n\n  @include media(\">=large\", \"<x-large\") {\n    .GridSizer, .OneWide {\n      max-width: 300px;\n      width: 19.9%;\n    }\n    .Medium {\n      max-width: 600px;\n      width: 39.8%;\n    }\n    .FourByOne {\n      width: 59.5%;\n      max-width: 900px;\n    }\n  }\n\n  @include media(\">=x-large\") {\n    .GridSizer, .OneWide {\n      width: 300px;\n    }\n    .Medium {\n      width: 600px;\n    }\n    .FourByOne {\n      width: 900px;\n    }\n  }\n}\n\n.GridElement {\n  padding: 5px;\n\n  .GridElementInternal {\n    padding: 9px;\n    border-radius: 5px;\n    background: var(--grid-element-background);\n\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n    transition: box-shadow 0.3s ease-in-out;\n  }\n\n  .GridElementInternal:hover {\n    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);\n  }\n\n  h2 {\n    font-family: \"Fira Code\", monospace;\n    font-weight: 400;\n    margin-bottom: 0px;\n    line-height: normal;\n  }\n\n  h3 {\n    line-height: normal;\n    color: var(--grid-element-subheader);\n    margin-bottom: 3px;\n  }\n\n  p {\n    font-family: \"Montserrat\", sans-serif;\n    font-size: 16px;\n    color: black;\n    margin-bottom: 0;\n  }\n}\n\n.OneWide {\n  display: flex;\n  flex-direction: column;\n  width: available;\n\n  img {\n    width: 100%;\n    margin-bottom: 5px;\n  }\n}\n\n.Medium {\n  img {\n    width: 100%;\n    margin-bottom: 5px;\n  }\n\n  @include media(\"<medium\") {\n    display: flex;\n    flex-direction: column;\n    width: available;\n\n    img {\n      width: 100%;\n      margin-bottom: 5px;\n    }\n  }\n\n  @include media(\">=medium\") {\n    // Two column sort of layout\n    .image {\n      float: left;\n      width: 50%;\n      shape-outside: inset(0);\n\n      img {\n        margin-bottom: 0;\n      }\n    }\n\n    .description {\n      display: inline;\n\n      p {\n        text-align: justify;\n      }\n\n      h2 h3 {\n        display: inline;\n      }\n    }\n  }\n\n  @include media(\">x-large\") {\n    .image {\n      width: 40%;\n    }\n  }\n}\n\n.FourByOne {\n  .GridElementInternal {\n    display: flex;\n    align-items: center;\n\n    .image {\n      flex: 1;\n\n      img {\n        width: 100%;\n        max-width: 100%;\n      }\n    }\n\n    .description {\n      min-width: 20ch;\n      width: 30ch;\n    }\n\n    @include media(\">small\") {\n      flex-direction: row;\n\n    }\n    @include media(\"<=small\") {\n      flex-direction: column;\n      .description {\n        width: 95%;\n      }\n    }\n  }\n}\n\n.LinkIcon {\n  position: absolute;\n  right: 12px;\n  top: 12px;\n  font-size: 24px;\n  color: black;\n\n  background: var(--chainlink-icon-background);\n  border-radius: 5px;\n}\n","@charset \"UTF-8\";\n\n//     _            _           _                           _ _\n//    (_)          | |         | |                         | (_)\n//     _ _ __   ___| |_   _  __| | ___   _ __ ___   ___  __| |_  __ _\n//    | | '_ \\ / __| | | | |/ _` |/ _ \\ | '_ ` _ \\ / _ \\/ _` | |/ _` |\n//    | | | | | (__| | |_| | (_| |  __/ | | | | | |  __/ (_| | | (_| |\n//    |_|_| |_|\\___|_|\\__,_|\\__,_|\\___| |_| |_| |_|\\___|\\__,_|_|\\__,_|\n//\n//      Simple, elegant and maintainable media queries in Sass\n//                        v1.4.9\n//\n//                http://include-media.com\n//\n//         Authors: Eduardo Boucas (@eduardoboucas)\n//                  Hugo Giraudel (@hugogiraudel)\n//\n//      This project is licensed under the terms of the MIT license\n\n\n////\n/// include-media library public configuration\n/// @author Eduardo Boucas\n/// @access public\n////\n\n\n///\n/// Creates a list of global breakpoints\n///\n/// @example scss - Creates a single breakpoint with the label `phone`\n///  $breakpoints: ('phone': 320px);\n///\n$breakpoints: (\n  'phone': 320px,\n  'tablet': 768px,\n  'desktop': 1024px\n) !default;\n\n\n///\n/// Creates a list of static expressions or media types\n///\n/// @example scss - Creates a single media type (screen)\n///  $media-expressions: ('screen': 'screen');\n///\n/// @example scss - Creates a static expression with logical disjunction (OR operator)\n///  $media-expressions: (\n///    'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'\n///  );\n///\n$media-expressions: (\n  'screen': 'screen',\n  'print': 'print',\n  'handheld': 'handheld',\n  'landscape': '(orientation: landscape)',\n  'portrait': '(orientation: portrait)',\n  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)',\n  'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi), (min-resolution: 3dppx)'\n) !default;\n\n\n///\n/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals\n///\n/// @example scss - Interval for pixels is defined as `1` by default\n///  @include media('>128px') {}\n///\n///  /* Generates: */\n///  @media (min-width: 129px) {}\n///\n/// @example scss - Interval for ems is defined as `0.01` by default\n///  @include media('>20em') {}\n///\n///  /* Generates: */\n///  @media (min-width: 20.01em) {}\n///\n/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`\n///  @include media('>2.0rem') {}\n///\n///  /* Generates: */\n///  @media (min-width: 2.1rem) {}\n///\n$unit-intervals: (\n  'px': 1,\n  'em': 0.01,\n  'rem': 0.1,\n  '': 0\n) !default;\n\n///\n/// Defines whether support for media queries is available, useful for creating separate stylesheets\n/// for browsers that don't support media queries.\n///\n/// @example scss - Disables support for media queries\n///  $im-media-support: false;\n///  @include media('>=tablet') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///  /* Generates: */\n///  .foo {\n///    color: tomato;\n///  }\n///\n$im-media-support: true !default;\n\n///\n/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or\n/// intercept the breakpoint will be displayed, any others will be ignored.\n///\n/// @example scss - This media query will show because it intercepts the static breakpoint\n///  $im-media-support: false;\n///  $im-no-media-breakpoint: 'desktop';\n///  @include media('>=tablet') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///  /* Generates: */\n///  .foo {\n///    color: tomato;\n///  }\n///\n/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint\n///  $im-media-support: false;\n///  $im-no-media-breakpoint: 'tablet';\n///  @include media('>=desktop') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///  /* No output */\n///\n$im-no-media-breakpoint: 'desktop' !default;\n\n///\n/// Selects which media expressions are allowed in an expression for it to be used when media queries\n/// are not supported.\n///\n/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions\n///  $im-media-support: false;\n///  $im-no-media-breakpoint: 'desktop';\n///  $im-no-media-expressions: ('screen');\n///  @include media('>=tablet', 'screen') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///   /* Generates: */\n///   .foo {\n///     color: tomato;\n///   }\n///\n/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted\n///  $im-media-support: false;\n///  $im-no-media-breakpoint: 'desktop';\n///  $im-no-media-expressions: ('screen');\n///  @include media('>=tablet', 'retina2x') {\n///    .foo {\n///      color: tomato;\n///    }\n///  }\n///\n///  /* No output */\n///\n$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;\n\n////\n/// Cross-engine logging engine\n/// @author Hugo Giraudel\n/// @access private\n////\n\n\n///\n/// Log a message either with `@error` if supported\n/// else with `@warn`, using `feature-exists('at-error')`\n/// to detect support.\n///\n/// @param {String} $message - Message to log\n///\n@function im-log($message) {\n  @if feature-exists('at-error') {\n    @error $message;\n  } @else {\n    @warn $message;\n    $_: noop();\n  }\n\n  @return $message;\n}\n\n\n///\n/// Wrapper mixin for the log function so it can be used with a more friendly\n/// API than `@if im-log('..') {}` or `$_: im-log('..')`. Basically, use the function\n/// within functions because it is not possible to include a mixin in a function\n/// and use the mixin everywhere else because it's much more elegant.\n///\n/// @param {String} $message - Message to log\n///\n@mixin log($message) {\n  @if im-log($message) {}\n}\n\n\n///\n/// Function with no `@return` called next to `@warn` in Sass 3.3\n/// to trigger a compiling error and stop the process.\n///\n@function noop() {}\n\n///\n/// Determines whether a list of conditions is intercepted by the static breakpoint.\n///\n/// @param {Arglist}   $conditions  - Media query conditions\n///\n/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint\n///\n@function im-intercepts-static-breakpoint($conditions...) {\n  $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);\n\n  @if not $no-media-breakpoint-value {\n    @if im-log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}\n  }\n\n  @each $condition in $conditions {\n    @if not map-has-key($media-expressions, $condition) {\n      $operator: get-expression-operator($condition);\n      $prefix: get-expression-prefix($operator);\n      $value: get-expression-value($condition, $operator);\n\n      // scss-lint:disable SpaceAroundOperator\n      @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or\n          ($prefix == 'min' and $value > $no-media-breakpoint-value) {\n        @return false;\n      }\n    } @else if not index($im-no-media-expressions, $condition) {\n      @return false;\n    }\n  }\n\n  @return true;\n}\n\n////\n/// Parsing engine\n/// @author Hugo Giraudel\n/// @access private\n////\n\n\n///\n/// Get operator of an expression\n///\n/// @param {String} $expression - Expression to extract operator from\n///\n/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`\n///\n@function get-expression-operator($expression) {\n  @each $operator in ('>=', '>', '<=', '<', '≥', '≤') {\n    @if str-index($expression, $operator) {\n      @return $operator;\n    }\n  }\n\n  // It is not possible to include a mixin inside a function, so we have to\n  // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because\n  // functions cannot be called anywhere in Sass, we need to hack the call in\n  // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with\n  // Sass 3.3, change this line in `@if im-log(..) {}` instead.\n  $_: im-log('No operator found in `#{$expression}`.');\n}\n\n\n///\n/// Get dimension of an expression, based on a found operator\n///\n/// @param {String} $expression - Expression to extract dimension from\n/// @param {String} $operator - Operator from `$expression`\n///\n/// @return {String} - `width` or `height` (or potentially anything else)\n///\n@function get-expression-dimension($expression, $operator) {\n  $operator-index: str-index($expression, $operator);\n  $parsed-dimension: str-slice($expression, 0, $operator-index - 1);\n  $dimension: 'width';\n\n  @if str-length($parsed-dimension) > 0 {\n    $dimension: $parsed-dimension;\n  }\n\n  @return $dimension;\n}\n\n\n///\n/// Get dimension prefix based on an operator\n///\n/// @param {String} $operator - Operator\n///\n/// @return {String} - `min` or `max`\n///\n@function get-expression-prefix($operator) {\n  @return if(index(('<', '<=', '≤'), $operator), 'max', 'min');\n}\n\n\n///\n/// Get value of an expression, based on a found operator\n///\n/// @param {String} $expression - Expression to extract value from\n/// @param {String} $operator - Operator from `$expression`\n///\n/// @return {Number} - A numeric value\n///\n@function get-expression-value($expression, $operator) {\n  $operator-index: str-index($expression, $operator);\n  $value: str-slice($expression, $operator-index + str-length($operator));\n\n  @if map-has-key($breakpoints, $value) {\n    $value: map-get($breakpoints, $value);\n  } @else {\n    $value: to-number($value);\n  }\n\n  $interval: map-get($unit-intervals, unit($value));\n\n  @if not $interval {\n    // It is not possible to include a mixin inside a function, so we have to\n    // rely on the `im-log(..)` function rather than the `log(..)` mixin. Because\n    // functions cannot be called anywhere in Sass, we need to hack the call in\n    // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with\n    // Sass 3.3, change this line in `@if im-log(..) {}` instead.\n    $_: im-log('Unknown unit `#{unit($value)}`.');\n  }\n\n  @if $operator == '>' {\n    $value: $value + $interval;\n  } @else if $operator == '<' {\n    $value: $value - $interval;\n  }\n\n  @return $value;\n}\n\n\n///\n/// Parse an expression to return a valid media-query expression\n///\n/// @param {String} $expression - Expression to parse\n///\n/// @return {String} - Valid media query\n///\n@function parse-expression($expression) {\n  // If it is part of $media-expressions, it has no operator\n  // then there is no need to go any further, just return the value\n  @if map-has-key($media-expressions, $expression) {\n    @return map-get($media-expressions, $expression);\n  }\n\n  $operator: get-expression-operator($expression);\n  $dimension: get-expression-dimension($expression, $operator);\n  $prefix: get-expression-prefix($operator);\n  $value: get-expression-value($expression, $operator);\n\n  @return '(#{$prefix}-#{$dimension}: #{$value})';\n}\n\n///\n/// Slice `$list` between `$start` and `$end` indexes\n///\n/// @access private\n///\n/// @param {List} $list - List to slice\n/// @param {Number} $start [1] - Start index\n/// @param {Number} $end [length($list)] - End index\n///\n/// @return {List} Sliced list\n///\n@function slice($list, $start: 1, $end: length($list)) {\n  @if length($list) < 1 or $start > $end {\n    @return ();\n  }\n\n  $result: ();\n\n  @for $i from $start through $end {\n    $result: append($result, nth($list, $i));\n  }\n\n  @return $result;\n}\n\n////\n/// String to number converter\n/// @author Hugo Giraudel\n/// @access private\n////\n\n\n///\n/// Casts a string into a number\n///\n/// @param {String | Number} $value - Value to be parsed\n///\n/// @return {Number}\n///\n@function to-number($value) {\n  @if type-of($value) == 'number' {\n    @return $value;\n  } @else if type-of($value) != 'string' {\n    $_: im-log('Value for `to-number` should be a number or a string.');\n  }\n\n  $first-character: str-slice($value, 1, 1);\n  $result: 0;\n  $digits: 0;\n  $minus: ($first-character == '-');\n  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);\n\n  // Remove +/- sign if present at first character\n  @if ($first-character == '+' or $first-character == '-') {\n    $value: str-slice($value, 2);\n  }\n\n  @for $i from 1 through str-length($value) {\n    $character: str-slice($value, $i, $i);\n\n    @if not (index(map-keys($numbers), $character) or $character == '.') {\n      @return to-length(if($minus, -$result, $result), str-slice($value, $i))\n    }\n\n    @if $character == '.' {\n      $digits: 1;\n    } @else if $digits == 0 {\n      $result: $result * 10 + map-get($numbers, $character);\n    } @else {\n      $digits: $digits * 10;\n      $result: $result + map-get($numbers, $character) / $digits;\n    }\n  }\n\n  @return if($minus, -$result, $result);\n}\n\n\n///\n/// Add `$unit` to `$value`\n///\n/// @param {Number} $value - Value to add unit to\n/// @param {String} $unit - String representation of the unit\n///\n/// @return {Number} - `$value` expressed in `$unit`\n///\n@function to-length($value, $unit) {\n  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);\n\n  @if not index(map-keys($units), $unit) {\n    $_: im-log('Invalid unit `#{$unit}`.');\n  }\n\n  @return $value * map-get($units, $unit);\n}\n\n///\n/// This mixin aims at redefining the configuration just for the scope of\n/// the call. It is helpful when having a component needing an extended\n/// configuration such as custom breakpoints (referred to as tweakpoints)\n/// for instance.\n///\n/// @author Hugo Giraudel\n///\n/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`\n/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`\n///\n/// @example scss - Extend the global breakpoints with a tweakpoint\n///  @include media-context(('custom': 678px)) {\n///    .foo {\n///      @include media('>phone', '<=custom') {\n///       // ...\n///      }\n///    }\n///  }\n///\n/// @example scss - Extend the global media expressions with a custom one\n///  @include media-context($tweak-media-expressions: ('all': 'all')) {\n///    .foo {\n///      @include media('all', '>phone') {\n///       // ...\n///      }\n///    }\n///  }\n///\n/// @example scss - Extend both configuration maps\n///  @include media-context(('custom': 678px), ('all': 'all')) {\n///    .foo {\n///      @include media('all', '>phone', '<=custom') {\n///       // ...\n///      }\n///    }\n///  }\n///\n@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {\n  // Save global configuration\n  $global-breakpoints: $breakpoints;\n  $global-media-expressions: $media-expressions;\n\n  // Update global configuration\n  $breakpoints: map-merge($breakpoints, $tweakpoints) !global;\n  $media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;\n\n  @content;\n\n  // Restore global configuration\n  $breakpoints: $global-breakpoints !global;\n  $media-expressions: $global-media-expressions !global;\n}\n\n////\n/// include-media public exposed API\n/// @author Eduardo Boucas\n/// @access public\n////\n\n\n///\n/// Generates a media query based on a list of conditions\n///\n/// @param {Arglist}   $conditions  - Media query conditions\n///\n/// @example scss - With a single set breakpoint\n///  @include media('>phone') { }\n///\n/// @example scss - With two set breakpoints\n///  @include media('>phone', '<=tablet') { }\n///\n/// @example scss - With custom values\n///  @include media('>=358px', '<850px') { }\n///\n/// @example scss - With set breakpoints with custom values\n///  @include media('>desktop', '<=1350px') { }\n///\n/// @example scss - With a static expression\n///  @include media('retina2x') { }\n///\n/// @example scss - Mixing everything\n///  @include media('>=350px', '<tablet', 'retina3x') { }\n///\n@mixin media($conditions...) {\n  // scss-lint:disable SpaceAroundOperator\n  @if ($im-media-support and length($conditions) == 0) or\n      (not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {\n    @content;\n  } @else if ($im-media-support and length($conditions) > 0) {\n    @media #{unquote(parse-expression(nth($conditions, 1)))} {\n      // Recursive call\n      @include media(slice($conditions, 2)...) {\n        @content;\n      }\n    }\n  }\n}\n","#about-me-parent {\n  margin-left: 10px;\n  margin-right: 10px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n\n  b {\n    font-weight: 500;\n  }\n\n  .about-me-card {\n    background: var(--about-me);\n    border-radius: 5px;\n    margin: 0 5px 0;\n    padding: 10px;\n    width: fit-content;\n  }\n\n  #about-me {\n    background: var(--about-me);\n    border-radius: 5px;\n    padding: 15px;\n    width: fit-content;\n\n    #info-parent {\n      display: flex;\n      flex-direction: row;\n\n      #specific-info {\n        flex: 1 1 0;\n      }\n\n      #fun-info {\n        flex: 1 1 0;\n      }\n\n      @media screen and (max-width: 660px) {\n        flex-direction: column;\n      }\n    }\n\n    h1 {\n      font-family: \"Fira Code\", monospace;\n      font-weight: 500;\n    }\n\n    h2 {\n      font-family: \"Fira Code\", monospace;\n      line-height: normal;\n      margin-bottom: 0;\n      font-weight: 400;\n\n      text-align: left;\n    }\n\n    p {\n      font-family: \"Montserrat\", sans-serif;\n      font-size: 16px;\n      margin: 0;\n    }\n\n    ul {\n      text-align: left;\n      padding-left: 40px;\n      margin-bottom: 0;\n    }\n\n    li {\n      font-family: \"Montserrat\", sans-serif;\n      font-size: 18px;\n      list-style-type: symbols(\"+\");\n      list-style-position: inside;\n\n    }\n  }\n\n}\n\nbutton {\n  background: none!important;\n  border: none;\n  padding: 0!important;\n  color: var(--link-color);\n  cursor: pointer;\n}\n\na {\n  color: var(--link-color);\n}\n"]}