body {

  /* background: rgb(255, 252, 250); */
  margin: 0;
  padding: 0;
  /*  font-size:120%; */

  background-attachment: fixed;
  background-size: cover;
  background-color: rgb(250, 253, 255);

  /* For browsers that do not support gradients */
  /* background-image: linear-gradient(to bottom, rgb(250, 253, 255), rgb(250, 253, 255), rgba(213, 255, 245, 1)); */

  background-image: linear-gradient(to bottom, rgb(250, 253, 255, 0.9),
      rgb(255, 252, 238, 0.9), rgb(255, 245, 216, 0.9), rgba(213, 255, 245, 0.9)), url(../styles/svg_gradient.svg);

  /* background-image: linear-gradient(to bottom,  rgb(255, 252, 250), 
  rgb(255, 245, 216), rgba(213, 255, 245, 1));   */
  /* 
  background-image: linear-gradient(to bottom,  rgb(255, 252, 250), 
  rgb(255, 245, 216), rgba(213, 255, 245, 1)); */

  /* background-image: linear-gradient(to bottom,rgb(255, 252, 250), rgb(255, 245, 216)); */

  /*
  rgb(187, 239, 226)

  rgb(255, 245, 216)
  rgb(255, 245, 210)
  
  rgb(195, 220, 231)
  rgb(195, 231, 222)
  rgba(213, 255, 245, 0.9)
  rgba(213, 255, 245, 1)

  rgb(255, 252, 250)
  rgb(255, 252, 235)
  */
  height: 600px;
}


@font-face {
  font-family: Russo One;
  /*  font-style: NORMAL_OR_ITALIC; 
/*  font-weight: NUMERIC_WEIGHT_VALUE; */
  src: url(../fonts/RussoOne-Regular.ttf);
}

@font-face {
  font-family: Raleway Dots;
  /*  font-style: NORMAL_OR_ITALIC; 
/*  font-weight: NUMERIC_WEIGHT_VALUE; */
  src: url(../fonts/Raleway-Light.ttf);
}

@font-face {
  font-family: Raleway;
  /* font-style: NORMAL_OR_ITALIC;  */
  /* font-weight: 800;  */
  src: url(../fonts/Raleway-Light.ttf);
}

@font-face {
  font-family: Raleway Regular;
  /* font-style: BOLD;  */
  /* font-weight: 500;  */
  src: url(../fonts/Raleway-Medium.ttf);
}

@font-face {
  font-family: Raleway SemiBold;
  /* font-style: BOLD;  */
  /* font-weight: 500;  */
  src: url(../fonts/Raleway-SemiBold.ttf);
}

@font-face {
  font-family: OpenSans Regular;
  /* font-style: BOLD;  */
  /* font-weight: 500;  */
  src: url(../fonts/OpenSans-Regular.ttf);
}

@font-face {
  font-family: OpenSans Semibold;
  /* font-style: BOLD;  */
  /* font-weight: 500;  */
  src: url(../fonts/OpenSans-Semibold.ttf);
}

canvas {
  display: block;
}

p {
  font-family: candara, verdana, geneva, arial, helvetica, san-serif;
  margin: 0px;

}

h5 {
  font-family: candara, verdana, geneva, arial, helvetica, san-serif;
  position: absolute;
  margin: 0px;
}

div {
  overflow: hidden;
  margin: 0px;

}

#about_content {
  z-index: 103;
  position: relative;
  max-width: 850px;
  /*850, 1024*/
  top: 100px;
  /*211px;*/
  margin: auto;
  padding-bottom: 50px;
  background-color: #151515;
}

#contact_content {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  top: 100px;
  /*211px;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 850px;
  /*850, 1024*/
  margin: auto;
  background-color: #151515;
  padding-bottom: 200px;

}

#content {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 938px;
  left: -12px;

  /*850, 1024*/
  top: 0px;
  /*211px;*/
  margin: auto;

  padding: 0px 0px 0px 0px;
  padding-bottom: 50px;
  /*background-color:#15F51533;*/
  /* background-color: #ffffff; */
  /*background: rgb(255, 252, 250);*/

  text-align: center;


}


#lissajous {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 800px;
  /*850, 1024*/
  top: 250px;
  /*211px;*/
  margin: auto;

  padding: 0px 0px 0px 0px;

  /*background-color:#15F51533;*/
}



