*{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
}

:root{
    --yellow: #F4D04E;
    --gray-950: #111111;
    --gray-500: #6B6B6B;
    --white: #FFFFFF;
    --spacing-300: 24px;
    --spacing-200: 16px;
    --spacing-150: 12px;
    --spacing-100: 8px;
    --spacing-50: 4px; 
}

@font-face {
    font-family: Figtree;
    src: url(./assets/fonts/Figtree-VariableFont_wght.ttf);
}

@font-face {
    font-family: "Figtree Italic";
    src: url(./assets/fonts/Figtree-Italic-VariableFont_wght.ttf);
}

@font-face {
    font-family: "Figtree ExtraBold";
    src: url(./assets/fonts/static/Figtree-ExtraBold.ttf);
}

@font-face {
    font-family: "Figtree SemiBold";
    src: url(./assets/fonts/static/Figtree-SemiBold.ttf);
}

.text-preset-1 {
    font-size: var(--spacing-300);
    line-height: 150%;
    letter-spacing: 0px;
    font-family: "Figtree ExtraBold";
}

.text-preset-2 {
    font-size: var(--spacing-200);
    line-height: 150%;
    letter-spacing: 0px;
    font-family: "Figtree";
    color: var(--gray-500);
}

.text-preset-3 {
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0px;
    font-family: "Figtree";
    color: var(--gray-950);
    
}

.text-preset-3-bold {
    font-size: 14px;
    line-height: 150%;
    letter-spacing: 0px;
    font-family: "Figtree ExtraBold";
    color: var(--gray-950);
}

html{
    background-color: var(--yellow);
    display: flex;
    min-height: 100vh;
    width: 100%;
    justify-content: center;
    align-items: center;
}

main {
    display: flex;
    flex-direction: column;
    background-color: var(--white);
    width: 384px;
    height: 522px;
    padding: var(--spacing-300);
    border-radius: 20px;
    box-shadow: 8px 8px 0px 0px #000;
    border: 1px solid black;
    gap: var(--spacing-150);
    
}

main img {
    height: 200px;
    border-radius: 10px;
}

main section {
    width: 336px;
    height: 194px;
    margin-top: var(--spacing-150);
    gap: var(--spacing-150);
    display: flex;
    flex-direction: column;
}

main section h2 {
    background-color: var(--yellow);
    color: var(--gray-950);
    padding: 4px 12px;
    display: inline;
    width: 82px;
    height: 29px;
}

main section h1:hover{
    color: var(--yellow);
    cursor: pointer;
}

footer{
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    margin-top: var(--spacing-100);
}
footer img{
    width: 32px;
    height: 32px;
}