CSS uploaded by scrapbook.hackclub.com/customizer

style.css

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

:root {
  --background: linear-gradient(145deg, #198dd2, #1ea8f9);
}

#__next {
	background-color: #1c9de9;
  	font-family: 'Lato', sans-serif;
}

.header-link svg {
	fill: white;
}

.header-link  { 
    margin-right: 10px;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 50px;
    background: var(--background);
    animation: fadeDown 0.2s;
  	animation-fill-mode: forwards;
}

.header-link:hover { 
    animation: fadeIn 0.2s;
  	animation-fill-mode: forwards;
}

@media (max-width: 48em) {
    .header-chart  { 
        padding-top: 40px;
        border-radius: 50px;
        background: var(--background);
        box-shadow:  20px 20px 60px #1885c6, 
                     -20px -20px 60px #20b5ff;
        margin-bottom: 20px;

    }
}



.react-calendar-heatmap text {
    fill: white;
}

.nav-link, .header-title-name { 
    color: white;
    font-weight: 900;
}


      
@-webkit-keyframes fadeIn {
  from {
    box-shadow:  none;
  }
  to {
    box-shadow:  20px 20px 60px #1885c6, 
      			 -20px -20px 60px #20b5ff;
  }
}
        
@keyframes fadeIn {
  from {
    box-shadow:  none;
  }
  to {
    box-shadow:  20px 20px 60px #1885c6, 
      			 -20px -20px 60px #20b5ff;
  }
}

@-webkit-keyframes fadeDown {
  from {
    box-shadow:  20px 20px 60px #1885c6, 
      			 -20px -20px 60px #20b5ff;
  }
  to {
    box-shadow:  none;
  }
}
        
@keyframes fadeDown {
  from {
    box-shadow:  20px 20px 60px #1885c6, 
      			 -20px -20px 60px #20b5ff;
  }
  to {
    box-shadow:  none;
}
}

 
        
@keyframes fadeIn2 {
  from {
    box-shadow:  none;
    background: white;
    color: black;
  }
  to {
    box-shadow: 20px 20px 60px #1885c6, 
      			-20px -20px 60px #20b5ff ;
    background: var(--background);
    color: white;
  }
}
        
@keyframes fadeDown2 {
  from {
    box-shadow: 20px 20px 60px #1885c6, 
      			-20px -20px 60px #20b5ff;
    background: var(--background);
    color: white;
  }
  to {
    box-shadow:  none;
    background: white;
    color: black;
  }
 }
  
.post:hover {
  animation: fadeIn2 0.3s;
  animation-fill-mode: forwards;
}

.post {
  animation: fadeDown2 0.3s;
  animation-fill-mode: forwards;
 }