@font-face {
  font-family: 'Comic Relief';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/comicrelief/v2/BCauqZkHrvL55SZ8uaEhHMYGXxhgLAguK2Wk.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Comic Relief';
    align-items: center;
    
    height: 100vh;  
    
    position: relative;
    place-content: center;
    padding: 10px;
    gap: 21px;
    background: #A7C5DF;
}


.rainbow {
  background: linear-gradient(
    90deg,
    #ff004d,
    #ff7700,
    #ffd200,
    #00c800,
    #00a6ff,
    #7a5cff,
    #ff2dff,
    #ff004d
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: rainbow 6s linear infinite;
  display: inline-block;
}

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

.rainbow-hue {
  display:inline-block;
  color:#fff;
  animation: hue 5s linear infinite;
}
@keyframes hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

#silly-title {
    font-family: 'Comic Relief';
    /* border: 2.9px solid #000000; */
}

.wrapper {
  text-align: center;
}

#searchbar {
    box-sizing: border-box;
    font-family: 'Comic Relief';
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;

    width: 300px;
    height: 41px;
    position: relative;

    background: rgba(80, 80, 80, 0.58);
    border: 2.9px solid #000000;
    border-radius: 99999px;
}   

#searchbar::placeholder {
    color: #2F2F2F;
}

.about-me-box {
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.802);
    padding: 15px;
}

#button-green {
    font-family: 'Comic Relief';
    background: linear-gradient(180deg, #8CFF82 0%, #54994E 100%);;
    width: 50px;
    height: 50px;
    
    border-radius: 15%;
    border: 2.9px solid #000000;
}

#button-yellow {
    font-family: 'Comic Relief';
    background: linear-gradient(180deg, #FFC082 0%, #99734E 100%);;
    width: 50px;
    height: 50px;
    
    border-radius: 15%;
    border: 2.9px solid #000000;
}

#button-blue {
    font-family: 'Comic Relief';
    background: linear-gradient(180deg, #8a82ff 0%, #5e4e99 100%);;
    width: 50px;
    height: 50px;
    
    border-radius: 15%;
    border: 2.9px solid #000000;
}

#info1 {

    font-style: italic;
    height: 10px;
    color: #000000;
}