@font-face {
    font-family: Mave-Font;
    src: url(font/Bona_Nova_SC/BonaNovaSC-Regular.ttf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Header-Font;
    src: url(font/Merienda/Merienda-VariableFont_wght.ttf);
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --main: Mave-Font, 'Courier New', Courier, monospace;
    --header: Header-Font, monospace;
    --main-size: calc(0.5rem + clamp(2px, max(0.5vh, 0.5vw), 0.4rem));
    --header-size:calc(0.5rem + max(0.5vh, 0.5vw));
    --img-width: clamp(300px, 30vw, 350px)
}
* {
    padding: 0px;
    margin: 0px;
    border: none;
    box-sizing: border-box;
}
body {
    background-color: rgb(36, 59, 52);
}

.video {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}
.video>img {
    width: clamp(300px, 55%, 450px);
    max-height: 300px;
    margin: 20px 0px;
}

.introduction,.about {
    box-sizing: content-box;
    color: rgb(160, 197, 129);
    font-family: var(--main);
    font-size: var(--main-size);
}

header {
    font-family: var(--header);
    font-size: var(--header-size);
    padding: 20px 0 ;
    color: rgb(200, 198, 129);
    text-align: center;
}
.inshot {
    display: flex;
    justify-content: center;
    padding: 10px;
    border-radius: 5px;
}
.inshot > img {
    width: var(--img-width);
}

main {
    box-sizing: content-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 5px 10px 5px 10px;
}
.author {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(Auto-fill, minmax(350px, 1fr));
    row-gap: 20px;
    justify-content: center;
    align-items: center;
    line-height: 20px;
}

.maverick {
    display: flex;
    align-items: center;
    justify-content: center;
}

footer {
    margin-top: 20px;
    background-color: rgba(25, 41, 35, 0.276);
    box-shadow: 1px -2px 5px 1px rgba(24, 51, 43, 0.72);
}

footer > p {
    font-size: clamp(0.5rem, calc(0.5rem + max(0.5vh, 0.5vw)), 0.8rem);
    font-family: var(--header),system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: rgb(160, 197, 129);
    margin: 0px auto;
    text-align:center;
    font-weight: 500;
    max-width: 1000px;
    padding: 0px 5px;
}

a {
    color: rgb(182, 197, 129);
    text-decoration: none;
    font-family: var(--header);
    font-weight: bold;
    font-size: clamp(0.5rem, calc(0.5rem + max(0.5vh, 0.5vw)), 0.7rem);
}

.showcase {
    display: grid;
    grid-template: auto / repeat(Auto-fit, clamp(300px, calc(300px + 10vw), 350px));
    justify-content: center;
    row-gap: 20px;
    column-gap: 10px;
}
.project-container {
    border: 1px solid rgb(167, 153, 153);
    border-radius: 5px;
    width: 100%;
    height: 150px;
    box-sizing: border-box;
    padding: 10px;
}

.project {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template: 0.5fr 1fr 0.5fr / 100%;
    align-items: center;
    gap: 2.5px;
}
.name-source {
    display: grid;
    grid-template: 100% / 1fr max-content;
}
.review {
    width: 100%;
    height: 100%;
    font-family: cursive, sans-serif, serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgb(195, 194, 194);
    overflow: hidden;
    box-sizing: border-box;
    padding: 0px 2px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status-lang {
    display: grid;
    grid-template: 100% / 1fr 55px;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.name> a{
    text-decoration: none;
    color: rgb(10, 214, 255);
    font-weight: 500;
}

.name>a:hover {
    color: #1572B6;
}
.source {
    font-family: serif,sans-serif,monospace,system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: rgb(106, 100, 106);
    height: 100%;
}
.source > p {
    height: 100%;    
    display: flex;
    align-items: center;
    justify-content: center;
}
.lang {
    display: grid;
    grid-auto-flow: row;
    grid-template: auto / repeat(Auto-fit, 20px);
    gap: 5px;
}
.lang a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.lang svg {
    width: 18px;
}
#Javascript {
    fill: #f7Df1E;
}
#Css {
    fill: #1572B6;
}
#Html {
    fill: #E34F26;
}
#Github {
    fill: #615492;
}
.status {
    font-family: cursive;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    text-transform: capitalize;
}
[data-Hard] {
    color: rgb(255, 0, 0);
}
[data-Easy] {
    color: rgb(0, 255, 0);
}
[data-Medium] {
    color: rgb(0, 0, 255);
}