@import url(./styles.css);

:root {
  --python-color: #00b2e9; 
  --hardware-color: #ff9900;
  --java-color: #ffe600;
  --cpp-color: #45c563;
  --electronics-color: #ff9900;
  --restoration-color: #814de0;
  --blockquote-color: #0099ff;

  --dark-base-color: #222;
  --metallic-color: #313131;
  --card-color: #2a2a2a;
  --light-accent-color: #aacde8;
  /* --palette-red: #F94144;
  --palette-orange: #F3722C;
  --palette-tangerine: #F8961E;
  --palette-clementine: #F9844A;
  --palette-yellow: #F9C74F;
  --palette-pea: #90BE6D;
  --palette-aqua: #43AA8B;
  --palette-turqouise: #4D908E;
  --palette-navy: #577590;
  --palette-blue: #277DA1; */
}

/* —————————————————————————————————————————————————— */
/* Primary Styles */
/* —————————————————————————————————————————————————— */
body {
  background-color: var(--dark-base-color);
  color: #fff;
}
.bg-base {
  background-color: var(--dark-base-color);
  color: #fff;
}
.bg-metallic {
  background-color: var(--metallic-color);
  color: #fff;
}
.link-color {
  color: var(--light-accent-color);
}
.link-color:hover {
  color: #00b2e9;
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}
.text-white {
  color: #fff;
}
.bg-card {
  background-color: var(--card-color);
  color: #fff;
}
.hr-color {
  background-color: #6c757d;
  opacity: 70%;
}


.card-title {
  color: var(--light-accent-color);
  text-decoration: underline;
  text-underline-offset: 0.5rem;
}

pre {
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: auto;
  color: #fff;
  margin-top: 0 !important;
}

.code-filename {
  margin-left: 1.25rem;
  color: #fff;
  background-color: var(--dark-base-color);
  padding-top: 0.65rem;
  padding-bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  display: inline-block;
}

.list-group-item.subitem {
  padding-left: 3rem;
}

/* —————————————————————————————————————————————————— */
/* Project Headers */
/* —————————————————————————————————————————————————— */

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
    background-color: #cc6512 !important;
  }

.bg-gradient-sunset {
  background: -webkit-linear-gradient(top, rgb(114, 137, 155) 0%, rgb(184, 185, 180) 40%, rgb(244, 193, 138) 80%, rgb(251, 156, 78) 100%);
  background: -o-linear-gradient(top, rgb(114, 137, 155) 0%, rgb(184, 185, 180) 40%, rgb(244, 193, 138) 80%, rgb(251, 156, 78) 100%);
  background: -ms-linear-gradient(top, rgb(114, 137, 155) 0%, rgb(184, 185, 180) 40%, rgb(244, 193, 138) 80%, rgb(251, 156, 78) 100%);
  background: -moz-linear-gradient(top, rgb(114, 137, 155) 0%, rgb(184, 185, 180) 40%, rgb(244, 193, 138) 80%, rgb(251, 156, 78) 100%);
  background: linear-gradient(to bottom, rgb(114, 137, 155) 0%, rgb(184, 185, 180) 40%, rgb(244, 193, 138) 80%, rgb(251, 156, 78) 100%);
}

.bg-gradient-dark {
  background-color: #314164b0;
  background-image: linear-gradient(160deg, #6e6e6e9f 0%, #272727e8 100%);
}

.bg-gradient-blue {
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
}

.bg-gradient-orange {
  background-color: #FBAB7E;
  background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
}

.bg-main-header {
  background-color: #343a405b;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -moz-backdrop-filter: blur(3px);
  -o-backdrop-filter: blur(3px);
}

/* Adjust for type/scramble text */
@media (min-width: 0px) {
  #main-header {
    min-height: 22vh;
  }
}
@media (min-width: 576px) {
  #main-header {
    min-height: 14vh;
  }
}


.header {
  background-position: center;
  background-size:contain;
  background-repeat: no-repeat;
}


.header-node {
  background-color: #212121;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23000000' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23fffffff'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
}

