* {
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(#CEFFFF, #5DD5FF);
  background-color: #5DD5FF;
  background-attachment: fixed;
}

h1, h2, p, a {
  font-family: 'Source Sans Pro', sans-serif;
  text-align: center;
}

.lily-pic {
  text-align: center;
}

a.social_button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;

  text-align: center;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: initial;
}

.footer { 
  position: fixed;     
  text-align: left;    
  bottom: 3px;
  left: 3px; 
}

.centerFlex {
  display: flex;
  justify-content: center;
}

.button {
  background-color: #dadada;
  border: 1px solid #636363;
  border-radius: 3px;
  color: black;
  padding: 10px 15px;
  margin: 4px;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  font-family: 'Source Sans Pro', sans-serif;
  transition-duration: 0.3s;
  cursor: pointer;
}

.button:hover {
  background-color: #bdbdbd;
  border: 1px solid #2e2e2e;
  color: black;
}

.instaButton {
  background-image: linear-gradient(#405ce6, #833AB4, #C13584, #FD1D1D, #F77737, #FCAF45, #FFDC80);
  color: white;
}

.instaButton:hover {
  background-image: linear-gradient(#405ce6, #833AB4, #C13584, #FD1D1D, #F77737, #FCAF45, #FFDC80);
}

.linkedinButton {
  background-color: white;
  border: 1px solid #0A66C2;
  color: #0A66C2;
}

.linkedinButton:hover {
  background-color: #b6daff;
  border: 1px solid #0A66C2;
  color: #0A66C2;
}

.githubButton {
  background-color: #171515;
  border: 1px solid #e8eaea;
  color: #e8eaea;
}

.githubButton:hover {
  background-color: #171515;
  border: 1px solid #8d9191;
  color: #8d9191;
}

/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
  background: #f1f1f1; 
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 10px; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius: 10px;
  width: 4px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* Default (Mobile) ViewPort */
[class*="col-"] {
  float: left;
  padding: 15px;
  width: 95%;
}

/* Desktop ViewPort */
@media only screen and (min-width: 800px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

.glass {
  
  background: white;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0.4)
  );
  backdrop-filter: blur(2rem);

  padding: 15px;
  text-align: center;
  margin: auto;
  border-radius: 5px;

  position: absolute;
  left: 50%;
  transform: translate(-50%);
}