/*
Theme Name: HereWeiGo B4
Theme URI: http://www.hereweigo.com
Author: Wei Guan
Author URI: http://www.hereweigo.com
Description: A theme without any extra code, pure bootstrap 4.
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: HereWeiGo-B4

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
/*@import url('https://fonts.googleapis.com/css?family=Courgette');
@import url('https://fonts.googleapis.com/css?family=:400,400i,800,800i&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,wght@0,100;0,800;1,100;1,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,700;1,300;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@1,900&display=swap');
/*{background: #000!important;
color:#0f0!;
outline: solid #f00 1px !important;}*/
html, body {scroll-behavior: smooth;font-family: 'Roboto Mono', monospace;  background: #f4d6cc; margin: 0px!important; padding: 0px!important;}
footer {margin: 0px;padding: 0px;}
h1.footerlogo {
  text-align: center;
  position: relative;
  font-family: 'Alegreya', serif;
  font-weight: 900;
  font-style: italic;
  font-size:14vw;
  margin-top: -10%;
  bottom:-80px;
  padding: 0px;
  display: block;

}
.navbar a{color: #000;}
.social_footer {
  position: relative;
  background-color: #F8EDEB;
  bottom:-70%;
  left:35%;
  z-index:100;
  text-align: center;
  width:30%;
  font-size: 0.8em;
  border:2px solid #f4d6cc;
  -webkit-box-shadow: 10px 10px 0px 0px #f4d6cc;
  box-shadow: 10px 10px 0px 0px #f4d6cc;
}


.wei {
  color: #c83e4d;
  animation: changecolor 3s infinite;
}
.typing-message {
  width: 72ch;
  animation: typing 8s steps(71), blink 0.5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  font-family: monospace;
  font-size: 1em;
}

.col-border {
  border:2px solid #000;
  margin-top: 1%;
  -webkit-box-shadow: 10px 10px 0px 0px #000000;
  box-shadow: 10px 10px 0px 0px #000000;
  /*padding: 20px;*/
  height:100%;
  margin-bottom: 20px;
  background: #F8EDEB;
}
.actionCardContent {padding: 20px;}
.appsContainer {
  text-align: center;

}
.appsContainer img{
  height:80px;
  padding: 20px;

}
.container {
  font-family: 'Roboto Mono', monospace;}
.parentContainer{
  padding-top: 100px;padding-bottom: 100px;
}
.parentContainer:nth-child(even){
 background: #F8EDEB;
}
.whiteContainer {
  background: #F8EDEB;
}
.postContainer {
  padding-top: 60px;padding-bottom: 60px;
}
.postContainer:nth-child(even){
 background: #F8EDEB;
}
.featuredImage { width:30%; border: 2px solid #000;   -webkit-box-shadow: 10px 10px 0px 0px #000000;
  box-shadow: 10px 10px 0px 0px #000000; margin-bottom:40px; margin-left: 40px;}
.postContainer h1, h1.entry-title {
    text-align: center;
    position: relative;
    font-family: 'Roboto Mono', monospace;
    font-weight: 900;
    /*ont-style: italic;*/
    font-size:2vw;
    padding: 20px;
    /*text-shadow: 5px 5px #f4d6cc;*/
    text-decoration: none!important;
    font-style: none!important;
    color: #444;
}
.postRow h2, .postRow h2 a{
  text-decoration: none!important;
  font-style: none!important;
  color: #444;
}
.archRow {}
  hr {border: 0px solid #000; border-top-width: 1px;}
  .postRow hr:last-child  {display: none; visibility: hidden;}
.brandContainer {padding-top: 0px;padding-bottom: 240px;background-color: #f4d6cc; padding-left: 0px; padding-right: 0px;}
.thisisanima {animation: animeBG 5s infinite linear;}
.slogan {text-align:right; font-size: 1.8em;}
.sloganRowContainer {padding: 0px!important; overflow: hidden;}
.sloganRow {
  background: url('/wp-content/uploads/2022/05/leaf.png') #F8EDEB repeat;
  padding-top: 100px;
  padding-bottom: 100px;
  margin: 0px!important;
}
.slideBG {
  animation: slideY 10s infinite linear;
        }


.slideUp {
  animation: slide-up 0.5s forwards linear;
}
.motionUpCard {opacity: 0;}
@keyframes slide-up {
  0%{ transform: translateY(100px); opacity: 0;}
  100%{ transform: translateY(0); opacity: 1;}
}
@keyframes slideY {
  0% {
    background-position: 0 0 ;
  }
  50% {
    background-position: 0 50%;
  }
  100% {
    background-position: 0 0;
  }
}

@-webkit-keyframes slideY {
  0% {
    background-position: 0 0 ;
  }
  50% {
    background-position: 0 50%;
  }
  100% {
    background-position: 0 0;
  }
}

.sloganRow h2 { background: #fff;   border:2px solid #000; padding: 40px; width:60%; margin: auto;;
  -webkit-box-shadow: 10px 10px 0px 0px #000000;
  box-shadow: 10px 10px 0px 0px #000000;}
@keyframes animeBG {
  0%   { background: #33CCCC; }
   20%  { background: #33CC36; }
   40%  { background: #B8CC33; }
   60%  { background: #FCCA00; }
   80%  { background: #33CC36; }
   100% { background: #33CCCC; }
}
/*.blogCoverText {animation: fontColor 5s infinite linear;}*/
.blogCoverText {
    background: linear-gradient(to right, #6666ff, #0099ff , #00ff00, #ff3399, #6666ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 3s ease-in-out infinite;
    background-size: 400% 100%;
    font-weight: bold;
}

@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
  }
.blogCoverText {}
.brandTitleContainer{ text-align: center; padding: 20px 0;position: relative; bottom:0px; position: relative; }
.titleRow { position: absolute; bottom:-240px; background-color: rgb(0, 0, 0, 0.8); color:#f4d6cc; padding: 20px;}
.titleRow a {text-decoration: none; color:#f4d6cc; font-size: 1.2em;}
.brandRow {
  background-color: #f4d6cc; width:50%; padding: 2%; background-color: #F8EDEB;
  -webkit-box-shadow: 10px 10px 0px 0px #000;
  box-shadow: 10px 10px 0px 0px #000;}
.mailRow {background: url('/wp-content/uploads/2022/05/paperairplane.png') no-repeat right bottom; margin-bottom: 20px;}
.square-container{padding: 20px;}


.square:before{
    content: "";
    display: block;
    padding-top: 100%;  /* initial ratio of 1:1*/
}
.square {
  filter: grayscale(100%); transition:1s;
  border:2px solid #000;
  -webkit-box-shadow: 10px 10px 0px 0px #000000;
  box-shadow: 10px 10px 0px 0px #000000;
  opacity: 0;
    }

.square:hover {filter: grayscale(0%);}
.navCol {margin-top: -100px; }

.formRow {}
.projectRow {}
.navBarRow a{
  color: #F8EDEB!important;
  font-size: 3vh;
  text-transform: uppercase;
}

.navBarRow {
  /*border:2px solid #000;
  -webkit-box-shadow: 10px 10px 0px 0px #F8EDEB;
  box-shadow: 10px 10px 0px 0px #F8EDEB;*/


}
.zindexTOP {z-index: 999!important; position: relative;}
.navBar {margin-bottom: 200px;
}
.contactformRow { text-align: left;}
.navbar-nav {margin: auto!important;}
ul.navbar-nav li {padding-right: 2em; }
.wpcf7 { margin: auto; text-align: center; border:2px solid #000;   -webkit-box-shadow: 10px 10px 0px 0px #000000;
  box-shadow: 10px 10px 0px 0px #000000; background: #F8EDEB; padding: 20px; width:60%;}
.wpcf7 input, .wpcf7 textarea{border-radius: 2px; border:1px solid #444; padding: 10px!important; width: 100%;}

.wpcf7-submit {color: #f4d6cc;
  background: #000;
  }
  .wpcf7-submit:hover {animation: buttonHover 1s linear forwards;}

  @keyframes buttonHover {
    from { background: #000; color: #f4d6cc}
     to  { background: #f4d6cc; color: #000;}
}
  }
.skillRow {background:#F8EDEB no-repeat !important; background-size: 100% 283px; background-position: 10px 0px!important; }
.grecaptcha-badge { opacity:0;}
.bulb {
  background: url("/wp-content/uploads/2022/05/bulbup.png") no-repeat center -80px ;
  width: 150px;
  height: 203px;
  position:absolute; top:0px; left:10px;
}
.bulblight {
  width: 150px;
  height: 203px;
  position:absolute; top:0px; left:10px;
  background: url("/wp-content/uploads/2022/05/bulbup.png") no-repeat center bottom;
  opacity: 0;
  transition: opacity 3s;
}

.ufo {width:153px;
  height:156px;
  background: url('/wp-content/uploads/2022/05/ufoimage.png') no-repeat top center; position:absolute;
  right:10px;
  top: 10px;
  opacity: 0;
  transition: opacity 3s; }

.Fadein {  opacity: 1;}


ul.categoryCol li {list-style: none; list-style-position: inside;}
.categoriesDiv{
  border:2px solid #000; -webkit-box-shadow: 10px 10px 0px 0px #000000;
    box-shadow: 10px 10px 0px 0px #000000; padding: 20px; background: #666; color: #F8EDEB;
    position: -webkit-sticky;
    position: sticky;
    top:60px;
}
.cateHeader {
  border:2px solid #000;
  -webkit-box-shadow: 10px 10px 0px 0px #000000;
  box-shadow: 10px 10px 0px 0px #000000;
  padding: 20px; background: #666;
  color: #F8EDEB!important;
  text-decoration: none;
  font-style: none!important;
  margin-bottom: 40px;}
li.categories ul li {list-style-type: square;}
li.categories a {
  text-decoration: none; color: #F8EDEB;

}
.postRow{border:2px solid #000; -webkit-box-shadow: 10px 10px 0px 0px #000000;
  box-shadow: 10px 10px 0px 0px #000000; background: #F8EDEB;}


.postLogoRow { text-align: center;padding: 20px;}


.cardWhiteOnPurple{color: white; background-color: #b751d4;/*#853c9a darker*/}

.cardWhiteOnPink{color:white; background-color: #ee4266;/*#a82e48 darker*/}

.cardWhiteOnNavy{color: white; background-color: #33658a;/*#284f6b darker*/}

.cardWhiteOnOrange{color: white; background-color: #0A9396;/*#853c9a darker*/}

.cardWhiteOnPurple h3,.cardWhiteOnPink h3,.cardWhiteOnNavy h3,.cardWhiteOnOrange h3 { background: rgba(0, 0, 0, 0.5); padding: 20px; }

/* For extremely small screen devices (595px and below) */
@media only screen and (max-width: 480px){
  .brandContainer {text-align: center;}
  .brandRow {background-color: #f4d6cc; width:80%;}
  .slogan {text-align:center; }
  .wpcf7{width:90%;}
  h1.footerlogo {
    bottom:-5%;
  }
  .social_footer {
    left:0%;

    text-align: center;
    width:100%;
  }
  .postRow{ width:80%; margin: auto;}
}