/**********************************************
 *
 * GLOBAL
 *
 **********************************************/

/* Headeings Font */
@import url('https://fonts.googleapis.com/css2?family=Gruppo&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
/* font-family: 'Gruppo', 'Open Sans', sans-serif; */

/* Copy Font */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,200;0,400;0,600;0,800;1,200;1,400;1,600;1,800&display=swap');
/* font-family: 'Exo 2', 'Helvetica', sans-serif; */


/* BTH font */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');
/* font-family: 'Oswald', sans-serif; */




body {
  margin-top: 100px;
  /*padding: 20px;*/
  background-color: rgba(153,179,191,1);
  color: rgba(0, 0, 0, 1);
}


* {
  /*color: rgba(0, 0, 0, 1);*/
  transition: all ease-in-out 150ms;
}

a {

}

a:hover {
  color: rgba(250, 220, 197,1) !important;

}

body, p, li, span, label, legend {
  font-family: 'Exo 2', 'Helvetica', sans-serif !important;
  font-size: 16px;
}


h1, h2, h3, h4, h5, h6 {
  font-family: 'Gruppo', 'Open Sans', sans-serif !important;
}


.h1, .h2, .h3, h1, h2, h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}






/**********************************************
 *
 * NAVBAR
 *
 **********************************************/

 .brians-navabar {
  height: 75px;
}

.brians-navbar-brand{
  float: left;
  height: 75px;
  padding: 15px 15px 20px 15px !important;
  margin: 0;
  font-size: 50px;
  line-height: 35px;
  font-family: 'Gruppo', 'Open Sans', sans-serif !important;
}

.brians-navbar-nav {
  /*box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);*/
}

.navbar-collapse.in {
  box-shadow: 0 1px 0 rgba(255, 255, 255,0.2), 0 25px 50px rgba(0, 0, 0, 0.3);
}


.brians-navbar-nav > li > a {
  padding-top: 17px;
  padding-bottom: 17px;

  padding-top: 10px;
  padding-bottom: 10px;

  line-height: 36px;
}

.navbar-collapse.collapse.in > ul > li > a {
  padding-top: 12px;
  padding-bottom: 12px;

  padding-top: 10px;
  padding-bottom: 10px;

  line-height: 36px;
}

.brians-navbar-nav  .dropdown-menu i {
  margin-right: 5px;
  font-size: 1.2em;
}

.dropdown-menu {
  min-width: 250px;
}

.contact-item > span{
  padding: 3px 20px;
}

.contact-item.child.child:hover {
  color: rgba(250, 220, 197,1) !important;
}
.navbar-collapse {
  min-height: calc(100vh-75px);
  background-color: #f8f8f8;
}

.navbar-default, .navbar-collapse {
  background-color: rgba(153,179,191,1);
  color: rgba(0, 0, 0, 1);
}

.navbar-default {
  border: none;
}


.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
  color: #555;
  background-color: rgba(47, 90, 100, 0.4);
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
  color: #333;
  background-color: rgba(47, 90, 100, 0.4);
  color: rgba(250, 220, 197,1) !important;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
  background-color: #eee;
  background-color: rgba(47, 90, 100, 0.4);

}


.dropdown-menu {
  background-color: rgba(120, 150, 165, 1);
}

.dropdown-menu > li > a {
    font-weight: 400;
    line-height: 1.42857143;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
  color: rgba(250, 220, 197,1) !important;
  text-decoration: none;
  background-color: rgba(47, 90, 100, 0.2);
}

.navbar-default .navbar-brand {
    color: rgba(0, 0, 0, 1);
}

.navbar-default .navbar-nav > li > a {
    color: rgba(0, 0, 0, 1);
}

.dropdown-header {
    display: block;
    padding: 3px 20px;
    font-size: 14px;
    line-height: 1.42857143;
    color: rgba(0, 0, 0, 1);
    white-space: nowrap;
}

.navbar-toggle {
  padding: 9px 10px;
  margin-right: 20px;
  margin-top: 20px;
}

.navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: rgba(0, 0, 0, 1);
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 580px;
}






/**********************************************
 *
 * FONT AWESOME SPIN ANIMATION TWEEKS
 *
 **********************************************/


.mega-ultra-super-slow-spin {
  -webkit-animation:  fa-spin 45s infinite linear;
  animation:  fa-spin 45s infinite linear;
}