#aboutTitle {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 750px;
  left: -0px;
  /*850, 1024*/
  top: 0px;
  /*200*/
  /*211px;*/
  height: 50px;
  margin: auto;

  padding: 0px 0px 0px 0px;

  font-size: 1.9em;
  font-family: 'Raleway Dots', cursive;
  color: rgba(0, 0, 0, 0.12);
  /* background-color:#15F51533; */
}

#bio {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 700px;
  /*850, 1024*/
  top: 120px;
  /*260*/
  /*211px;*/
  margin: auto;
  height: 600px;

  font-size: 1.20em;
  /* font-weight: 300; */
  padding: 0px 23px 0px 23px;
  line-height: 1.65em;
  font-family: 'OpenSans Regular', sans-serif;
  /* background-color:#15F51533; */
  margin-bottom: -75px;
  color: rgba(0, 0, 0, 0.75);
  ;
}

@media screen and (max-width: 1000px) {
  #bio {
    height: 600px;
  }
}

@media screen and (max-width: 500px) {
  #bio {
    height: 650px;
  }
}

@media screen and (max-width: 392px) {
  #bio {
    height: 750px;
  }
}




#bioTitle {
  /* font-family: 'Quicksand', sans-serif;
  font-size: 0.8em;
  font-weight: 700; */
  font-size: 1.9em;
  color: rgba(0, 0, 0, 0.15);

  font-family: 'Raleway Dots', cursive;
}

#hi-bold {
  font-family: 'OpenSans SemiBold', sans-serif;
  font-size: 1.20em;
  /* font-weight: 400; */
}

#bioP {
  font-family: 'OpenSans Regular', sans-serif;
  /* line-height: 1.55em; */

  /* font-weight: 400; */
  color: rgba(0, 0, 0, 0.75);

}

p#contactNew {
  top: 60px;
  font-weight: 400;
  padding: 0px 0px 0px 0px;
  margin-bottom: 0.25em;
  font-family: 'OpenSans SemiBold', sans-serif;
}

#quote {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  max-width: 700px;
  /*850, 1024*/
  top: 300px;
  /*211px;*/
  margin: auto;
  line-height: 30px;

  /* font-weight:300; */
  /* font-style: italic; */
  padding: 0px 23px 30px 23px;
  font-size: 0.8em;

  font-family: 'Quicksand', sans-serif;
  /*background-color:#15F51533;*/
}


#id_content {
  z-index: 103;
  position: relative;
  /*margin-top: 0px;*/
  /*margin-left: auto*/
  /*margin-right: auto;*/
  /*top: 100px; /*211px;*/
  /*left: 50%;*/
  /*margin-left: -430px; /*-512*/
  /*width: 860px; 850, 1024*/
  max-width: 850px;
  height: 900px;
  top: 100px;
  margin: auto;

  background-color: #151515;
}

#header {
  z-index: 123;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 210px;
  background-image:
    url('./assets/starBar.png');
  background-repeat: repeat-x;
  background-position: 0px 100px;

}

#deslink {

  color: #000000;
  text-decoration: underline;

}

#deslink:hover {

  color: #FF9900;
  text-decoration: underline;

}

a.blog:link {
  /* color:rgb(0, 234, 203); */
  color: rgb(150, 150, 150);
  text-decoration: underline;
}

a.blog:visited {
  color: rgb(150, 150, 150);
  text-decoration: underline;
}

a.blog:active {
  color: rgb(0, 238, 255);
  text-decoration: underline;
}

a.blog:hover {
  /* color:rgb(0, 238, 255); */
  text-decoration: underline;

  transition: 0.1s;

  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding-left: 0.25em;
  padding-right: 0.25em;
  padding-bottom: 0.2em;
  padding-top: 0.03em;

}

a.proj-link:link {
  color: #000000;
  text-decoration: none;
  /* font-weight:bolder */
  text-decoration: underline
}

a.proj-link:visited {
  color: #000000;
  text-decoration: none;
}

a.proj-link:active {
  color: rgb(0, 238, 255);
  text-decoration: underline;
}

a.proj-link:hover {
  /* color:rgb(0, 238, 255); */
  text-decoration: underline;

  transition: 0.1s;

  color: rgb(255, 255, 255);
  background-color: rgb(0, 0, 0);
  padding-left: 0.25em;
  padding-right: 0.25em;
  padding-bottom: 0.2em;
}


