/*FONT*/
.noto-sans-mono {
    font-family: "Noto Sans Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

/*GRID & BACKGROUND*/
body {
    background-image: url(bgimage.jpeg);
    background-repeat: no-repeat;
    display: grid;
    place-items: center;
    font-family: Noto Sans Mono;
}

.grid-container {
    display: grid;
    grid-template-columns: 15% 70% 15%;
    width: 100%;
}

.container {
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 768px) {
    .grid-container {
        grid-template-columns: 10% 80% 10%;
    }
}

@media screen and (max-width: 480px) {
    .grid-container {
        grid-template-columns: 5% 90% 5%;
    }
}

@media screen and (max-width: 350px) {
    .grid-container {
        grid-template-columns: 3% 94% 3%;
    }
}

/*HEADER*/
.header h1 {
    padding-left: 10px;
}

.header a {
    text-decoration: none;
    color: black;
    padding-left: 10px;
}

.header p {
    padding-left: 10px;
    color: rgb(130, 130, 130);
}

.header {
    position: relative;
    padding-top: 20px;
    text-align: right;
}

.header img {
    position: absolute;
    top: 55px;
    right: 10px;
    height: 200px;
    border-radius: 15px;
    border: 2px solid rgb(130, 130, 130);
}

.header h1,
.header h2,
.header p {
    text-align: left;
    cursor: default;
}

@media screen and (max-width: 768px) {
    .header h1 {
        font-size: 24px;
    }

    .header p {
        font-size: 12px;
    }

    .header img {
        height: 160px;
    }
}

@media screen and (max-width: 480px) {
    .header h1 {
        font-size: 22px;
    }

    .header p {
        font-size: 10px;
    }

    .header img {
        height: 140px;
    }
}

@media screen and (max-width: 375px) {
    .header h1 {
        font-size: 20px;
    }

    .header p {
        font-size: 9px;
    }

    .header img {
        height: 130px;
    }
}

/*ABOUT*/
.about h1 {
    font-size: 17pt;
    padding-left: 10px;
    cursor: default;
}

.about p {
    font-size: 10pt;
    color: rgb(130, 130, 130);
    padding-left: 10px;
    padding-right: 10px;
    cursor: default;
}

/*SKILLS*/
.skills h1 {
    font-size: 17pt;
    padding-left: 10px;
    cursor: default;
}

.skills p {
    cursor: default;
    padding-left: 10px;
}

.skills p,
.skills a {
    text-decoration: none;
    font-size: 15pt;
    color: rgb(130, 130, 130);
}

/*EXPERIENCE*/
.experience h1 {
    font-size: 17pt;
    padding-left: 10px;
    cursor: default;
}

.experience h3 {
    color: rgb(130, 130, 130);
    font-size: 12pt;
    padding-left: 10px;
    cursor: default;
}

.experience h4 {
    color: rgb(130, 130, 130);
    font-size: 10pt;
    padding-left: 30px;
    cursor: default;
}

.experience p {
    color: rgb(130, 130, 130);
    font-size: 9pt;
    padding-left: 30px;
    padding-bottom: 5px;
    padding-right: 10px;
    cursor: default;
}

/*EDUCATION*/
.education h1 {
    font-size: 17pt;
    padding-left: 10px;
    cursor: default;
}

.education h3 {
    color: rgb(130, 130, 130);
    font-size: 12pt;
    padding-left: 10px;
    cursor: default;
}

.education h4 {
    color: rgb(130, 130, 130);
    font-size: 10pt;
    padding-left: 30px;
    cursor: default;
}

.education p {
    color: rgb(130, 130, 130);
    font-size: 9pt;
    padding-left: 30px;
    padding-bottom: 5px;
    padding-right: 10px;
    cursor: default;
}

/*PROJECTS*/
.projects-grid {
    display: grid;
    grid-template-columns: 49% 49%;
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.projects h1 {
    font-size: 17pt;
    padding-left: 10px;
    cursor: default;
}

.temp {
    margin: 0 auto;
    border: 1px solid rgb(130, 130, 130);
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    max-height: 150px;
    overflow-y: auto;
}

.temp::-webkit-scrollbar {
    width: 0px;
}

.temp a {
    font-weight: bold;
    font-size: 11pt;
    color: black;
    padding-left: 5px;
}

.txt {
    color: rgb(130, 130, 130);
    font-size: 9pt;
    padding-left: 5px;
    padding-right: 5px;
    cursor: default;
}

.x {
    text-align: center;
}

.x a {
    text-decoration: none;
    color: rgb(130, 130, 130);
}

.x p {
    cursor: default;
    color: rgb(130, 130, 130);
}

@media screen and (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 100%;
        /* Stack items in one column */
    }
}

/*FOOTER*/
.footer p {
    font-size: 9pt;
    text-align: center;
    color: rgb(130, 130, 130);
}

.footer a {
    color: rgb(130, 130, 130);
}