@font-face {
  font-family: RetroComputer;
  src: url(/media/Fonts/RetroComputer/retro_computer_personal_use.ttf);
}

#wrapper{
  display: grid;

  grid-template-areas: 
  "navigation"
  "profile"
  "about"
  "gallery"
  "contact";
}

body{
  margin: 0px;
  color: white;
  font-family: 'Rubik', Arial, sans-serif;
  background-color: #2C2E32;
  line-height:50px;
}

html {
  scroll-behavior: smooth;
}

.name{
  width: 100%;
  max-width: 600px;
  grid-area: name;
  
}

.tagline{
  grid-area: tagline;
}

h1,h2,h3,h4,h5,h6{
  font-family: 'RetroComputer', Arial, sans-serif;
}

#about, #gallery{
  margin-top: 50px;
}

#profile h2, #about h2, #navigation h3, #profile h6{
  font-family: 'Rubik', Arial, sans-serif;
}

h1, h4{
  text-align: center;
}

header{
  grid-area: navigation;
  background-color: #0D0D0D;
  border-bottom: 5px solid #474559;
  font-size: large;
}

#navigation{
  display:grid;
  grid-template-areas: 
  "homeLink aboutLink";
  justify-items: center;
  font-family: 'Rubik', Arial, sans-serif;
  font-size: 150%;
}

#aboutLink{
  grid-area: aboutLink;
}

#homeLink{
  grid-area: homeLink;
}

#profile{
  grid-area: profile;
  background-image: url(/media/profileBackground.jpg);
  background-size: cover;
  background-position:center;
  margin-left: 5%;
  margin-right: 5%;
  font-size: 100%;
  text-align: center;
  line-height: 1px;
  justify-content: center;
  align-items: center;

}

#profile img{
  margin-top: 2%;
}

.profileMedia{
width: 297px;
height: 210px;
margin-bottom: 50px;
grid-area: video;
}

.socials{
grid-area: socialmedia;
}

#contact{
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  margin-bottom: 1%;

  display: grid;

  grid-gap: 10px;

  grid-template-areas: 
  "resume line email";
  justify-content: center;
  align-items: center;
}

.projectMedia{
  width: 297px;
  height: 210px;
}

#gallery{
  background-color: #0f192d;
  grid-area: gallery;
  margin-bottom:50px;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
}

.gallaryName{
  font-size: 200%;
  color: #7E6999;
}

.game h2,h3{
  color:#007D53;
}

#gameRight{
  line-height: 1;

  justify-content: center;
  grid-area: gameRight;
  text-align: center;
  align-content: center;
}

#gameRight img{
margin: auto;
display: block;
}

#gameLeft{
  text-align: left;
  line-height: 1.5;
  grid-area: gameLeft;
  display: grid;
  grid-template-areas: 
  "gameTopLeft"
  "gameMiddle"
  "gameTopRight"
  "gameBottom";
}

.game{
  display: grid;
  grid-template-areas: 
  "gameRight"
  "break"
  "gameLeft";

  font-size: 120%;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 100px;
  display: none;
}


.show{
  display:block;
}

.gamebreak{
  font-size: 300%;
  grid-area: break;
  visibility: visible;
}

.gamebreak:after{
visibility: hidden;
}

.gameDevTitle{
  text-align: left;
  border-bottom: 2px solid white;
  margin-left: 20px;
  margin-right: 20px;
  font-size: 20px;
}

.icon{
width: 35px;
}

.game a:link {
  color: white;
  text-decoration: none;
}

.game a:visited {
  color: white;
  text-decoration: none;
}

.game a:hover {
  color: white;
  text-decoration: none;
}

.game a:active {
  text-decoration: none;
}

#gameLeft a:link {
  color: #7E6999;
  text-decoration: none;
}

#gameLeft a:visited {
  color: #7E6999;
  text-decoration: none;
}

#gameLeft a:hover {
  color: #B39CD0;
  text-decoration: underline;
}

#gameLeft  a:active {
  color: #FBEAFF;
  text-decoration: underline;
}

.back a:link {
  color: #8090A6;
  text-decoration: none;
}

.back a:visited {
  color: #8090A6;
  text-decoration: none;
}

.back a:hover {
  color: #B4C4D9;
  text-decoration: underline;
}

.back a:active {
  color: #D9F3FF;
  text-decoration: underline;
}

#profile a:link {
  color: #3ca6ff;
  text-decoration: none;
}

