@font-face {
  font-family: "AbcFavorit-Med";
  src: url('https://www.julgross.com/fonts/ABCFavorit/ABCFavoritEdu-Medium.woff2');
}


html, body {
	height: auto;
  min-height: 100%;
  overflow-x: hidden;
	overflow-y: auto;
  font-family: "AbcFavorit-Med";
  color: #262626;
  background: #ebedeb; /* fallback/background color */
	 -webkit-overflow-scrolling: touch;
	
}

/* Container for the gradient layers */
.gradients {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
}

/* Common styles for each gradient layer */
.gradient {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.7;
}

/* Gradient layer 1 */
.gradient1 {
  background: radial-gradient(circle at center, #a4f263 40%, transparent 80%);
  width: 120vw;
  height: 120vh;
  top: -30%;
  right: -20%;
  animation: anim1 35s ease-in-out infinite;
}

/* Gradient layer 2 */
.gradient2 {
  background: radial-gradient(circle at center, #262626 20%, transparent 80%);
  width: 100vw;
  height: 100vh;
  opacity: .5;
  top: -60%;
  left: -40%;
  animation: anim2 60s linear infinite;
}

/* Gradient layer 3 */
.gradient3 {
  background: radial-gradient(circle at center, #ffffff 40%, transparent 80%);
  width: 200vw;
  height: 200vh;
  top: 70%;
  left: 20%;
  animation: anim3 20s linear infinite;
}

/* Keyframes for gradient1: moves and pulsates */
@keyframes anim1 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(33%, 25%) scale(1.3); }
  50%  { transform: translate(-10%, 40%) scale(1); }
  75%  { transform: translate(5%, -10%) scale(2); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Keyframes for gradient2: different random-ish movement and pulsation */
@keyframes anim2 {
  0%   { transform: translate(0, 0) scale(1); }
  20%  { transform: translate(55%, 10%) scale(1.3); }
  40%  { transform: translate(2%, -5%) scale(1); }
  60%  { transform: translate(-2%, 10%) scale(1.9); }
  80%  { transform: translate(20px, -20px) scale(1); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Keyframes for gradient3: different movement path */
@keyframes anim3 {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(5%, -30%) scale(1.4); }
  50%  { transform: translate(-50px, -30px) scale(0.3); }
  70%  { transform: translate(40px, 20px) scale(1.2); }
  100% { transform: translate(0, 0) scale(1); }
}



.body-wrapper {
  width: 500px;
  padding: 20px;
  position: absolute;
  bottom: 50px;
  left: 50px;
}

.title-wrapper { 
  overflow: hidden;
  margin-bottom: 18px;
  padding: 10px;
}

h1 { 
  font-size: 32px;
}

#h1-black {
  float: left;
  padding-right: 15px;
}

#h1-grey {
  float: left;
  letter-spacing: -3%;
  font-kerning: auto;
  opacity: 30%;
}

.main-text {
  font-size: 18px;
}


.contact-link {
  display: inline-block;
  padding: 7.5px 12.5px;
  margin: 10px 10px 0 0;
  width: 120px;
  text-align: center;
  color: #000;
  font-size: 16px;
  text-decoration: none;
  border: 2px solid rgba(0, 0, 0, 1.0);
  border-radius: 100px;
 
  transition: background-color 0.2s ease-in-out;

  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
}

.contact-link:hover {
  color: #fff;
  text-decoration: none;
  border-style: solid;
  background: rgba(50, 50, 50, 1.0);

}

@media only screen and (max-width: 900px) and (hover: none){
  .body-wrapper {
    width: 85%;
    padding: 20px;
    position: static; /* Remove absolute positioning */
    margin: 80px auto; /* Center horizontally and add vertical margin */
    box-sizing: border-box;
  }
	
@media only screen and (max-width: 600px) {
	
   .body-wrapper {
    width: auto;
    padding: 100px 15px 10px 15px;
    position: static; /* disables absolute */
    margin: 0 auto;
	 
  }
  
  .title-wrapper { 
    margin-bottom: 18px;
    padding: 5px;
  }
  
  h1 { 
    font-size: 30px;
  }
  
  #h1-black {
    float: none;
    padding-right: 15px;
  }
  
  #h1-grey {
    margin-top: -20px;
    font-size: 26px;
    letter-spacing: -3%;
    font-kerning: auto;
    opacity: 50%;
  }
  
  .main-text {
    font-size: 18px;
  }

  .contact-link {
  padding: 10px 20px;
  margin: 10px 10px 0 0;
  width: 90px;
  font-size: 14px;
  color: #fff;
  background: rgba(50, 50, 50, 1.0);
  border: 1.5px solid rgba(50, 50, 50, 1.0);
}

}