a.infoC:link {
  color: #88CCCC;
  text-decoration: none;
}

a.infoC:visited {
  color: #88CCCC;
  text-decoration: none;
}

a.infoC:active {
  color: #88CCCC;
  text-decoration: underline;
}

a.infoC:hover {
  color: #FFFFFF;
  text-decoration: underline;
}



#secLink {

  color: #666666;

}

div#cheader {
  z-index: 153;
  top: 0px;
  left: 50%;

  margin-left: -512px;
  /*-512*/

  width: 1024px;
  height: 65px;

  /* background: rgb(250, 252, 250); */


  /*background-image:*/
  /*url('./assets/consoleBar.png');*/
  /*background-position: 0px 0px;*/

}

div#filler

/*for background color matching*/
  {
  position: fixed;
  z-index: 120;
  top: 0px;
  left: 0px;

  width: 100%;
  height: 48px;


  /* background: rgb(255, 252, 250); */

  background-color: rgba(255, 255, 255, 0.8);
  /* opacity: 0.8; */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);

}

div#fillerTransparentWhite {
  position: fixed;
  z-index: 120;
  top: 0px;
  left: 0px;

  width: 100%;
  height: 48px;

  /* background: rgb(255, 252, 250);
  opacity: 1; */

  background-color: rgba(255, 255, 255, 0.8);
  /* opacity: 0.8; */
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);

}

div#portrait {
  margin-top: 85px;
  margin-left: 550px;
  background: url("../about/Xuan_portrait.jpg");
  width: 200px;
  height: 216px;
}


/*\*/
body>#header,
body>#cheader {
  position: fixed;
}

/* classes */
.desText {


  font-family: 'Raleway Regular', sans-serif;

  text-align: right;
  color: #000;
  /*FFFFFF*/
  font-size: 0.9em;
  line-height: 22pt;
  padding-bottom: 20px;
  font-weight: 500;

  /*max-width: 860px;*/
}

.desTextR {

  /* font-family: 'Open Sans', sans-serif; */

  font-family: 'Raleway Regular', sans-serif;

  text-align: right;
  color: #000;
  /*FFFFFF*/
  font-size: 0.9em;
  line-height: 22pt;
  padding-bottom: 20px;
  font-weight: 500;

  /*max-width: 860px;*/
}


.desText_about {

  font-family: 'Open Sans', sans-serif;

  position: relative;
  top: 55px;
  text-align: left;
  padding-right: 10px;
  left: 0px;
  color: #9F9F9F;
  /*C9C9C9 9F9F9F*/
  font-size: 0.70em;
  font-weight: normal;
  line-height: 20pt;
  max-width: 490px;
  /*612*/

}




@media screen and (max-width: 1000px) {
  .desText_about {
    left: 10px;
    padding-right: 20px;

  }

}

@media screen and (max-width: 550px) {

  img#contactImage {
    left: -10px;
  }

}

span.mailto {

  color: #FFFFFF;
  font-size: 1.0em;
}

.quoteSpacing {}

.quoteText {

  position: relative;
  top: 20px;

  color: #C9C9C9;
  font-size: 0.70em;
  line-height: 12pt;
  width: 720px;
  border-color: #452525;
  border-width: 1px;
  border-style: dotted;

  margin-top: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.quoteTextTitle {

  text-align: left;
  color: #FFFFFF;
  font-size: 0.75em;
  line-height: 12pt;
  width: 720px;
}

.desText_2 {

  text-align: left;
  color: #FFFFFF;
  font-size: 0.70em;
  line-height: 12pt;
  width: 860px;
}


span.titles {
  color: #FFFFFF;
  font-size: 15px;
}

span.subtitle {
  color: #9ffff9;
  font-size: 12px;
}

span.black {
  color: #000000;
}

span.here {
  /* color: #779999 */
  color: #aeaeae;

  /*669999*/
}

span.sean {
  font-size: 0.7em;
}

#bg_00 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 5px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #989898;
  /*border: 0px solid black;*/


  /* CSS3 standard */
  opacity: 0.78;

  /* for IE */
  /*  filter: alpha(opacity=78); */
}

#bg_01 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 12px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #383848;
  /*border: 0px solid black;*/

  /* for IE */
  /*  filter: alpha(opacity=68); */
  /* CSS3 standard */
  opacity: 0.68;
}

