@font-face {
    font-family: 'Short Stack';
    src: url('/assets/fonts/ShortStack-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    margin: 0px;
    padding: 0px;
    font-family: "Short Stack";
    color: rgb(46, 46, 46);
    background-color: rgb(206, 255, 133);

}

.background-container {
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -2;
}
.sliding-background {
        display: block;
        position: absolute;
        background-image: url(./assets/images/pattern.png);
        background-size: 800px 800px;
        background-repeat: repeat;
        
        top: 0;
        left: -800px;
        height: 1000%;
        width: 1000%;
        z-index: -2;
        overflow: hidden;
        animation: slide 30s linear infinite;
}
@keyframes slide {
    0% {
      transform: translate3d(0, 0, 0);
   }
    100% {
      transform: translate3d(800px, -800px, 0);
   }
  }
hr {
    border: 0;
    margin: 50px;
}
h1 {
    font-size: 2.2rem;
}
h2 {
    font-size: 2rem;
}
h3 {
    color: rgb(102, 102, 102);
}
.page-top {
   
    display: grid;
    grid-template-columns: 2fr 3fr 2fr ;
    grid-template-rows: 250px 300px  400px;
}

.pfp {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    height: 100%;
    justify-content: center;
}

.greeting {
    grid-row: 3;
    grid-column: 2;
    text-align: center;

}
.peeker-parent {
    overflow: hidden;
    grid-row: 3;
    position: relative;
}
.peeker {
    background-color: brown;
    height: 100px;
    width: 100px;
    position: absolute;
    transition: all 0.5s;

}
.peeker-parent:hover .peeker {
    transform: translateY(100px);
}

.my-skills {
    display: grid;
    grid-template-columns: 2fr 4fr 4fr 2fr;
    grid-template-rows: 80px 300px 300px;
}

.skills-heading {
    grid-column: 2;
    grid-row: 1;
}

.skill {
    grid-column: 3;
}

.skill.illustration {
    grid-row: 2;
}

.illustration-image {
    grid-column: 2;
    grid-row: 2;
    height: 10rem;
}

.skill.threedm {
    grid-row: 3;
}

.modeling-image {
    grid-column: 2;
    grid-row: 3;
    height: 10rem;
}

img {
    transition: all 0.5s ease-in-out 0s;
}

img:hover {
    transform: rotate(360deg) scale(130%);
    transition: all 0.5s ease-in-out 0s;
}






footer {
    height: 200px;
    background-color: lightpink;
    display: flex;
    flex-direction: column;
    justify-content: end;
    text-align: center;
}