@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    /* Fonts Variables */
    --primaryFontFamily: "Lobster Two", sans-serif;

    /* Color Pallet Variables */
    --primaryColor: #1B5362;
    --secondaryColor: #DB8800;
    --frontBoxBackgroundColor: #5C5C5C;
    --backBoxBackgroundColor: #3E3E3E;
    --whiteColor: #FFFFFF;
    --blackColor: #000000;
}

* {
    font-family: var(--primaryFontFamily);
    background-color: var(--primaryColor);
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

main {
    text-align: center;
    margin: auto;
    width: 292px;
}

#img {
    justify-content: center;
    display: flex;
}

img {
    position: relative;
    height: 50vw;
    width: 60vw;
    top: -20px;
}

#div-position-custom {
    justify-content: flex-end;
    align-items: end;
    display: flex;
    height: 282px;
    width: 300px;
}

#div-backbox-custom {
    background-color: var(--backBoxBackgroundColor);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    outline: 2px solid var(--blackColor);
    border-radius: 15px;
    height: 274px;
    width: 292px;
}

#div-frontbox-custom {
    background-color: var(--frontBoxBackgroundColor);
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
    outline: 2px solid var(--blackColor);
    border-radius: 15px;
    position: relative;
    height: 274px;
    width: 292px;
    left: -8px;
    top: -8px;
}

#text {
    background-color: var(--frontBoxBackgroundColor);
    margin: auto;
    width: 80%;
}

#title {
    background-color: var(--frontBoxBackgroundColor);
    justify-content: center;
    margin-bottom: 22px;
    display: flex;
}

h2 {
    background-color: var(--frontBoxBackgroundColor);
    color: var(--secondaryColor);
    padding-top: 22px;
    margin: auto;
    font-size: 36px;
    text-shadow:
    -2px -2px 0px #000,
     2px -2px 0px #000,
    -2px  2px 0px #000,
     2px  2px 0px #000,
     0px  0px 0px #000,
     0px  0px 0px #000,
     4px 4px 4px #000,  
     4px 4px 4px #000;
}

#front-text {
    background-color: #00000000;
    position: absolute;
    z-index: 1;
}

#back-text {
    color: var(--frontBoxBackgroundColor);
    position: relative;
    z-index: 0;
    left: 3px;
    top: 3px;
}

#text-body {
    background-color: var(--frontBoxBackgroundColor);
    text-align: left;
}

p {
    background-color: var(--frontBoxBackgroundColor);
    color: var(--whiteColor);
    margin-top: 18px;
    font-size: 14px;
}

mark {
    background-color: var(--frontBoxBackgroundColor);
    color: var(--secondaryColor);
}