/* stealing gradient background from gtools*/
/*.gradient-background {
  background: linear-gradient(232deg,#F5A9B8,rgb(255,163,163),rgb(232,123,255));
  background-size: 180% 180%;
  animation: gradient-animation 18s ease infinite;
} */

/* From Uiverse.io by terenceodonoghue */ 
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  height: 96px;
  width: 96px;
  animation: rotate_3922 1.2s linear infinite;
  background-color: #9b59b6;
  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.container span {
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  background-color: #9b59b6;
  background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.container span:nth-of-type(1) {
  filter: blur(5px);
}

.container span:nth-of-type(2) {
  filter: blur(10px);
}

.container span:nth-of-type(3) {
  filter: blur(25px);
}

.container span:nth-of-type(4) {
  filter: blur(50px);
}

.container::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background-color: #fff;
  border: solid 5px #ffffff;
  border-radius: 50%;
}

@keyframes rotate_3922 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


/* Loader (Attributed to terenceodonoghue on UIVerse.io) */
#loader-wrapper {
    background-color: #212121;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center; }

.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    height: 96px;
    width: 96px;
    animation: rotate_3922 1.2s linear infinite;
    background-color: #9b59b6;
    background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.loader span {
    position: absolute;
    border-radius: 50%;
    height: 100%;
    width: 100%;
    background-color: #9b59b6;
    background-image: linear-gradient(#9b59b6, #84cdfa, #5ad1cd);
}

.container span:nth-of-type(1) {
    filter: blur(5px);
}

.loader span:nth-of-type(2) {
    filter: blur(10px);
}

.loader span:nth-of-type(3) {
    filter: blur(25px);
}

.loader span:nth-of-type(4) {
    filter: blur(50px);
}

.loader::after {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: #fff;
    border: solid 5px #ffffff;
    border-radius: 50%;
}

@keyframes rotate_3922 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


@keyframes rotation {
    0% {
        transform: rotate(0deg); }
    100% {
        transform: rotate(360deg); } }



/* Advanced Skiddery. https://codepen.io/kannankumar/pen/qNJaQO */
.fancy_div {
        height: 2px;
        background-color: #E6E6E6;
        width: 98.0em;
        margin: 0 auto;
   }

  

.gradient-background {
  background: linear-gradient(232deg,#5bcefa,#F5A9B8);
  background-size: 900% 900%;
  animation: gradient-animation 16s ease infinite;
}


/* stole a friend's code, credits to maroni.dev */
.section1 {
  height: 100%;
width: 100%;
display: flexbox;
overflow:hidden;
}
.sectionh1text1 {
  font-size: 5rem;
 padding-top: -5rem;
 padding-left: 5rem;
 
 display: inline-block;
}
.sectionhttptextp {
font-size: 2rem;
 padding-left: 50pt;
 display: block;
 padding-top: -500px;
margin: -20px 0 20px 20px; 
} 
.gay-image{

 float: left;
 margin-right: 10pt; /* Adds some space between the image and the text */
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  } 100% {
    background-position: 0% 50%;
  }
}



h1,h2,h3,h4,h5,h6{ /* for all titles */
    font-family: "Plus Jakarta Sans", "Figtree","Montserrat", Verdana, Geneva, Tahoma, sans-serif;
    line-height: 110%;
    color: #f4f4f4;
}

body {
/* background-color:#24292e; */
  font-family: "Plus Jakarta Sans", "Figtree", "Montserrat", Verdana, Geneva, Tahoma, sans-serif;

}

p {
color: #f2f2f2;

}

/* adding scroll?*/
html{

overflow-y: scroll;

}

.intro-fade-in { 

animation: fadeIn 3s; 

 animation-fill-mode: forwards;

}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

    .navbar {
     /*  background-color: #2d3339; */
      overflow: hidden;
    }
    
    .navbar a {
      float: left;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .social-icons {
      float: right;
    }
    

    .social-icons img {
      width: 20px;
      margin-left: 5px;
    }

 /* #rick{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 350;
}

#rick-text {
font-size: 1.5vw;
text-align: center;

} */

#title {
 opacity: 0;
font-size:5vw;
text-align:center;

}

.show-text {
  opacity: 1 !important;
}



/*thank you w3schools :D
 
 https://www.w3schools.com/css/tryit.asp?filename=trycss3_transition_transform
 */ 
#icon {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

#icon:hover {
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}