.ultra-super-slow-spin {
  -webkit-animation: fa-spin 25s infinite linear;
  animation: fa-spin 25s infinite linear;
}

.super-slow-spin {
  -webkit-animation: fa-spin 11s infinite linear;
  animation: fa-spin 11s infinite linear;
}

.slow-spin {
  -webkit-animation: fa-spin 9s infinite linear;
  animation: fa-spin 9s infinite linear;
}

.medium-spin {
  -webkit-animation: fa-spin 5s infinite linear;
  animation: fa-spin 5s infinite linear;
}

.fast-spin {
  -webkit-animation: fa-spin 3s infinite linear;
  animation: fa-spin 3s infinite linear;
}

.super-fast-spin {
  -webkit-animation: fa-spin 1s infinite linear;
  animation: fa-spin 1s infinite linear;
}

.ultra-super-fast-spin {
  -webkit-animation: fa-spin 200ms infinite linear;
  animation: fa-spin 200ms infinite linear;
}








/**********************************************
 *
 * LINKS
 *
 **********************************************/

#copied_message_box {
  display: none;
  position: fixed;
  width: 200px;
  line-height: 20px;
  text-align: center;
  z-index: 100000;
  padding: 15px 45px;
  font-size: 25px;
  background: rgba(170, 195, 205, 1);
  font-variant: small-caps;
  color: rgba(67,132,136,1);
  border-radius: 5px;
  box-shadow: 0 0 calc(1px * 0.5) 1px rgba(67,132,136,1);
}


[data-link-type] {
  cursor: pointer !important;
}

[data-link-type] > i{
  font-size: 1.25em;
  margin-right: 10px;
}


[data-link-type="electronic-mail"]:after {
  content: attr(data-obfuscate-name)"@"attr(data-obfuscate-domain)"."attr(data-obfuscate-tld) ;
  line-height: 33px;
}


[data-link-type="web-link"]:after, [data-link-type="relative-link"]:after {
  content: attr(data-link-icon);
  text-transform: capitalize;
  line-height: 33px;
}


[data-link-type="phone-number"]:after {
  content: attr(data-obfuscate-country-code)attr(data-obfuscate-part-one)attr(data-obfuscate-part-two)"" ;
  line-height: 33px;
}


[data-link-type="telegram"]:after {
  content: "my telegram username";
  line-height: 33px;
}

[data-link-type="skype"]:after {
  content: "skype";
  line-height: 33px;
}



/**********************************************
 *
 * HERO SECTION
 *
 **********************************************/

.hero-container {
  display: flex;
  align-items: center;
}

h2.hero-copy-lg {
  font-weight: 700;
  font-size: 1.85em;
  text-align: right;
  line-height: 1.15em;
  color: rgba(255, 255, 255, 0.75);
  text-shadow:
    0 0 0 rgba(153,179,191,1),
    0 1px 1px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(0, 0, 0, 0.15),
    1px 0 0 rgba(0, 0, 0, 0.15),
    0 -1px 0 rgba(0, 0, 0, 0.15),
    -1px 0 0 rgba(0, 0, 0, 0.15);
}

h2.hero-copy-sm {
  margin-top: 20px;
  line-height: 1.15em;
  letter-spacing: 1px;
}

.hero-img-lg {
  width: 250px;
  margin-bottom: 30px;
}

.hero-img-lg-outer, .hero-img-sm-outer {
  display: flex;
  justify-content: space-around;
  align-items: middle;
}









/**********************************************
 *
 * CONTENT SECTIONS
 *
 **********************************************/

.section-title {
  padding-top: 70px;
  font-weight: 700;
  margin-bottom: 75px;
  font-size: 38px;
}


.section-icon {
  padding-top: calc(1px * 1.5);
  height: 33px;
  width: 33px;
  font-size: 20px;
  text-align: center;
  display: inline-block;
  line-height: 33px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.9);
  color: rgba(153,179,191,1);
}

.cv-section-outer {
  min-height: 500px;
}












/**********************************************
 *
 * EXPERIENCE
 *
 **********************************************/


