@font-face {
  font-family: "open-sans";
  src: url(OpenSans-Regular.ttf);
}

:root {
  --main-fg-color:rgb(108,99,255)
}
html {
  font-family: "open-sans";
  font-size:18px;
}

nav {
  width:100vw;
  padding:1rem;
  height:3.2rem;
  transition: 0.3s;
  }
  
  
  #hamburger {
    display:inline-block;
    background:none;
    border-radius:0.7rem;
    box-shadow: 0 0.4rem 1rem rgba(10,10,10,0.15);
    font-size:1.2rem;
    padding:0.3rem 1rem;
    border:none;
    cursor:pointer;
    transition: all 0.3s ease 0s;
    margin-top:1rem;
    margin-right:3vw;
    height:1.8rem;
    display:none;
    position:absolute;
    right:1rem;
    top:1.5rem;
    width:0.3rem;
  }

  input {
    position: absolute;
    display: inline-block;
   cursor:pointer;
   right:1rem;
   top:2.5rem;
   height:2.1rem;
   width:2rem;
    z-index: 2;
    opacity: 0;
  }

 input:checked ~ nav{
   height:10rem;
 
  }

  nav >  a {
    display:inline-block;
    background:none;
    border-radius:0.7rem;
    box-shadow: 0 0.4rem 1rem rgba(10,10,10,0.15);
    font-size:1.2rem;
    padding:0.3rem 1rem;
    border:none;
    cursor:pointer;
    transition: all 0.3s ease 0s;
    margin-top:1rem;
    margin-right:3vw;
    height:1.8rem;
  }
  
  nav > a:hover {
    transform: translateY(-7px);
  }
  
  nav > a:active:focus {
    outline: none;
  }
  
  :focus {
    outline: none;
  }
  
  .no-js :focus, .keyboard-focus :focus {
    transform: translateY(-7px);
  }

.homepage {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  padding-left:5%;
  padding-right: 5%;
  
}

.homepage > .callToAction {
  align-self:flex-start;
  height: 10rem;
  border-color: red;
  margin: 0 1rem 10vh;
}

.homepage > .callToAction > h1 {
  font-size: 4.7rem;
  margin: 0;
  color:var(--main-bg-color,black);
  line-height:5rem;
}

.homepage > .callToAction > p {
  font-size: 1.8rem;
  margin: 0;
  text-align: center;
}

.homepage > .callToAction > div {
width:100%;
display: flex;
justify-content: space-evenly;
margin-top:1rem;
}

.homepage > .callToAction > div > button, a {
  background:none;
  border:none;
  vertical-align: middle;
  font-size:1rem;
  display: flex;
  align-items: center;
  text-decoration: none;
  color:black;
  cursor:pointer;
}

.homepage > .callToAction > div > button > img {
  color:black;
}

.homepage > .callToAction > div > button > span:hover, .homepage > .callToAction > div > a > span:hover{
  color: var(--main-fg-color)
}

:visited {
  text-decoration: none;
  color:black;
}

.homepage > .callToAction > div > button > .discord_icon {
  height:2rem;
  width:auto;
  display: inline-block;
  
}

.homepage > .callToAction > div > button > span {
  margin-left:0.6rem;
  margin-right:1.6rem;
}

.homepage > .callToAction > div > a > span {
  margin-left:0.6rem;
  margin-right:1.6rem;
}
.homepage > img {
  width: 32rem;
  max-width:80vw;
}

.portfolio {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding:0 5% 6rem;
  align-items:flex-start;
  align-content: flex-start;

}
.portfolio > h1 {
  background: url(underline.svg) center bottom  no-repeat ;
  background-size:100%;
  font-size:2.5rem;
  margin:3rem 1rem 1rem;
  text-shadow: 4px 1px white,
  -10px 1px white ;
}
.portfolio > .professional_project {
  display: grid;
  justify-self: flex-start;
  align-items: flex-start;
  padding:1rem;
  margin-top:0;
  margin-bottom:4rem;
  flex: 0 1 1400px;
  max-width: 90vw;
  grid-template-columns: fit-content(8ch) 1fr;
  grid-template-rows: 1fr minmax(fit-content(8ch), 2fr) 50px;

 
  gap:0rem 3vw;
 
}


.portfolio > .professional_project >  .links{
  grid-column:2;
  grid-row:3;
}