#profile a:visited {
  color: #3ca6ff;
  text-decoration: none;
}

#profile a:hover {
  color: #6ebbfa;
  text-decoration: underline;
}

#profile a:active {
  color: #328eda;
  text-decoration: underlinse;
}

a:link {
  color: #007D53;
  text-decoration: none;
}

 a:visited {
  color: #007D53;
  text-decoration: none;
}

a:hover {
  color: #1AB385;
  text-decoration: underline;
}

a:active {
  color: #65EBBA;
  text-decoration: underlinse;
}

.socialMedia{
    width: 10%;
    max-width: 75px;
    margin-bottom: 30px;
}

.fSocialMedia{
  width: 30px
}

footer{
  grid-area: contact;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
  margin-bottom: 1%;

  display: grid;

  grid-template-areas: 
  "resume socialMedia email";
  justify-content: center;
  align-items: center;
}

footer h1{
  margin-left: 10px;
  margin-right: 10px;
  font-size: 15px;
}

.footerSocials{
  grid-area: socialMedia;
}

.resume{
  grid-area: resume;
  
}

#email{
  grid-area: email;
}


footer strong{
  color: #5CB8AF;
}


.playButton {
margin-top: 20px;
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: 'Rubik', Arial, sans-serif;
font-size: 25px;
font-weight: 600;
line-height: 20px;
padding: 12px 100px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
grid-area: playButton;
}

.playButton:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}

.playButton:hover {
background-color: #2c974b;
}

.playButton:focus {
box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
outline: none;
}

.playButton:disabled {
background-color: #94d3a2;
border-color: rgba(27, 31, 35, .1);
color: rgba(255, 255, 255, .8);
cursor: default;
}

.playButton:active {
background-color: #298e46;
box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}

@media screen and (min-width: 830px){
.profileMedia{
  width: 640px;
  height: 360px;
}
#profile{
  font-size: 200%;
}

.fSocialMedia{
width: 100%;
max-width: 60px;
}

footer h1{
font-size: 200%;
}
.projectMedia{
width: 494px;
height: 320px;
}

.gamebreak{
font-size: 500%;
visibility: hidden;
margin-right: 75%;
}

.gamebreak:after{
visibility: visible;
content: ">";
}

#gallery{
  align-items: center;
  justify-content: center;
  text-align: left;
}

.gameTitle{
  line-height: 1;
}

.longGameTitle{
  font-size: 100%;
}

.game{
    display: grid;
    grid-template-areas: 
    "gameRight gameRight break"
    "gameLeft gameLeft gameLeft";

    font-size: 120%;
    margin-bottom: 100px;
    align-items: center;
    grid-gap: 10px;
    display: none;

  }
  
  .show{
    display:grid;
  }
}

@media screen and (min-width: 1920px){
  #about{
      
      font-size: medium;
      display: grid;
      grid-template-areas: 
      "aboutTitle aboutTitle aboutTitle"
      "aboutImg1 aboutText  aboutImg2 "
      "resume resume resume";
      justify-content: center;
      align-items: center;

  }

  .aboutText{
      margin-left: 0;
      margin-right: 0;
  }

  .longGameTitle{
    font-size: 120%;
  }

  #about img{
      max-width: 1000px;
  }

  .projectMedia{
      width: 594px;
      height: 420px;
  }

  .gameDevTitle{
    font-size: 30px;
}

.gamebreak{
  margin-right: 0px;
  }

.icon{
  width: 50px;
  }
  .gallaryName{
    font-size: 300%;
}

.game{
  display: grid;
  grid-template-areas: 
  "gameRight break gameLeft";
  grid-gap: 50px;
  justify-content: left;
  display: none;

}

.show{
  display:grid;
}

#gameLeft{
text-align: left;
line-height: 1.5;
grid-area: gameLeft;
display: grid;
grid-template-areas: 
"gameMiddle gameMiddle"
"gameTopLeft gameTopRight"
"gameBottom gameBottom";
}

.gameMiddle{
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 4;
}

.gameBottom{

grid-column-start: 1;
grid-column-end: 4;
}

}

.btn{
  border:none;
  outline:none;
  margin-bottom: 20px;
  padding: 12px 16px;
  background-color: #007D53;
  color: white;
  cursor: pointer;
  margin-right: 5px;
  margin-left: 5px;
  border-radius: 6px;
}

.btn:hover{
  background-color: #10a171;
}

.filterButtons{
  display: flex;
  align-items: center;
  justify-content: center;
}