.experience-company-logo {
  background-position: center center !important;
  transition: all ease-in-out 300ms;
  position: absolute;
  height: 70px;
  width: 100px;
  background-color: rgba(0, 0, 0, 1);
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 2px;
  left: -10px;
  top: -10px;
  overflow: hidden;
}



.experience-block {
  /*height: 500px;*/
  transition: all 300ms ease-in-out;
  position: relative;
  border-top-left-radius: 50% 10px;
  border-top-right-radius: 50% 10px;
  border-bottom-left-radius: 50% 10px;
  border-bottom-right-radius: 50% 10px;
  padding:  0 20px 30px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.experience-copy-abstract {

}

.additional-experience-outer > ul {
  padding: 0 0 0 50px;
  list-style-type: disc;
  margin-top: 20px;
  border-top-left-radius: 10px 50%;
  border-top-right-radius: 10px 50%;
  border-bottom-left-radius: 10px 50%;
  border-bottom-right-radius: 10px 50%;
}

.additional-experience-outer {
  padding: 20px 50px 30px;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7);
}


.experience-block:hover {
  margin-top: -1px;
  margin-bottom: 1px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /*transform: scale(1.01);*/
}

.experience-block-outer {
  margin-bottom: 40px;
}

.experience-block-passify {
  filter: blur(1px);
  opacity: 0.5;
}


.experience-job-title, .experience-job-time {
  text-align: right;
}

.experience-job-title > h3 {
  padding-left: 80px;
  font-size: 20px;
}

.experience-job-time {
  font-size: 0.8em;
}

.experience-job-copy > h4 {
  font-size: 1.2em;
}



.icon-sweep-right { background-position: center right !important; }
.icon-sweep-left { background-position: center left !important; }
.icon-sweep-down { background-position: bottom center !important; }
.icon-sweep-up { background-position: top center !important; }
.icon-sweep-down-right { background-position: bottom right !important; }
.icon-sweep-down-left { background-position: bottom left !important; }
.icon-sweep-up-right { background-position: top right !important; }
.icon-sweep-up-left { background-position: top left !important; }







/**********************************************
 *
 * EDUCATION
 *
 *********************************************/




.cv-section-outer > hr {
  border-bottom: 3px dotted rgba(66, 109, 129, 1);
  margin: 50px 10%;
  width: 80%;
  border-top: none;
}




.edu-left-image-block, .edu-right-image-block {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  padding: 5px;
}

.edu-right-copy-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

}

.edu-icon {
  text-align: center;
  width: 100%;
}

.edu-icon > img {
  margin: 10px;
}




.edu-img-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  padding: 15px;
}




.edu-all-images-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 30px;
}


.edu-img-container {
  opacity: 1;
  overflow: hidden;
  width: 100%;
  border-radius: calc(2px * 1.25);
  box-shadow: inset 0 0 0 1px rgba(0, 255, 255, 0.9);
  mix-blend-mode: normal;
}

.edu-sm-img-container {
  height: 160px;
 }

.edu-lg-img-container {
  height: 350px;
}


.mobile-image-spacer {
  height: 40px;
}

.edu-img {
  width: inherit;
  height: inherit;
  background-size: cover !important;
  background-position: center center !important;
  mix-blend-mode: hard-light;
  opacity: 0.7;
}

.edu-sm-img {
  transform: scale(calc(1 + (15/160)));
}

.edu-lg-img {
  transform: scale(calc(1 + (15/350)));
}






















/**********************************************
 *
 * SKILLS
 *
 **********************************************/



#skills_table {
  margin-top: 30px;
  position: relative;
}

#skills_table::before {
  font-family: 'Gruppo', 'Open Sans', sans-serif !important;
  font-size: 16px;
  top: -30px;
  position: absolute;
  content: "(click column headers to toggle sort)";
}


.form-control.input-md {
  margin-left: 10px;
}


#skills_table td, #skills_table th {
  vertical-align: middle;
  position: relative;
}

th {
  cursor: pointer;
}

#skills_table td:nth-child(1) {
  text-align: right;
  padding: 10px 20px 10px 10px;
}

#skills_table th:nth-child(1) {
  text-align: right;
  padding: 10px 40px 10px 10px;
}


#skills_table td  {

}


