/* - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - */
/*
███████  ██████  ███    ██
██      ██    ██ ████   ██
█████   ██    ██ ██ ██  ██
██      ██    ██ ██  ██ ██
██       ██████  ██   ████
*/
/* - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - */




@font-face {
  font-family: "borel";
  src: url("fon/Borel.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "brit";
  src: url("fon/Brittany.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "mont";
  src: url("fon/Montserrat.ttf");
  font-weight: normal;
}

/* - - - - - - - - - - - - - - - - - - - - - - - */

body {
  font-family: 'borel';
}

#menu a {
  font-family: 'borel';
  font-size:1.2em;
}

h1,h5 {
  font-family: 'brit';
}

h2,h3,h4 {
  font-family: "mont";
}





/* - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - */
/*
████████  █████   ██████  ███████
   ██    ██   ██ ██       ██
   ██    ███████ ██   ███ ███████
   ██    ██   ██ ██    ██      ██
   ██    ██   ██  ██████  ███████
*/
/* - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-size:120%;
  background-color: #333;
  background-size: 10px;
  background-repeat: repeat;
  text-align: center;
  background-color:#FFFBF0;
}

/* - - - - - - - - - - - - - - - - - - - - - - - */

p {
  text-align: justify;
  padding: 15px;
  margin: 0;
}

b {
  font-weight:900;
  color:#444;
}

a {
  text-decoration: none;
  position: relative;
}

i {
  /* font-family: 'athiti'; */
  font-style: normal;
  color:#333;
}

h3 {
  font-size:2.3em;
}

h5 {
  font-size:2.3em;
  margin:0;
}



/*
 ██████  ██████  ██       ██████  ██████  ███████
██      ██    ██ ██      ██    ██ ██   ██ ██
██      ██    ██ ██      ██    ██ ██████  ███████
██      ██    ██ ██      ██    ██ ██   ██      ██
 ██████  ██████  ███████  ██████  ██   ██ ███████
*/



.tx_W { color:#fff }
.tx_Y,.hv_Y:hover p { color:hsl(46,99%,44%); }
.tx_C,.hv_C:hover p { color:hsl(166,99%,44%); }
.tx_M,.hv_M:hover p { color:hsl(286,99%,44%); }

.bg_Y { background-color:hsl(46,66%,66%); }
.bg_C { background-color:hsl(166,66%,66%); }
.bg_M { background-color:hsl(286,66%,66%); }

.bg_Y,
.bg_C,
.bg_M { background-image: url(px/canson_22_dark.png); }

.bgg_Y { background-color:#FFC400aa; }
.bgg_C { background-color:#00FFC4aa; }
.bgg_M { background-color:#C400FFaa; }




/* - - - - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - - - - */




#root {
  display: inline-block;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width:1000px;
}

#top {
  background-image: url(px/canson_22_dark.png);
  width:100%;
  min-height: 400px;
  position:relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 0px 3px rgba(0,0,0,.3);
  border-radius:8px;
}

#tip{
  display: block;
  position: relative;
}

#tip > h1 {
  font-size:5em;
  margin:20px 0 0;
}
#tip > h2 {
  font-size:1.3em;
  margin:-10px 0 10px;
}
#tip > img {
  width:300px;
  height:auto;
  margin:20px;
}

#mid {
  /* min-height: 800px; */
  position:relative;
  margin:0 4em;
}

#proj {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .7);
  text-align:left;
  position: relative;
  border-radius:44px;
  display:inline-block;
  width:800px;
  margin-bottom:55px;
}

#proj h3 {
  font-size:1.4em;
  margin:1em;
}
#proj h4 {
  margin:1em;
  text-align:center;
  font-size:1.1em;
}
#proj h6 {
  position: absolute;
  top:-1em;
  right:1.5em;
  text-align:center;
  /* color:#fff; */
  text-shadow: 1px 1px 1px #000;
  font-size:1.5em;
}

#proj p {
  line-height: .5;
  margin: 0 2em;
  font-size:1.2em;
  font-weight:600;
}

#bot {
  width:100%;
  min-height: 37em;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .7);
  position:relative;
  border-radius:8px;
  background-image: url(px/canson_22_dark.png);
  text-align:center;
  margin-top:55px;
}

#bot h1 {
  font-size:4em;
}
#bot p {
  font-size:1.5em;
  text-align:center;
}
#bot a {
color:#000;
font-size:1.7em;
}
#bot a:hover {
color:#fff;
text-shadow: 1px 1px 1px #000;
}


#px_lamp {
  position: absolute;
  right:-5em;
  bottom:-5em;
}
#px_lamp img {
  width:288px;
  height:auto;
}



