@font-face {
    font-family: 'primary-font';
    src: url('assets/fonts/Minercraftory.ttf') format('truetype');
}
@font-face {
    font-family: 'secondary-font';
    src: url('assets/fonts/RobotoCondensed-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'tertiary-font';
    src: url('assets/fonts/VT323-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'insignificant';
    src: url('assets/fonts/PressStart2P-Regular.ttf') format('truetype');
}

body {
    margin: 0 auto;
    max-width: 80%;
    padding: 20px;
    background-color: #F8F0EE;
}

.empty-box{
    height: 30px;
}
.view-resume-btn {
    background-color: #5a0e0e00;
    color: #5A0E0E;
    border: 2px solid #5A0E0E;
    padding: 20px 30px;
    font-size: 1.5rem;
    font-family: 'secondary-font';
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.view-resume-btn:hover {
    background-color: #5A0E0E;
    color:white;
}

.hero-page{
    margin-top: 2rem;
    overflow-y: auto;
    justify-content: center;
}

.content{
    margin-top: 10%;
    margin-bottom: 10rem;
}

.navbar{
    text-align: right;
}
.navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    display: inline;
    margin-right: 5rem;
}

.navbar li a {
    color: #5A0E0E;
    font-family: 'primary-font';
    text-decoration: none;
    position: relative;
    transition: top 0.5s ease;
}

.navbar li a:hover {
    top: -5px;
}


.herotext{
    font-family: 'secondary-font';
    font-size: 2rem;
    font-weight:400 ;
}
.intro {
    font-family: 'primary-font';
    font-size: 4rem;
    color: #5A0E0E;
    letter-spacing: 0.4rem;
}

.heroimage img {
    z-index: 3;
    max-width: 100%;
    width: 27rem;
    height: auto;
    position: absolute;
    top: 55%;
    right: 0%;
    transform: translate(-50%, -50%);
}

@keyframes toggleHearts {
    0%, 50% {
      opacity: 1;
    }
    51%, 100% {
      opacity: 0;
    }
  }
  
  .hearts img {
    z-index: 3;
    max-width: 100%;
    width: 13rem;
    height: auto;
    position: absolute;
    top: 26%;
    right: 11%;
    transform: translate(-50%, -50%);
    animation: toggleHearts 1s infinite;
  }
  
  .hearts2 img {
    z-index: 3;
    max-width: 100%;
    width: 13rem;
    height: auto;
    position: absolute;
    top: 26%;
    right: 11%;
    transform: translate(-50%, -50%);
    opacity: 1;
  }
  
.head{
    font-family: 'primary-font';
    color: #5A0E0E;
    font-size: 3rem;   
    position: absolute;
    letter-spacing: 0.3rem;
    z-index: 10;
}
.about-text{
    padding-top: 11rem;
    padding-bottom: 10rem;
    font-family: 'secondary-font';
    font-size: 1.5rem;
    position: relative;
    width: 35rem;
    line-height: 2.2rem;
}
.sleep{
    position: absolute;
    margin-left: 45%;
    margin-top: 10%;
}
.sleep img{
    max-width: 100%;
    width: 30rem;
}

.stats-char{
    outline: 3px black solid;
    position: absolute;
    background-color: #EDA5B0;
    margin-top: -9%;
    left: 30.8%;
    transform: translate(-50%, -50%);
    width: 25rem;
    padding-left: 3rem;
}
.stats-char h1{
    font-family: 'insignificant';
    color: #5A0E0E;
    font-size: 1.5rem;
    margin-top: 2rem;
}
.stats-char h2{
    font-family: 'tertiary-font';
    font-size: 2rem;
}
.skill{
    margin-left: 52%;
    margin-bottom: -12%;
    width: 35rem;
}

.skill img{
    max-width: 100%;
}
@keyframes shake {
    0% { transform: translateX(-3px) rotate(-2deg); }
    25% { transform: translateX(3px) rotate(2deg); }
    50% { transform: translateX(-3px) rotate(-2deg); }
    75% { transform: translateX(3px) rotate(2deg); }
    100% { transform: translateX(-3px) rotate(-2deg); }
}

.panik {
    position: absolute;
    margin-left: 62.5%;
    margin-top: -16%;
    animation: shake 0.2s infinite;
}

.panik img {
    max-width: 100%;
    width: 9rem;
}
.skills-container {
    border-style: solid;
    z-index: 4;
    padding-top: 1rem;
    padding-bottom: 1rem;
    position: relative;
    margin-top: 14%;
    left: 26%;
    transform: translate(-50%, -50%);
    width: 28rem;
}

.skills-container li {
    list-style-type: none;
    margin-bottom: 1.5rem;
}
.stats{
    margin-left: 46%;
    margin-top: -36%;
}
.list{
    font-family: 'secondary-font';
    font-size: 1.5rem;
}
.heading{
    font-family: 'tertiary-font';
    color:#5A0E0E;
    font-size: 2.4rem;
}
.space{
    height: 4rem;
}


.text {
    margin-right: 4rem;
    margin-top: 14rem;
    text-align: left;
    max-width: 30rem; 
    font-family: 'secondary-font';
    color: #5A0E0E;
}
.short-text{
    font-weight: 350;
    color: black;
    font-size: 1.5rem;
}
#text2 .text{
    text-align: right;
}

.textbox {
    position: relative;
    height: 12rem;
    width: 70rem;
    background-color: #EDA5B0;
    outline: 3px solid black;
    margin-top: 47%;
    margin-bottom: 10rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: flex-start;
}

.textbox-head, .textbox-p {
    text-align: left;
    margin-left: 3rem;
    width: 55rem;
}

.textbox-head {
    font-family: 'primary-font';
    color: #5A0E0E;
    margin-top: 7%;
    margin-bottom: -2rem;
    margin-left: 2.5%;
    text-decoration: none;
    transition: transform 0.3s ease, color 0.3s ease, font-size 0.3s ease; /* Smooth transitions */
}

.textbox-head:hover {
    transform: translateX(-3px);
    font-size: 2.3rem;
}


.textbox-p {
    font-family: 'tertiary-font';
    font-size: 1.7rem;
    margin-bottom: 5rem;
    letter-spacing: 0.1rem;
    font-weight: 100;
}
.project-images-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin-top: 13%;
    margin-bottom: 1rem;
    margin-left: 5.5%;
}

