@charset "UTF-8";

section {
    margin-top: 50px;
}

.promotion{
    width: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

div.text {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    padding: 30px;
    background-color: black;
    color: ghostwhite;
    width: 60%;
    border-radius: 10px;
}
div.text1 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  padding: 10px;
  background-color: black;
  color: ghostwhite;
  width: 60%;
  border-radius: 10px;
}

div#text2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    padding: 30px;
    background-color: rgb(163, 28, 28);
    color: ghostwhite;
    width: 60%;
    border-radius: 10px;
}

/*content decoration*/
h1 {
    font-size: 50px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    text-align: center;
    text-shadow: 2px 2px 9px black;
}

p {
    font-weight: light;
    font-size: larger;
    padding: 20px;
    text-align: center;
    line-height: 2em;
}

#myBBtn {
  
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 1999;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: rgba(17, 138, 38, 0.932);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 25px;
  }
  
  #myBtn:hover {
    background-color: rgba(85, 85, 85, 0.603);
  }
  img {
    -webkit-filter: drop-shadow(5px 5px 5px rgb(54, 54, 54));
    filter: drop-shadow(0px 2px 2px rgba(49, 49, 49, 0.884));
  }
  
  body {
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  header {
      font-family:Arial, Helvetica, sans-serif;
      font-size: 99%;
  }

  div { animation-delay: 0s; 
    animation: fadeIn 3.5s; }
  
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  #rgbbaby {
    animation: Color 3s linear infinite;
    -webkit-animation: Color 2.5s ease-in-out infinite;
    text-shadow: 2px 4px 7px #000000;
  }
  
  @keyframes Color{
    0%{
      color:#ff0000;
    }
    
    10%{
      color:#ffae00;
    }
    
    20%{
      color:#fbff00;
    }
    
    30%{
      color:#3cff00;
    }
    
    40%{
      color:#00ff6a;
    }
    
    50%{
      color:#00f7ff;
    }
    
    60%{
      color:#0084ff;
    }
  
    70%{
      color:#6756ff;
    }
  
   880%{
      color:#9900ff;
    }
  
    90%{
      color:#f700ff;
    }
  
    100%{
      color:#ff0095;
    }
  }

  #heheboi {
    color: rgb(0, 0, 0);
    transition: 0.2s;
  }

  #heheboi:hover {
   color: white;
   transition: 0.2s;
  }