/*
███    ███ ███████ ███    ██ ██    ██
████  ████ ██      ████   ██ ██    ██
██ ████ ██ █████   ██ ██  ██ ██    ██
██  ██  ██ ██      ██  ██ ██ ██    ██
██      ██ ███████ ██   ████  ██████
*/




#menu {
  display:flex;
  justify-content:center;
  padding: 15px;
  margin: 2em 2em 0;
  font-weight: 900;
  color: #222;
  font-size: 1.3em;
}

#menu a {
  color: #333;
}

#menu a:hover {
  color:#fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
}

.wide {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:55px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, .7);
  border-radius:8px;
  margin:55px 0;
}
.wide p {
  font-size:55px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .6);
}
.main h1 {
  margin:0 55px;
  font-size:77px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, .6);
}
.main p {
  margin:0 55px;
  font-size:22px;
}


.submenu {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.submenu a {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.submenu a:hover p {
text-shadow: 3px 3px 2px rgba(0,0,0,.7);
}
.submenu a:hover .bulb {
box-shadow: 3px 3px 2px rgba(0,0,0,.7);
}

.bulb {
  height:100px;
  width:100px;
  border-radius:50px;
  border:3px solid #000;
  margin-bottom:0;
  background-image: url(px/canson_22_dark.png);
}

.bulb img {
  width:77px;
  height:auto;
  margin-top:12px;
}

.buulb {
  height:150px;
  width:150px;
  border-radius:75px;
  border:3px solid #000;
  margin-bottom:0;
  background-image: url(px/canson_22_dark.png);
  box-shadow: 3px 3px 6px rgba(0,0,0,.7);
}

.buulb img {
  width:122px;
  height:auto;
  margin-top:12px;
}






/*
██████  ███████  ██████  ██████
██   ██ ██      ██      ██    ██
██   ██ █████   ██      ██    ██
██   ██ ██      ██      ██    ██
██████  ███████  ██████  ██████
*/


/* #hand_rig, */
#leaf_rig,
/* #grin_lef, */
#leaf_lef {
  display:none;
}


#hand_rig {
  position:fixed;
  bottom:22px;
  right:0;
}
#hand_rig img {
  width:277px;
  height:auto;
}



#leaf_rig{
  position:fixed;
  bottom:333px;
  right:0;
}
#leaf_rig img {
  width:144px;
  height:auto;
}



#grin_lef {
  position:fixed;
  bottom:0px;
  left:0;
}
#grin_lef img {
  width:311px;
  height:auto;
}



#leaf_lef {
  position:fixed;
  bottom:222px;
  left:0;
}
#leaf_lef img {
  width:144px;
  height:auto;
}










/*
 ██  ██ ██   ██ ██   ██
███ ███ ██   ██ ██   ██
 ██  ██ ███████ ███████
 ██  ██      ██      ██
 ██  ██      ██      ██
*/









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

#root,
#tip,
#proj,
#bot{
  width:100%;
  border-radius:0;
}

#mid {
  margin:0;
}

#px_lamp {
  bottom:-66px;
  right:44px;
  transform: scale(.8);
  transform-origin: right bottom;
}


#hand_rig img,
#leaf_rig img {
transform: scale(.7);
transform-origin: right bottom;
}

#leaf_lef img,
#grin_lef img {
transform: scale(.7);
transform-origin: left bottom;
}


}




/*
 █████   ██████   ██████
██   ██ ██  ████ ██  ████
 █████  ██ ██ ██ ██ ██ ██
██   ██ ████  ██ ████  ██
 █████   ██████   ██████
*/






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

#tip > h1 {
  font-size: 3em;

}
#tip > h2 {
  font-size: 1.2em;
  margin:20px 0 20px;
}

#menu {
  padding:0;
  margin:0 0 20px 0;
}

.submenu {
  transform: scale(.7);
  transform-origin: center bottom;
  margin:0 -30px;
}

#proj h3 {
  font-size:1.2em;
  margin-top:7em;
}
#proj h4 {
  font-size:1em;
  text-align:left;
}
#proj h6 {
  font-size:1.3em;
  text-align:right;
}

#proj p {
  font-size:1em;
  margin:0;
  line-height:1.5;
  text-align:left;
}

.main p {
  font-size:16px;
}

#bot h1 {
  font-size:3em;
}

#bot a {
  font-size:22px;
}
#bot p {
  font-size:22px;
}

#px_lamp {
  top:12px;
  left:4px;
  transform: scale(.4);
  transform-origin: left top;
}



#leaf_rig{
  bottom:177px;
}
#leaf_lef {
  bottom:111px;
}



#hand_rig img,
#leaf_rig img {
transform: scale(.4);
transform-origin: right bottom;
}

#leaf_lef img,
#grin_lef img {
transform: scale(.4);
transform-origin: left bottom;
}


}