/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

a:link {
  color: #FF0000;
  background-color: transparent;
  text-decoration: underline;
}

a:visited {
  color: #FFFF00;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #00FFE6;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

@font-face {
  font-family: h1Font;
  src: url("/fonts/sketch.ttf");
}

@font-face {
  font-family: h2Font;
  src: url("/fonts/ank.ttf");
}

h1{
    font-family: h1Font;
    font-size: 10vw;
    }

h2{
    font-family: h2Font;
    font-size: 25px;
    }

body {
  background: url("/images/urbex.jpg") no-repeat center center fixed;
  -moz-background-size: cover;
  background-size: cover;
  color: lime;
  font-family: Verdana;
}

#title {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  border-width: 5px;
  border-color: red;
  border-style: groove;
  background-color: lime;
  color: black;
}

#bio {
  padding: 5px;
  text-align: left;
  border-radius: 20px;
  background: 
    linear-gradient(#73538C, #23EDF7) border-box;
  margin-left:10%;
  margin-right: 30%;
  margin-top:30px;
  }

#andy {
  padding: 5px;
  color: red;
  text-align: left;
  border-radius: 10px;
  background: 
    linear-gradient(#8AC6FF, pink, #CD64F7) border-box;
  margin-left:10%;
  margin-right: 40%;
  margin-top:30px;
  }

#snake {
  padding: 5px;
  text-align: right;
  border-radius: 10px;
  background: 
    linear-gradient(#4A2727, #0C916F, red, purple) border-box;
  margin-left:50%;
  margin-right: 5%;
  margin-top:-10px;
  color: #96C995;
  }
  
#seb {
  padding: 5px;
  text-align: right;
  border-radius: 5px;
  background: 
    linear-gradient(#F5EE31, #EDC26F, #6FEDD0) border-box;
  margin-right: 70%;
  margin-top:-14px;
  color: #3D1F42;
  }
  
  #kin {
  padding: 5px;
  text-align: right;
  border-radius: 10px;
  background: 
    linear-gradient(#FF00DE, #CC8D04, #EB561C, #FF00DE) border-box;
  margin-left:20%;
  margin-right: 40%;
  margin-top:-18px;
  color: #00F7FF;
  }


#sideProj {
  border: 5px solid #0000;
  text-align: center;
  border-width: 5px;
  border-color: pink;
  border-radius: 25px;
  background: 
    linear-gradient(blue, grey, blue) border-box;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 30px;
}

#gradient-border {
  border: 5px solid #0000;
  text-align: center;
  border-radius: 25px;
  background: 
    linear-gradient(red, grey, red) border-box;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 30px;
  }
    
.imgFit {
  max-width: 60%;
  max-height: 60%;
}