:root {
  --background: #f9e7e7;
  --text: #412e50;
  --yellow: #FCF200;
}

* {
  box-sizing: border-box 
}

body {

    font-family: 'Inter', sans-serif;
    font-family: 'Raleway', sans-serif;
    margin: 0;
    background-color: var(--background); 
    color: var(--text)

}

.container {

  margin: 20px;
  padding: 20px;

}

.container-projects {

  margin: 0px;
  padding: 0px;

}

nav {

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--text);
  padding: 20px 10px 10px 20px;
  font-size: 2rem;

}

nav a {

  text-decoration: none;
  color: var(--text);
  padding: 0 10px 0px;

}

nav a:hover {
  
  background-image: radial-gradient(#00fb9f, transparent);

}

nav a:focus {
  
  background-image: radial-gradient(#00fb9f, transparent);

}

.burger, .close{
  display: none;

}

i {
  color: var(--text);
}

header {

  margin: 0;
  text-align: center;
  padding: 10% 10%;

}

.header-background {

  background-image: radial-gradient(circle, yellow, transparent, transparent, transparent);
  height: 50%;
  width: 50%;
  position: absolute;
  z-index: -1;
  left: 10%;

}

#hello {
  
  font-size: 2rem;
  padding: 0 200px 10px 0;

}

#first-name {

  padding-right: 300px;

}

#description {
  font-size: 2rem;
  padding: 20px 0 0 300px;
}


h1 {

  font-family: 'Raleway', sans-serif;
  margin: 0;
  font-size: 7rem;
  padding-bottom: 5px;

}

h2 {

  font-family: 'Raleway', sans-serif;
  margin: 0;
  font-size: 5rem;
  padding-bottom: 5px;

}

h3 {

  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding-bottom: 15px;

}

h4 {

  font-family: 'Raleway', sans-serif;
  margin: 0;
  font-size: 1.7rem;

}

p {

  font-family: 'Inter', sans-serif;
  font-size: 1.5rem;
  font-weight: 300;
  padding-bottom: 10px;


}


.featured {

  display: flex;  
  flex-direction: row;
  flex-flow: row wrap;
  align-content: center;
  margin: 10px 0 10px;

}


img {

  width: 400px;
  height: 400px;
  object-fit: cover;
  transition: transform .2s;
  
}

img:hover {
  transform: scale(1.01);
}

.category {

  font-size: 1rem;

}

.left-container {
  width: 100%;
  position: sticky;
  top: 0;
}

#githubLink {

  text-decoration: none;
  color: #463D59;
  border: 0.5px solid #463D59;
  text-align: center;
  border-radius: 20px;
  padding: 10px 20px;
}

#githubLink:hover{

  text-decoration: none;
  background-image: radial-gradient(#00fb9f, transparent);
  border: 0.5px solid #463D59;

}

.contact {

  display: flex;
  justify-content: space-between;
  margin: 100px 0 100px;

}

.go-to-top-container {

  display: flex;
  justify-content: flex-end;
  margin: 0 4% 4% 0;

}

.go-to-top {
  text-decoration: none;
  display: flex;
  border-radius: 20px;
  border: 0.5px solid var(--text);
  width: 50px;
  height: 50px;
  margin: 20px;
  padding: 10px;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-size: 2rem;

}

.go-to-top:hover{

  background-color: var(--text);

}

.arrow:hover{

  color: var(--background);

}


footer {

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid black;
  padding: 20px 10px;
  font-size: 2rem;

}

footer a {

  text-decoration: none;
  color: var(--text);
  padding: 0px 10px;

}