.project-img1,
.project-img2,
.project-img3 {
    margin: 0.3rem;
    width: 22rem;
}

.project-img1 img,
.project-img2 img,
.project-img3 img {
    max-width: 100%;
}

.arrow {
    margin-top: 20%;
    margin-left: -2%;
    width: calc(90% - 60px);
    position: absolute;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    overflow-x: hidden;
    align-items: center;
}
.arrow-r, .arrow-l{
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}
.arrow img {
    max-width: 100%;
    width: 3rem;
}

.arrow button {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

.arrow img {
    max-width: 100%;
}

.exp {
    position: relative;
    display: inline-block;
}

@keyframes rotate {
    0% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}

.exp img {
    max-width: 100%;
    width: 16rem;
    position: absolute;
    top: 57%;
    right: -14%;
    transform: translateY(-50%);
    z-index: 3;
    animation: rotate 1s infinite;
}

/* .btn-link {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    z-index: 100;
}
.dribbble-img{
    position: absolute;
    margin-top: 13%;
    margin-left: 6%;
    width: 6rem;
}
.speech-d{
    position: absolute;
    margin-top: 13%;
    margin-left: 15%;
}
.speech-d img{
    width: 22rem;
    max-width: 100%;
}
.behance-img{
    position: absolute;
    margin-top: 13%;
    margin-left: 45%;
    width: 6rem;
}
.speech-b{
    position: absolute;
    margin-top: 13%;
    margin-left: 54%;
}
.speech-b img{
    width: 22rem;
    max-width: 100%;
}
.github-img{
    position: absolute;
    margin-top: 23%;
    margin-left: 6%;
    width: 6rem;
}
.speech-g{
    position: absolute;
    margin-top: 23%;
    margin-left: 15%;
}
.speech-g img{
    width: 22rem;
    max-width: 100%;
}
.speech-d h1,
.speech-b h1,
.speech-g h1 {
    font-family: 'tertiary-font';
    font-size: 2.5rem;
    font-weight: 500;
    letter-spacing: .2rem;
    position: absolute;
    top: 20%;
    left: 51%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
} */

.footer {
    background-color: #EDA5B0;
    color: rgb(0, 0, 0);
    padding: 20px;
    position: relative;
    left: 0;
    bottom: 0;
    width: 100%;
    font-family: 'secondary-font';
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-bottom: 2rem;
}

.footer h1 {
    margin-bottom: 2rem;
}

.socials, .gmail {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.socials li, .gmail li {
    margin-right: 2rem;
}

.link, .mail, .x, .linkedin, .github, .discord{
    max-width: 3rem;
}
.dribbble, .behance{
    max-width: 2.4rem;
}
.socials li a, .gmail li a {
    width:100%;
    height: auto;
    
}
.socials li a:hover, .gmail li a:hover {
    filter: brightness(80%);
}

.gmail h1{
    font-weight: 350;
}