#bg_02 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 29px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #384848;
  /*border: 0px solid black;*/

  /* for IE */
  /*filter: alpha(opacity=48);*/
  /* CSS3 standard */
  opacity: 0.48;
}

#bg_03 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 56px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #284848;
  /*border: 0px solid black;*/

  /* for IE */
  /*filter: alpha(opacity=38);*/
  /* CSS3 standard */
  opacity: 0.38;
}

#bg_04 {
  position: fixed;
  z-index: 108;
  width: 100%;
  height: 113px;
  margin: 100px 0px;
  /*background-image:*/
  /*url('links/bar.jpg'); */
  /*background-repeat: repeat-x*/
  background-color: #284848;
  /*border: 0px solid black;*/

  /* for IE */
  /*filter: alpha(opacity=18);*/
  /* CSS3 standard */
  opacity: 0.18;
}

div#title {
  position: absolute;
  z-index: 103;
  top: 0px;
  left: 22px;
  width: 550px;
  height: 110px;

}

div#topLinks {
  position: absolute;
  z-index: 653;
  top: 0px;
  left: 710px;
  /*288, 268, 355*/
  overflow: visible;
  width: 500px;
  height: 48px;
}

div#main_header {
  /*projects*/

  position: absolute;

  z-index: 105;
  top: 35px;
  right: 5px;
  /*20*/
  max-width: 300px;
  height: 20px;

  /*overflow:visible;*/
  /*border-style:dotted;*/


}

div#main_content {
  position: relative;
  z-index: 105;
  top: 155px;
  /*right: 5px; 87px; 158px*/
  overflow: visible;
  background: rgb(255, 252, 250);

}

div#main_content_about {
  position: relative;
  z-index: 105;
  top: 50px;
  /*right: 5px; 87px; 158px*/
  overflow: visible;

}

div#main_quotes {
  position: absolute;
  z-index: 108;
  top: 115px;
  left: 50px;
  /*87px; 158px*/
  width: 745px;
  height: 600px;




  overflow: visible;
}

div#main_about {
  position: absolute;
  z-index: 105;
  top: 100px;
  /*115*/
  left: 5px;
  /*87px; 158px*/
  width: 600px;
  height: 200px;

  /*color:#FFFFFF;
  border-style:dotted;*/


  overflow: visible;
}


#contactImage {
  position: relative;
  z-index: 105;
  top: 100px;
  /*115*/
  left: 25px;
  max-width: 100%;
  color: #FFFFFF;
  overflow: visible;
  padding: 0px;

  border-style: dotted;
  border-color: white;
  border-width: 5px;
  border: none;
}


div#titleImage {
  position: absolute;
  z-index: 653;
  top: 0px;
  left: 33px;
  /*22, 88*/
  overflow: hidden;
  width: 400px;
  height: 54px;
  /* background-color: #284848; */

}

p#title {

  color: #151515;
  bottom: 20px;

  font-size: 1.5em;
  /*28, 33, 38*/

  line-height: 15pt;
  position: absolute;
  /* font-family: 'Qwitcher Grypen', cursive; */
  /* font-family: 'Nixie One', cursive; */
  /* font-weight:600; */
  font-family: 'Raleway SemiBold', sans-serif;
  /* font-family: 'Raleway Regular', sans-serif; */
  /* font-family: 'Russo One', sans-serif; */
}

p#heading {
  color: #FFFFFF;
  right: 0px;

  font-size: 0.8em;

  font-weight: normal;
  line-height: 15pt;


}

p#menu {
  color: #000;
  bottom: 9px;
  /*15 before animation */

  font-size: 0.9em;
  line-height: 15pt;
  position: absolute;
  /*  font-weight: 400;
*/
  font-family: 'Raleway Regular', sans-serif;


}

p#menu2 {

  color: #000;

  bottom: 9px;
  /*15 before animation */
  left: 103px;
  /*88px*/
  font-size: 0.9em;
  line-height: 15pt;
  position: absolute;
  font-weight: 400;

  font-family: 'Raleway Regular', sans-serif;


}

p#menu3 {
  /* Contact */
  color: #000;

  bottom: 9px;
  /*15 before animation */
  left: 208px;
  /*201*/
  font-size: 0.9em;
  line-height: 15pt;
  position: absolute;
  font-weight: 400;

  font-family: 'Raleway Regular', sans-serif;


}

