:root {
  --gunmetal: #222929ff;
  --gunmetal-2: #252d2dff;
  --gunmetal-3: #293132ff;
  --onyx: #38393bff;
  --jet: #474044ff;
  --davys-gray: #4f5165ff;
  --glaucous: #547aa5ff;
  --robin-egg-blue: #50d8d7ff;
  --tiffany-blue: #60dcdbff;
  --tiffany-blue-2: #6edfdeff;
}

 body {
  background-color: var(--gunmetal);
 }
  
  h1 {
    color:  var(--robin-egg-blue);;
   text-align:center;
   font-family: Conduit_Bold;
  }
  
  h2 {
  color: var(--glaucous);
  text-align:center;
  font-family: Conduit_Bold;
  }
  
  h3 {
  color: var(--davys-gray);
  text-align:center;
  font-family: Conduit_Bold;
  }
  
div.Showcase {
    border-width: 10px;
    border-style:solid;
    margin:auto;
    margin-bottom: 10px;
    margin-left: 10px;
    float:left;
    border-color:var(--jet);
    height: 390px;
    width: 205px;
}

div.Social {
  border-width: 10px;
  border-style:solid;
  margin:auto;
  position: relative;
  float:left;
  border-color: var(--jet);
  height: 220px;
  width: 225px;
  top: 50px; 
  left: 375px;
}

a.Email {
  font-family: Conduit_Bold;
  position: relative;
  text-align: center;
  font-size: larger;
}

p.github {
  background-color: var(--gunmetal-2);
  text-align: center;
  height:30px;
 width: 205px;;
}

p.GGJ {
  background-color:var(--gunmetal-3);
  text-align: center;
 height:30px;
 width: 205px;;
}

p.itch {
  background-color: var(--tiffany-blue);
  color:#ffffff;
  height: 30px;
  text-align: center;
  width:205px;
}

p.project-name
{
height:30px;
width:205px;
background-color: rgb(60, 96, 196);
color:#ffffff;
text-align:left;
vertical-align:text-top;
line-height:auto;
border-style:hidden;
outline:none;
}

p.Gamejam
{
height:30px;
width:205px;
background-color: rgb(25, 40, 63);
color:#ffffff;
text-align:left;
vertical-align:text-top;
line-height:auto;
border-style:hidden;
outline:none;
}

p.personalProject
{
height:30px;
width:205px;
background-color: rgb(56, 186, 215);
color:#ffffff;
text-align:left;
vertical-align:text-top;
line-height:auto;
border-style:hidden;
outline:none;
}

img.Thumbnail
{
  position: relative;
}

div{
  padding: 25px;
  padding-top: 0px;
  border-width: auto;
  border-color: var(--onyx);
  border-style: solid;
}

  p {
    color: rgb(122, 175, 227);
    text-align: justify;
    font-size: large;
    font-family: Conduit;
  }

 a {
  display: block;
  padding: 8px;
 }

  a:link {
    color:rgb(255, 255, 255);
  }

  a:visited  {
 color:rgb(186, 65, 65);
  }

  a:active {
    color:rgb(165, 248, 220);
  }

  a:hover {
 color:rgb(89, 197, 197);
  }

  li {
    display: inline;
    float:left;
    font-family: Conduit;
    background-color: rgb(19, 15, 92);
    border: var(--onyx);
    border-width: auto;
    border-style: solid;

  }

  ul {
    list-style-type: none;
    position: sticky;
  }

  @font-face {
    font-family: Conduit_Bold;
    src: url(Conduit_ITC_Bold.otf);
    font-weight: bold;
  }

  @font-face {
    font-family: Conduit;
    src: url(Conduit_ITC_Medium_Regular.otf);
    font-weight: bold;
  }