footer a:hover {

  background-image: radial-gradient(#00fb9f, transparent);

}

footer a:focus {

  background-image: radial-gradient(#00fb9f, transparent);

}

/* about page */

.text-container {

display: grid;
grid-template-columns: 2fr 1fr;
gap: 50px;
margin: 50px;
align-items: center;
justify-content: center;
align-content: center;
  
}

.text-container h2 {

  padding-bottom: 30px;

}

.text-container p {

  padding-bottom: 30px;

}

.profile-image {

  border-radius: 20px;
  border: 0px transparent;

}

.email-link {

  text-decoration: none;
  color: var(--text);
  font-weight: 500;

}

/* All Project Pages */

.full-width {

  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  justify-items: left;
  align-items: left;
  margin: 40px 0 40px;

}

.portfolio-projects {

  display: flex;  
  flex-direction: row;
  flex-flow: row wrap;
  align-content: center;

  margin: 40px 0 40px;
  
}

.full-width {

width: 100%;

}

.full-width img {

  width: 70%;
  object-fit: cover;
  margin-bottom: 20px;
  height: auto;

}

.full-width02 {

  width: 100%;
  object-fit: cover;
  margin-bottom: 20px;
  padding: 10px;
  margin-left: 20px;

}


.full-width02 li {

  text-align: left;
  align-content: left;
  margin: 0;
  gap: 0px 0px;
  list-style-type: none;

}


.image-project-page {

  width: 100%;
  object-fit: cover;
  margin-bottom: 20px;

}

#githubLinkPortfolio {

  text-decoration: none;
  color: #463D59;
  border: 0.5px solid #463D59;
  text-align: center;
  border-radius: 20px;
  padding: 10px;
}

#githubLinkPortfolio:hover{

  text-decoration: none;
  background-image: radial-gradient(#00fb9f, transparent);
  border: 0.5px solid #463D59;

}

.content {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 30px;
  margin: 50px;
  align-items: flex-start;

}

.content02 img {

  display: block;
  justify-content: top;
  margin: 0;
  padding-bottom: 20px;
  object-fit: contain;
  height: auto;

}

table, th, td {
  border-collapse:collapse;
  font-size:12px;
  padding: 10px;
}


.header-background-project {

  background-image: radial-gradient(circle, yellow, transparent, transparent, transparent);
  height: 50%;
  width: 50%;
  position: absolute;
  z-index: -1;
  left: 10%;
  top: 10%;

}

div.scroll-container {
  overflow: auto;
  white-space: nowrap;
  padding: 10px;
}

div.scroll-container img {
  padding: 10px;
}

::-webkit-scrollbar-thumb:horizontal{
  background-image: radial-gradient(#00fb9f, transparent);
  border-radius: 2px;
  width: 40px;
}


.invisible-scrollbar::-webkit-scrollbar {
  background-color: transparent;
}

@media only screen and (max-width: 1309px) {

  .contact {

    flex-direction: column;
    margin-top: 100px;
    margin-bottom: 100px;

  }

}

@media only screen and (max-width: 768px) {

  .container {
    margin: 0px;
    padding-right: 0px;
    padding-left: 0px;
  }
  
  .nav-links {
    
    position: fixed;
    top: -110%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    background-color: var(--background);
    width: 100vw;
    height: 100vh;
    text-align: center;
    transition: 1s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    z-index: 1;
    right: 0;

    }

    ::-webkit-scrollbar-thumb:horizontal{
      background: transparent;
      border-radius: 2px;
    }
    
    
    .invisible-scrollbar::-webkit-scrollbar {
      background-color: transparent;
    }

  .active {
        top: 0;
        right: 0;
    }

  .burger {

      display: flex;
      justify-content: center;
      background-color: var(--background);
      border: 0px solid var(--text);
      padding: 20px;
      justify-content: flex-end;
      margin: 0;

    }

  .social-media-links {

    display: none;

    }

  .nav-links .close {

    display: contents;
    border: 0px transparent;
    margin-bottom: 30px;
    width: 20%;

    }

  .close:hover {
    font-weight: 900;
    color: #00fb9f;
  }

  header {

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 30px;
    height: 40vh;

  }

  .half {
    height: 20vh;
  }

  .header-background {

    background-image: radial-gradient(circle, yellow, transparent, transparent);
    height: 50%;
    width: 50%;
    position: block;
    z-index: -1;
    left: 10%;

  }

  #hello {
    font-size: 1.7rem;
    padding: 0px;


  }

  #first-name {
    padding: 0px;


  }

  #description {
    font-size: 1.7rem;
    padding: 0px;

  }

  h1 {

    font-family: 'Raleway', sans-serif;
    font-size: 4rem;

  }

  h2 {

    font-size: 2em;
    text-align: center;

  }

  h3 {

    font-family: 'Raleway', sans-serif;
    font-size: 1.5rem;

  }

  p {

    font-family: 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 300;

  }


  .featured {

    text-align: center;
    align-content: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    gap: 0px 0px;


  }

  .featured img {

    margin: 0;
    padding: 0;
    object-fit: cover;
    height: auto;
    max-width: 100%;

  }

  .contact {

    flex-direction: column;
    margin-top: 50px;
    margin-bottom: 50px;
    text-align: center;

  }

  .go-to-top-container {

    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
  
  }

  .footer {
    display: none;
  }


/* about page */


.text-container {

display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
align-content: center;
padding: 20px;
margin: 0;
  
}

.text-container img {

align-content: center;
margin-top: 50px;
max-width: 100%;

}

.header-background-portfolio {

  background-image: radial-gradient(circle, yellow, transparent, transparent, transparent);
  height: 50%;
  width: 50%;
  position: absolute;
  z-index: -1;
  left: 10%;
  top: 10%;

}



/* All Project Pages */

.half {
  height: 0px;
  margin: 0;
}

.full-width {

  text-align: center;
  align-content: left;
  justify-content: left;
  margin: 0;
  gap: 0px 0px;
  text-decoration: none;
  padding-top: 20px;


}

ul {

  list-style-type: none;

}


.main-image-project-page {
  width: 200px;
  object-fit: cover;
  margin-bottom: 20px;
  height: auto;
}

.image-project-page {
  width: 100vw;
  object-fit:contain;
  margin-bottom: 20px;
}

.portfolio-projects {

  margin-bottom: 20px;
  justify-content: center;
  align-content: center;
  max-width: 100%;
  
}

.container-projects{

  margin: 0px;
  padding: 0px;
  text-align: center;

}

.container-projects img {

  max-width: 100%;
}

.content {

  display: flex; 
  flex-direction: column;
  justify-content: top;
  margin: 0;
  padding: 0;
  gap: 0px 0px;
  margin-top: 50px;


}

.content img {

  display: block;
  justify-content: top;
  margin: 0;
  padding-bottom: 20px;
  object-fit: contain;
  height: auto;

}

.header-project-pages {
  display: flex;
  gap: 10px;
}



.header-background-project {

  background-image: radial-gradient(circle, yellow, transparent, transparent, transparent);
  height: 50%;
  width: 50%;
  position: absolute;
  z-index: -1;
  left: 10%;
  top: 10%;

}

.skills-used {
  font-size: 2rem;
}

.left-container {

  position: relative;
  margin: 0;
  padding: 0;
  padding: 1rem;

}

.full-width {
  margin-top: 20px;
}

.full-width02 {
  display: block;
  position: relative;
  max-width: 100%;
  margin: 0;
  padding: 0;

}

}