p#menu4 {

  color: #999999;

  bottom: 15px;
  left: 118px;
  /*190*/
  font-size: 0.75em;
  line-height: 15pt;
  position: absolute;

}

p#menu5 {

  color: #999999;

  bottom: 15px;
  left: 190px;
  /*260*/
  font-size: 0.75em;
  line-height: 15pt;
  position: absolute;

}

p#menu6 {

  color: #999999;

  bottom: 15px;
  left: 330px;
  font-size: 0.75em;
  line-height: 15pt;
  position: absolute;

}

#copyright {

  max-width: 100%;
  left: 0px;
  text-align: center;

  /* font-family: candara, verdana, geneva, arial, helvetica, san-serif;
  position: relative;
  z-index: 500;
  text-align: left;
  top: 180px;
  left: 0px;
  color: #999999;
  font-size: 0.55em;
  line-height: 15pt; */

  font-family: 'Raleway', sans-serif;
  position: relative;
  z-index: 500;
  top: 450px;
  color: #252525;
  font-size: 0.75em;
}


#copyright_about {
  font-family: candara, verdana, geneva, arial, helvetica, san-serif;

  position: relative;
  z-index: 500;
  text-align: left;
  left: 0px;
  top: 50px;
  color: #999999;
  font-size: 0.55em;
  line-height: 15pt;
}

/* links  */
a:link {
  color: #000000;
  text-decoration: none;
}

a:visited {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #000000;
  text-decoration: none;
}


.link-wrapper {
  /* position: auto;
  display: block;
  padding: 0px 0px; */
}


.link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  padding: 5px 0;
  color: #000000;
}


.hover-5:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 3px;
  transform: scaleY(0);
  background-color: #000;
  transition: transform 0.1s;

}

.hover-5:hover:after {
  transform: scaleY(1);
}

.hover-6 {
  display: inline-block;
  position: relative;
  text-decoration: none;
  padding: 2px 10px 2px 10px;
  color: #000000;
  /* bottom: 0; */
  left: 0;
  right: 0;
  /* width: 100%; */
  /* height: 30px; */
  /* transform: scaleY(0); */

}

.hover-6:hover {
  /* transform: scaleY(1); */
  color: #FFFFFF;
  transition: 0.1s;
  padding: 2px 10px 2px 10px;

  background-color: #000;
  /* padding-left: 5px; */
}

img {
  border: none;

}

/* for name home link  */
a.rolloverN {
  display: block;
  width: 158px;
  height: 20px;
  position: relative;

  float: left;
  text-decoration: none;
  background: url("./assets/nameBlack.png");

}

a.rolloverN:hover {
  /*background-position: 158px 0px;*/
}

a.rolloverN:active {
  position: relative;
  top: 5px;
}

a.logoName {
  color: #000;
}

a.logoName:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  width: 100%;
  height: 2px;
  transform: scaleY(0);
  background-color: rgb(200, 200, 200);
  transition: transform 0.3s;

}

a.logoName:hover:after {
  transform: scaleY(1);

}


/* Desktop & Mobile Safari + Firefox */
@supports (-webkit-touch-callout: none) or (selector(:nth-child(1 of x))) or (-moz-appearance: none) {

  /* a.logoName {
    color: #000;
  } */


}

/* Chromium Only */
@supports (contain: paint) and (not (-moz-appearance: none)) {
  a.logoName {


    /* background: linear-gradient(170deg, var(--myColor1) 0%, var(--myColor2) 70%); */
    /* transition: --myColor1 5s, --myColor2 1s; */
    /* transition: --myColor1 0.01s, --myColor2 0.7s; */


    /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
  }

}


/* Chromium Only */
@supports (contain: paint) and (not (-moz-appearance: none)) {
  /* 
  @property --myColor1 {
    syntax: '<color>';
    initial-value: black;
    inherits: false;
  }

  @property --myColor2 {
    syntax: '<color>';
    initial-value: black;
    inherits: false;
  } */
}