.competence-score-underlayer {
  background: -moz-linear-gradient(left,  rgba(65, 85, 45, 1) 0%, rgba(91, 176, 0, 1) 100%);
  background: -webkit-linear-gradient(left,  rgba(65, 85, 45, 1) 0%, rgba(91, 176, 0, 1) 100%);
  background: linear-gradient(to right,  rgba(65, 85, 45, 1) 0%, rgba(91, 176, 0, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42552d', endColorstr='#5bb000', GradientType=1 );
}


.interest-score-underlayer {
  background: -moz-linear-gradient(left,  rgba(55, 99, 107, 1) 0%, rgba(0, 178, 210,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(55, 99, 107, 1) 0%, rgba(0, 178, 210,1) 100%);
  background: linear-gradient(to right,  rgba(55, 99, 107, 1) 0%, rgba(0, 178, 210,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#336068', endColorstr='#00b2d2', GradientType=1 );
}

.speed-score-underlayer {
  background: -moz-linear-gradient(left,  rgba(125, 90, 64, 1) 0%, rgba(255, 108, 0,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(125, 90, 64, 1) 0%, rgba(255, 108, 0,1) 100%);
  background: linear-gradient(to right,  rgba(125, 90, 64, 1) 0%, rgba(255, 108, 0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8a6041', endColorstr='#ff6c00', GradientType=1 );
}



#skills_table span {
  border-radius: 2px;
  box-shadow:
    inset 0 calc(1px * -0.75) 1px rgba(255, 255, 255, 0.8),
    inset 0 calc(1px * 0.5) 1px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.1);
  display: block;
  width: 100%;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0);
}



.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: rgba(66, 109, 129, 1);
    border-color: rgba(66, 109, 129, 1);
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
    z-index: 2;
    color: #23527c;
    background-color: rgba(66, 109, 129, 1);
    border-color: #ddd;
}


thead {
  background: rgba(0, 0, 0, 0.1);
}

.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: rgba(255, 255, 255, 0.2);
}


.table-striped > tbody > tr {
  transition: all 250ms ease-in-out;
}


.table-striped > tbody > tr:hover {
    background-color: rgba(255, 255, 255, 0.4);
    box-shadow: 5px 0 1px -3px rgba(250, 220, 197,1), -5px 0 1px -3px rgba(250, 220, 197,1);
}



.sorting_asc::after {
  transition: color 200ms ease;
  position: absolute;
  content: "△";
  font-size: 25px;
  top: 0px;
  right: 8px;
  color: rgba(250, 220, 197, 0.65) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}

.sorting_desc::after {
  transition: color 200ms ease;
  position: absolute;
  content: "▽";
  font-size: 25px;
  top: 0px;
  right: 8px;
  color: rgba(250, 220, 197, 0.65) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
}

.sorting_asc:hover::after, .sorting_desc:hover::after {
  color: rgba(250, 220, 197, 1) !important;
}








.project-container-outer {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}

.project-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.project-selector {
  text-align: center;
  position: relative;
  margin: 30px;
  padding: 0 10px;
  height: 120px;
  width: 150px;
  border-top-left-radius: 100% 10px;
  border-top-right-radius: 100% 10px;
  border-bottom-right-radius: 100% 10px;
  border-bottom-left-radius: 100% 10px;
  box-shadow:
    0 0 0 1px rgba(55, 95, 115, 1),
    0 0 0 3px rgba(255, 255, 255, 0.5),
    0 0 0 5px rgba(55, 95, 115, 1)
    ;
  cursor: pointer;
  transition: all ease-in-out 200ms;
}

.project-selector:hover, .active-project {
  /*background-color: rgba(255, 255, 255, 0.4);*/
  background: rgb(209,234,255);
  background: -moz-linear-gradient(top,  rgba(209,234,255,0.5) 0%, rgba(13,94,147,0.2) 100%);
  background: -webkit-linear-gradient(top,  rgba(209,234,255,0.5) 0%,rgba(13,94,147,0.2) 100%);
  background: linear-gradient(to bottom,  rgba(209,234,255,0.5) 0%,rgba(13,94,147,0.2) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1eaff', endColorstr='#0d5e93',GradientType=0 );

  border-top-left-radius: 100% 40px;
  border-top-right-radius: 100% 40px;
  border-bottom-right-radius: 100% 40px;
  border-bottom-left-radius: 100% 40px;
  mix-blend-mode: luminosity;

}

.project-selector > i {
  margin-top: 20px;
  font-size: 3em;
  color: rgba(120, 150, 165, 1);
  text-shadow: 0 1px rgba(255, 255, 255, 0.4), 0 -1px 0 rgba(0, 0, 0, 0.6);

}

.project-selector > span {
  font-family: 'Gruppo', 'Open Sans', sans-serif !important;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 0.9em;
  letter-spacing: calc(1px * 1.5);
  color: rgba(55, 95, 115, 1);
}

.project-selector::before {
  content: attr(data-project-name);
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 15px;
  font-family: 'Gruppo', 'Open Sans', sans-serif !important;
  font-size: 1.3em;
  font-weight: 700;
  line-height: 0.9em;
  letter-spacing: calc(1px * 1.5);
  color: rgba(55, 95, 115, 1);
}

.project-abstract-container {
  overflow: hidden;
  transition: height, padding 150ms ease-in-out;
  width: 100%;
  line-height: 2em;
  font-size: 1.2em;
}


.mobile-project-abstract-container {
  padding: 20px 5px;
}

.desktop-project-abstract-container {
  padding: 20px;
}


.project-abstract-collapsed {
  height: 0;
  padding: 0;
}




.project-screenshot {
  margin: 0 30px 30px 0;
  width: 100%;
  max-width: 350px;
}
















/**********************************************
 *
 * REFERENCES
 *
 **********************************************/

#slider {
  position: relative;
  /*margin: 20px auto 0 auto;*/
  border-radius: 9px;
  width: 100%;
  box-shadow:
    -50px 0 0 -48px rgba(153,179,191,0.8),
    0 -50px 0 -48px rgba(153,179,191,0.8),
    0 50px 0 -48px rgba(153,179,191,0.8),
    50px 0 0 -48px rgba(153,179,191,0.8),
    -6px 0 0 -4px rgba(66, 109, 129, 1),
    0 -6px 0 -4px rgba(66, 109, 129, 1),
    6px 0 0 -4px rgba(66, 109, 129, 1),
    0 6px 0 -4px rgba(66, 109, 129, 1)
    ;
  overflow: hidden;
}

.reference-slider-outer {
  margin-bottom: 100px;
  position: relative;
}


.slide-list {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 400px;
  width: inherit;
  list-style: none;
}

.slider-slide {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  align-content: stretch;
  margin: 0;
  width: 100%;
  min-height: 400px;
  text-align: center;
  padding: 10px 20px;
  background-color: rgba(153,179,191,1);

}

.slider-slide > img {
  border-radius: 50%;
  border: 2px solid rgba(66, 109, 129, 1);
  opacity: 1;
  mix-blend-mode: luminosity;
  /*mix-blend-mode: normal;*/
}

/*screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity*/


.reference-slider-control-prev, .reference-slider-control-next {
  position: absolute;
  top: calc(50% - 25px);
  z-index: 999;
  display: block;
  background: none;
  border: none;
  line-height: 50px;
  color: rgba(66, 109, 129, 1);
  background-color: rgba(153,179,191,1);
  text-decoration: none;
  font-weight: 600;
  font-size: 50px;
  opacity: 0.8;
  cursor: pointer;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 1),
    0 0 1px rgba(0, 0, 0, 1)
    ;
}

.reference-slider-control-prev:hover, .reference-slider-control-next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 1)
    ;
}

.reference-slider-control-next {
  right: -45px;
}

.reference-slider-control-prev {
  left: -45px;
}

.reference-name-title a {
  color: rgba(66, 109, 129, 1);
  text-decoration: underline;
}

.reference-name-title a:hover {
  color: rgba(66, 109, 129, 1) !important;
}








/**********************************************
 *
 * FOOTER
 *
 **********************************************/

.footer-outer {
  min-height: 300px;
  outline: dotted 2px green;
}


.footer-full-width-band {
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 0;
  min-height: 300px;
  background-color: rgba(0, 0, 0, 0.5);
  outline: dotted 2px blue;
}


.footer {
  color: rgba(180, 180, 180, 1);
  background-color: none;
  min-height: 300px;
  box-shadow: -25vw 0 0 rgba(33, 69, 86, 1), 25vw 0 0 rgba(33, 69, 86, 1), inset 0 0 0 1000px rgba(33, 69, 86, 1);
}