.header-gameboy {
  background-image: url("https://cdn.vox-cdn.com/thumbor/zPHR8i-e0Um4ay9MW7Ov1g4X4hU=/1400x1050/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/16177021/IMG_2253.jpg");
  background-position: center;
  background-size: cover;
}

.header-herb-garden {
  background-image: url("https://lh3.googleusercontent.com/zOy_3BJg_oG-22wvOxVSBubakOhNktgMxkUGGk66sdEJc-WfNBS6ZR_2-g2NxiaLcYD6FBw423cdmkzAiYeVhQVwr4RjX2xNabIq49BS6-iZBE9thMS2y0w6kMB17QALWYmIXHtnfQ=w2400");
  background-position: center;
  background-size: cover; 
}

.header-smart-plant-waterer {
  background-image: url("https://lh3.googleusercontent.com/9CX_EMdKqylpMLcLMCjLqW6ago5UKHc8oiYjB6cCtdEkhBslTWzCIQIR21EiUEmXaEIupU42Mvh0XvyfX6UrVkUsdRozoIHoc47q94ygA1BWVg-RBTRHMP-du22fi6HoYhw0nV4bUQ=w2400");
  background-position: center;
  background-size: cover; 
}

.header-control-panel {
  background-image: url("https://lh3.googleusercontent.com/uEG-e235YPhn0o1qQg893NnHPUPoe8ISeyUMy1HBj21Kg0-fQB83FmLVIxOj-C12_nzu03VpuBLXPU7QuYyAxGtrY8nvyfHYNyB1wXnOGqiTWyL6QwtOyR_98pMFFJ39h9CL7goRD3s=w2400");
  background-position: center;
  background-size: cover; 
}

.header-digital-thermometer {
  background-image: url("https://lh3.googleusercontent.com/N1Os_81eVFN3FiLBugMeLN6df2AHWczIINT0Qqh7Sypla-W1ZHVcJYvZpfniITs23LVux_Qr9TT2x-6IOUrJciMKLznI8Xms49NY4tIF-_jLySkRWU9r2DqQ5_JkUKBHl3RkQ2BiwpQ=w2400");
  background-position: center;
  background-size: cover; 
}

.header-dht-11-accuracy {
  background-image: url("https://lh3.googleusercontent.com/l3x42HBNkmpg3bhgD14p-Ti9mnuUyDdWqSpwshqbON--osfkJdVRaCismUwOBWYBR7VCxkU1QbbpN_kHpwVsmN7krNhy9Soi3QtPBkedJP78LVZ91-876HCk9Vhq8rTBTzlPU7ACZ-w=w2400");
  background-position: center;
  background-size: cover;  
}

.header-cache {
  background-image: url("https://lh3.googleusercontent.com/gocsR_ugxG7sYGxmmKAzkhR2gQ3QiXI3vgTV5vsybjdLgkxD3UVXrQmX_lKn1wREKsPocH5eSthDF7MzC0YCV1O3uCGI_nfSlX6REt3SvqNh7XE69Efjy6Y0kV-JVSkcCvWp0_qunw=w2400");
  background-position: center;
}


.header-mips-cpu {
  background-image: url("https://lh3.googleusercontent.com/E4Iz5uZxQWtERLQDIN3TwPLBnRZg_gnkkCdSKLcpprVogxUIChvXEwvvmsE4cDhJRQJi6Hji7nGizVqwk8RjXB0N9kwlcrx1JZIX57LeT6jqR-ln7x8uV_Y3mwHMNRyfUCnRcp5JmA=w2400");
  background-position: center;
  background-size: cover;
}

.remoteRover-header {
    background-image: url("./assets/media/project-theta-rover-front.png");
    background-position: center;
    background-size: cover;
}

.variableShiftRegister-header {
  background-image: url("./assets/media/shift-register-optimized.gif");
  background-position: center;
  background-size: contain;
}

.image-attribution {
  background: rgba(0, 0, 0, 0.5);
}  
.code-header-text {
  border-radius: 1vw;
  background-color: rgba(0, 0, 0, 0.5);
  display: inline-block;
}

/* General */

.fs-xl { font-size: x-large; }
.fs-xxl { font-size: xx-large; }

.back-to-top-border {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0 !important;
}