.portfolio > .professional_project > img{
 width:600px;
 box-shadow: 4px 0 30px rgba(10,10,10,0.15);
 border-radius: 1rem;
 grid-row:1 / 4;
}

.portfolio > .professional_project > div> a {
  color:var(--main-fg-color);
}

.portfolio > .project {
  display: grid;
  justify-self: flex-start;
  align-items: flex-start;

  margin-top:0;
  margin-bottom:7rem;
  flex: 0 1 1400px;
  max-width: 90vw;
  grid-template-columns: fit-content(8ch) 1fr;
  grid-template-rows: 1fr 50px;

 padding:1rem;
  gap:0 3vw;
 
}

.portfolio > .project >  .links{
  grid-column:2;
  grid-row:2;
}

.portfolio > .project > img{
 width:600px;
 box-shadow: 4px 0 30px rgba(10,10,10,0.15);
 border-radius: 1rem;
 grid-row:1 / 4;
}

.portfolio > .project > div> a {
  color:var(--main-fg-color);
}


@media only screen and (max-width:1650px) {  
  html {
    font-size:16px;
  }
  .portfolio > .professional_project {
    flex-basis: 1100px;
    grid-template-rows: 350px 50px 100px;
    gap: 3rem 3rem;
  }

  .portfolio > #gambling {
    grid-template-rows: 300px 70px 100px;
  }

  .portfolio > .professional_project > img {
    grid-row:1/3;
  }
  .portfolio > .professional_project >  .links{
    grid-column:2;
    grid-row:2;
  
  }
  .portfolio > .professional_project > .quote {
     grid-column: 1/3;
     grid-row: 3;  

  }    

}

@media only screen and (max-width:1050px) {
  .portfolio > h1 {
    font-size:2.2rem;
  }
  .portfolio > .professional_project{
    grid-template-columns: 1fr;
    grid-template-rows: fit-content(8ch);
    max-width:650px;
    gap:1vw;
    margin:1rem 0 6rem;
    height:950px;
  }

  .portfolio > #gambling {
    grid-template-rows: fit-content(8ch);}
  .portfolio > .professional_project > img {
    grid-row:1;
    grid-column: 1;
   width: 100%;
   
  }
  .portfolio > .professional_project > .quote {
    grid-column: 1;
    grid-row: 3;

 }
 .portfolio > .professional_project > p {
   grid-column:1;
   grid-row:2;
 }
 .portfolio > .professional_project > .links {
  grid-column: 1 / 1;
  grid-row:4;
}

.portfolio > .project{
  grid-template-columns: 1fr;
  grid-template-rows: fit-content(8ch);
  max-width:650px;
  gap:1vw;
  margin-bottom: 4rem;
  height:600px;
}
.portfolio > .project > img {
  grid-row:1;
  grid-column: 1;
 width: 100%;
 
}

.portfolio > .project > p {
 grid-column:1;
 grid-row:2;
}
.portfolio > .project > .links {
grid-column: 1 / 1;
grid-row:3;
}

.homepage > .callToAction > div, .homepage > .callToAction > div>  a, .homepage > .callToAction >div> button {
 
  display:block;
  margin-bottom:0.3rem;
  }

  .homepage > .callToAction > div>  a {
     padding-left:0.5rem;
  }

.homepage > .callToAction{
  margin: 0 0 3rem;
}

.homepage > .callToAction > h1 {
  font-size:3.2rem;
}

.homepage > .callToAction > p {
  font-size:1.7rem;
}
}

@media only screen and (max-width:500px) {
  .portfolio > h1 {
    font-size:1.7rem;
  }
  nav {
    overflow: hidden;
  }

  
  nav > a {
    display: block;
    box-shadow: 0 0.2rem 0.4rem rgba(10,10,10,0.15);
    margin-right:4rem;
  }

 #hamburger {
    display: inline-block;
    margin-right:0;
  }

  .homepage {
    align-content:flex-start;
  }

  .homepage > .callToAction {
    height:17rem;
    margin-top:2rem;
  }
  .homepage > .callToAction > h1 {
    font-size:2.2rem;

  }
  
  .homepage > .callToAction > div > button > .discord_icon {
    height:1.5rem;
  }

  .homepage > .callToAction > p {
    font-size:1.05rem;

  }
  .homepage > .callToAction > div>  a, .homepage > .callToAction >div> button {
    font-size:0.8rem;
  }
}