:root{
  --background: 250 250% 99%;
  --secondary: 222 15% 15%;
}
html{
  scroll-behavior: smooth;
}
#navbar{
  position: fixed;
  display: flex;
  justify-content: flex-end;
  top:0;
  width: 100%;
  background-color: hsl(var(--secondary));
  left: 0;
  box-shadow: 0 2px 0 rgba(0, 0, 0);
}
head{
  position: fixed;
  top: 0;
}
section{
  display: block;
}
.project-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
  width: 100%;
  max-width: 1280px;
  gap: 0.5rem;
  margin: 0px auto 0;
  justify-items: center;
  justify-content: center;
}
body {
  font-family: 'Raleway', serif;
  color: linen;
  margin: 0;
}
.menu-item{
  text-decoration: none;
  color: rgb(113, 113, 255);
  padding: 1rem;
  font-size: 1rem;
}
#about{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#303841, #829fbf);
}
#about p{
  width: 40%;
  text-align: center;
  padding: 1rem;
  font-style: italic;
}
#welcome-section{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(hsl(var(--background)), #303841);
}
#welcome-section p{
  font-style: italic;
  color: #be3144;
}
h1{
  background: linear-gradient(135deg, hsl(240 100% 60%) 0%, hsl(270 60% 65%) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 3rem;
  margin: 0;
  padding: 0;
}
#projects h1{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 3.5rem;
}
#projects{
  background: linear-gradient(#829fbf, #303841);
  height: 50vh;
}
#contact{
  width: 100%;
  height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #303841;
}
p{
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}
.contact-icon{
  color: linen;
  text-decoration: none;
}
figure{
  display: flex;
  flex-direction: column;
  align-items: center;
}
figcaption{
  width: 100%;
  text-align: center;
}
.project-tile{
  width: 100%;
  display: block;
  aspect-ratio: 1/1;
  object-fit: cover;
}
footer{
  width: 100%;
  text-align: right;
  font-size:0.7rem;
  background: #303841;
}
#navbar a:hover {
  background-color: gray;
}
.contact-icon{
  font-size: 1.2rem;
}
figure > a img {
  transition: opacity 0.3s ease, filter 0.3s ease;
}
figure > a:hover img {
  opacity: 0.7;
  filter: brightness(1.2);
}
img{
  border-radius: 5%;
}
@media (max-width: 623px) {
  #welcome-section,
  #about,
  #projects,
  #contact {
    height: auto;
    min-height: 20vh;
  }
  #welcome-section{
    padding-top: 2rem;
  }
}
#certification{
  font-size:12px;
  text-decoration: none;
  color: blue;
}