/* Chromium Only */
@supports (contain: paint) and (not (-moz-appearance: none)) {

  a.logoName:hover {

    /* color: hsl(180, 66%, 60%);  */
    /* color: rgb(126, 204, 194); */
    /* transition: 0.3s; */

    /* color: hsl(159, 100%, 50%); */
    /* background: -webkit-radial-gradient( hsl(159, 100%, 50%), rgb(0, 234, 255), rgb(217, 255, 0)); 
  background: -webkit-linear-gradient(#3cc5d7, #47d794); */
    /* background: linear-gradient(170deg, rgba(0, 212, 255, 1) 0%, rgb(144, 238, 194) 70%); */

    /* --myColor1: rgba(0, 212, 255, 1);
    --myColor2: rgb(144, 238, 194); */
    /* transition: --myColor1 0.01s, --myColor2 0.7s; */
    /* transition: --myColor1 0.7s, --myColor2 0.01; */
    /* 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */



  }
}


/* Desktop & Mobile Safari + Firefox */
@supports (-webkit-touch-callout: none) or (selector(:nth-child(1 of x))) or (-moz-appearance: none) {
  a.logoName:hover {

    /* background: linear-gradient(170deg, rgba(0, 212, 255, 1) 0%, rgb(144, 238, 194) 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
  }

}

#bbImg {
  padding: 50px;
  background: url("./assets/bb.jpg");
  background-repeat: no-repeat;
  background-size: cover;

}

#bbImg:hover {
  background: url("./assets/bb.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#serenityImg {
  padding: 50px;
  background: url("./assets/serenity.png");
  background-repeat: no-repeat;

}

#serenityImg:hover {
  background: url("./assets/serenity.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#caddyImg {
  padding: 50px;
  background: url("./assets/caddy.png");
  background-repeat: no-repeat;

}

#caddyImg:hover {
  background: url("./assets/caddy.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#cognitiveImg {
  padding: 50px;
  background: url("./assets/cognitivegames.png");
  background-repeat: no-repeat;
}

#cognitiveImg:hover {
  background: url("./assets/cognitivegames.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

#moodmixImg {
  padding: 50px;
  background: url("./assets/moodmix.png");
  background-repeat: no-repeat;
}

#moodmixImg:hover {
  background: url("./assets/moodmix.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}



#terrainImg {
  padding: 50px;
  background: url("./assets/terrain.png");
  background-repeat: no-repeat;

}

#terrainImg:hover {
  background: url("./assets/terrain.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}


#oldwebImg {
  padding: 50px;
  background: url("./assets/oldweb.png");
  background-repeat: no-repeat;

}

#oldwebImg:hover {
  background: url("./assets/oldweb.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}


/* new image rollover for each project */
/* HertzianRide */
a.rollover0 {
  display: block;
  position: relative;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/hertzianRide.jpg");
}

a.rollover0:hover {
  background-position: 850px 0px;

}

#hrideImg {

  padding: 50px;
  background: url("./assets/hertzianRide.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#hrideImg:hover {
  background: url("./assets/hertzianRide.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Hertzian explorer */
a.rollover1 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/hexp.jpg");

}

a.rollover1:hover {
  background-position: 850px 0px;
}

#hexpImg {

  padding: 50px;
  background: url("./assets/hexp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#hexpImg:hover {
  background: url("./assets/hexp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/*Torrent Watch*/
a.rollover2 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/twatch.jpg");
}

a.rollover2:hover {
  background-position: 850px 0px;
}

#torrentImg {

  padding: 50px;
  background: url("./assets/twatch.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#torrentImg:hover {
  background: url("./assets/twatch.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/*ReVis*/
a.rollover3 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/revis.jpg");
}

a.rollover3:hover {
  background-position: 850px 0px;
}

#revisImg {

  padding: 50px;
  background: url("./assets/revis.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#revisImg:hover {
  background: url("./assets/revis.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/*Patriot Performer*/
a.rollover4 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/patriot.jpg");
}

a.rollover4:hover {
  background-position: 850px 0px;
}

#patImg {

  padding: 50px;
  background: url("./assets/patriot.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#patImg:hover {
  background: url("./assets/patriot.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Logo Painter */
a.rollover5 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/painter.jpg");
}

a.rollover5:hover {
  background-position: 850px 0px;
}

#logoImg {

  padding: 50px;
  background: url("./assets/painter.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#logoImg:hover {
  background: url("./assets/painter.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* SyneTyper */
a.rollover6 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/typer.jpg");
}

a.rollover6:hover {
  background-position: 850px 0px;
}

#synImg {

  padding: 50px;
  background: url("./assets/typer.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#synImg:hover {
  background: url("./assets/typer.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Solar Panel Plant */
a.rollover7 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/plant.jpg");
}

a.rollover7:hover {
  background-position: 850px 0px;
}

#solarImg {
  padding: 50px;
  background: url("./assets/plant.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#solarImg:hover {
  background: url("./assets/plant.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}


/* DragonFly */
a.rollover8 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/dragonfly.jpg");
}

a.rollover8:hover {
  background-position: 850px 0px;
}

#dragonImg {

  padding: 50px;
  background: url("./assets/dragonfly.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#dragonImg:hover {
  background: url("./assets/dragonfly.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Bubble Times */
a.rollover9 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/bubble.jpg");
}

a.rollover9:hover {
  background-position: 850px 0px;
}

#bubbleImg {

  padding: 50px;
  background: url("./assets/bubble.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#bubbleImg:hover {
  background: url("./assets/bubble.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}


/* Out of Control */
a.rollover10 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/control.jpg");
}

a.rollover10:hover {
  background-position: 850px 0px;
}

/* Softimage renders */
a.rollover11 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/renders.jpg");
}

a.rollover11:hover {
  background-position: 850px 0px;
}

#xsiImg {

  padding: 50px;
  background: url("./assets/renders.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#xsiImg:hover {
  background: url("./assets/renders.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Patent */
a.rollover12 {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/watch2.jpg");
}

a.rollover12:hover {
  background-position: 850px 0px;
}

#patent1Img {

  padding: 50px;
  background: url("./assets/watch2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#patent1Img:hover {

  background: url("./assets/watch2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;

}


/* JunctionPoint */
a.rolloverJP {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("/assets/jp.jpg");
}

a.rolloverJP:hover {
  background-position: 850px 0px;
}

#jpImg {

  padding: 50px;
  background: url("./assets/jp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#jpImg:hover {
  background: url("./assets/jp.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Quiver */
a.rolloverQuiver {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/quiver.jpg");
}

a.rolloverQuiver:hover {
  background-position: 850px 0px;
}

#quiverImg {

  padding: 50px;
  background: url("./assets/quiver.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#quiverImg:hover {
  background: url("./assets/quiver.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* Drugeye */
a.rolloverDrugeye {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/drugeye.jpg");
}

a.rolloverDrugeye:hover {
  background-position: 850px 0px;
}

#deImg {

  padding: 50px;
  background: url("./assets/drugeye.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* max-width: 850px;
    height: 100px;*/
}

#deImg:hover {
  background: url("./assets/drugeye.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
}

/* BlowingBlues */
a.rolloverBlowingBlues {
  position: relative;
  display: flex;
  /*display: block;*/
  max-width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/bb.jpg");
  background-size: auto;

}

a.rolloverBlowingBlues:hover {
  background-position: 850px 0px;
  background-size: auto;

}

/* Music for MS Surface */
a.rolloverMusic {
  display: block;
  width: 850px;
  height: 100px;
  text-decoration: none;
  background: url("./assets/music.jpg");
}

a.rolloverMusic:hover {
  background-position: 850px 0px;
}

a.dorkbot:link {

  color: #FFFFFF;
  text-decoration: underline;
}

a.dorkbot:visited {
  color: #FFFFFF;
  text-decoration: underline;
}

a.dorkbot:hover {
  color: #88CCCC;
  text-decoration: underline;
}

a.contact:link {
  font-size: 0.75em;
  color: #FFFFFF;
  text-decoration: none;
}

a.contact:visited {
  font-size: 0.75em;
  color: #FFFFFF;
  text-decoration: underline;
}

a.contact:hover {
  font-size: 0.75em;
  color: #FFFFFF;
  text-decoration: underline;
}



@media screen and (max-width: 960px) {

  div#titleImage {
    visibility: hidden;

  }

}

/* navigation bar */
@media screen and (max-width: 960px) {

  div#topLinks {
    position: initial;
    margin: auto;
    width: 100%;
    height: 100px;
    text-align: center;
    padding-top: 10px;

  }

  #aboutTitle {
    visibility: hidden;
  }


  div#filler {
    height: 130px
  }

  p#menu,
  p#menu2,
  p#menu3,
  p#menu4,
  p#menu5,
  p#menu6 {
    position: initial;
    line-height: 22pt;
  }

  div#cheader {
    height: 200px
  }

  div#content {
    top: 155px;
  }

  div#about_content {
    top: 155px;

  }

  div#id_content {
    top: 155px;
  }
}


div#lissajous {}