/* IMPORT FONTS */
@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('https://fonts.googleapis.com/css?family=Lato');

html, body
{
  background-color: #24292E;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  margin:0;
  
  height:100%;
  width:100%;
}

main
{
  display: flex;
  flex-direction: column;
  margin: 1vh 30vw 5vh;
}

main section
{
  background-color: #464F59;
  border-radius: 10px;
  padding: 10px;
  margin: 10px 0 10px 0;
}

main section h2
{
  font-size: 2.5em;
  margin: 0;
}

main section p{font-family: "Lato", sans-serif;}
main section p a
{
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted #fff;
  padding-bottom: 2px;
}
main section p a:hover{border-bottom: 1px solid #fff;}

/*TO-DO, FIX: Inline lists should display as two columns...should*/
main section p ul
{
  columns:         25% 2!important;  
  -webkit-columns: 25% 2!important; 
  -moz-columns:    25% 2!important;
}

video, canvas
{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.projectCardHeader
{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.tools
{
  /*General styling*/
  list-style-type: none;

  /*Flex container styling (This list owns a separate, nested flexbox)*/
  display: flex;
}

.tools li a:before
{
  width:  50px; 
  height: 50px;
  float: left;
  margin-left: 10px;

  /*If content is left null, images are hidden*/
  content:""; 

  /*Spritesheet preloads all images to avoid flickering and clean css*/
  background: url('/Images/Tools/spritesheet.png') 
}
.tools .blueprints:before { background-position: 0    0px!important; }
.tools .cpp:before        { background-position: 0  -50px!important; }
.tools .csharp:before     { background-position: 0 -100px!important; }
.tools .java:before       { background-position: 0 -150px!important; }
.tools .javascript:before { background-position: 0 -200px!important; }
.tools .mixamo:before     { background-position: 0 -250px!important; }
.tools .threejs:before    { background-position: 0 -300px!important; }
.tools .unity:before      { background-position: 0 -350px!important; }
.tools .unreal:before     { background-position: 0 -400px!important; }
.tools .vr:before         { background-position: 0 -450px!important; }


/*Tool tip on tool hover - a literal tooltip for a tool*/
.tools li a .tooltip {
  visibility: hidden;
  width: auto;
  background-color: #0E1011;
  color: #fff;
  text-align: center;
  border-radius: 10px;
  padding: 5px 10px;
  margin: -40px -50px;
  position: absolute;
  z-index: 1;
}
.tools li a:hover .tooltip {visibility: visible;}

/*There's definitely a better way of doing this*/
.tools .blueprints .tooltip:before { content: "UE4 Blueprints";}
.tools .cpp .tooltip:before        { content: "C++";}
.tools .csharp .tooltip:before     { content: "C#";}
.tools .java .tooltip:before       { content: "Java";}
.tools .javascript .tooltip:before { content: "JavaScript";}
.tools .mixamo .tooltip:before     { content: "Mixamo";}
.tools .threejs .tooltip:before    { content: "Three.js";}
.tools .unity .tooltip:before      { content: "Unity";}
.tools .unreal .tooltip:before     { content: "Unreal";}
.tools .vr .tooltip:before         { content: "VR";}


/*Bottom bar links*/
.links 
{
  /*General styling*/
  margin: 0;
  padding: 5px 0 5px 0;
  list-style-type: none;
  border-radius: 5px;
  background-color: #0E1011;
  vertical-align: middle;
  
  /*Flex container styling (This list owns a separate, nested flexbox)*/
  display: flex;
}

.links li
{
  text-align: center;
  padding: 0 0 0 1vw;
}

.links li a {
  color: #FFFFFF;
  text-decoration: none;
  margin: 5px 0 5px 0;
}

.links li a:before
{
  position:relative;
  width: 25px; 
  height: 25px;
  float: left;
  margin: 0 5px 0 0;
  content:"";
  /*Spritesheet preloads all images to avoid flickering and clean css*/
  background: url('/Images/Links/spritesheet.png') 
}

.dengar:before   {background-position: 0    0px!important;}
.download:before {background-position: 0  -25px!important;}
.email:before    {background-position: 0  -50px!important;}
.ggj:before      {background-position: 0  -75px!important;}
.github:before   {background-position: 0 -100px!important;}
.itch:before     {background-position: 0 -125px!important;}
.linkedin:before {background-position: 0 -150px!important;}
.ludumdare:before{background-position: 0 -175px!important;}
.twitter:before  {background-position: 0 -200px!important;}
.unity:before    {background-position: 0 -225px!important;}
.vr:before       {background-position: 0 -250px!important;}
.website:before  {background-position: 0 -275px!important;}
.youtube:before  {background-position: 0 -300px!important;}

.links li a:hover{color: #464F59;}
.links li a:hover:before{background-position-x: -25px!important;}

@media screen and (orientation: portrait) 
{
  main
  {
    margin: 1vh 5vw 5vh;
  }

  .links li
  {
    font-size: 1.5em;
  }

  .links li a
  {
    width: 1.5vh;
    height: 1.5vh;
  }
}