.img-border { 
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.img-overlay {
  opacity: 0.8;
}

.pdf-border {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.blockquote-card { 
  border-left: 0.5rem solid var(--light-accent-color); 
  padding-left: 1rem;
}
.accordian-card{ 
  background-color: rgb(245, 245, 245);
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
}

.terminal textarea, .terminal {
  min-height: 350px;
  background-color: #212121 !important;
  border: 1px solid rgba(0, 0, 0, 0.125) !important;
  border: none !important;
  color: #02db38 !important;
  font-family: Monaco, "Ubuntu Mono", "Courier New", Courier, monospace; font-size: 14px;
  resize: none !important;
}

.dash-ul {
  list-style-type: none;
}
.dash-ul > li:before {
  text-indent: -5px;
  content: "-" !important;
}

/* Code Colors */

.dot{ 
  height: 8px;
  width: 8px;  
  border: 0.25px solid #00000025; 
  border-radius: 50%;
  display: inline-block;
  margin-bottom: 1px;
}

.sort-btn { color: #fff; }
.sort-btn:hover { color: #c2c2c2; }
.sort-btn.active {
  color: #c2c2c2;
  border-bottom: 1px solid #c2c2c2; 
  opacity: 1;
}

.python-color { background-color: var(--python-color); }
.python-card { border-left: 3px solid var(--python-color); }
.python-card:hover {
  border-radius: 0.25rem;
  border: 1px solid var(--python-color); 
  border-left: 3px solid var(--python-color); 
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-duration: 250ms;  
}

.hardware-color { background-color: var(--hardware-color); }
.hardware-card { border-left: 3px solid var(--hardware-color); }
.hardware-card:hover { 
  border-radius: 0.25rem;
  border: 1px solid var(--hardware-color); 
  border-left: 3px solid var(--hardware-color); 
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-duration: 250ms;  
}

.java-color { background-color: var(--java-color); }
.java-card { border-left: 3px solid var(--java-color); }
.java-card:hover {
  border-radius: 0.25rem;
  border: 1px solid var(--java-color); 
  border-left: 3px solid var(--java-color); 
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-duration: 250ms;  
}
.cpp-color { background-color: var(--cpp-color); }
.cpp-card { border-left: 3px solid var(--cpp-color); }
.cpp-card:hover {
  border-radius: 0.25rem;
  border: 1px solid var(--cpp-color); 
  border-left: 3px solid var(--cpp-color); 
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-duration: 250ms;  
}

/* Project Colors */

.electronics-color { background-color: var(--electronics-color); }
.electronics-card { border-left: 3px solid var(--electronics-color); }
.electronics-card:hover {
  border-radius: 0.25rem;
  border: 1px solid var(--electronics-color); 
  border-left: 3px solid var(--electronics-color); 
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-duration: 250ms;  
}

.restoration-color { background-color: var(--restoration-color); }
.restoration-card { border-left: 3px solid var(--restoration-color); }
.restoration-card:hover {
  border-radius: 0.25rem;
  border: 1px solid var(--restoration-color); 
  border-left: 3px solid var(--restoration-color); 
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  transition-duration: 250ms;  
}

.img-frame {
  height: 150px !important;
  background-position: center !important;
  background-size: cover !important;
  overflow: hidden !important;
  border-top-right-radius: calc(0.3rem - 1px);
  border-top-left-radius: calc(0.3rem - 1px);
  object-fit: contain;
}


/* Sort Script */

.show { display: block !important; }
.active { opacity: 70%; }
.content { display: none; }
.sort-btn { cursor: pointer; }
.dropdown-item { cursor: pointer; }



/* Popper JS */
/* #arrow,
#arrow::before {
position: absolute;
width: 8px;
height: 8px;
background: white;
}

#arrow {
visibility: hidden;
}

#arrow::before {
visibility: visible;
content: 'hello';
} */


/* Scramble Text */
.dud {
  color: #343a40a2;
}

/* Code snippet */
pre {
  background-color: var(--dark-base-color) !important;
}


.fit-content {
  max-width: max-content;
  height: auto;
}

/* Connected dot canvas */
canvas {
  position: absolute;
}