@import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');


:root {
    --space: calc(.8em + 1.5vmin);
    --radius: calc(2em + 2vmin);

    --font: 'Shrikhand';
}

body {
    background: #282a2e;
}

p { 
    margin-left: 20px;
    margin-right: 20px;
    font-family: 'Rubik', serif;
    font-size: 24px;
    color: #b0a090;
    line-height: 1.5;
}

h1 {
    text-align: center;
    color: #c5c8c6;
    font-size: clamp(2em, 5em, 10vw);
    font-family: var(--font), cursive;
    margin: 64px;

}

h3 {
    text-align: center;
    color: #c5c8c6;
    font-size: 42px;
    font-family: var(--font), cursive;
    margin: 64px;

}

a {
    color: #83a5aa;
}


.pagecontent {
    position: relative;
    text-align: center;
    margin: auto;
    width: 80%;
    max-width: 800px;
    padding-left: 32px;
    padding-right: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
    background: #282a2e;
    border-radius: 64px;
}

.footer {
    position: relative;
    text-align: center;
    color: #665c54;
    margin: auto;
    font-family: 'Rubik', serif;
}

.container {
    position: relative;
    text-align: center;
    width: 80%;
    max-width: 800px;
    padding: var(--space);
    border-radius: calc(var(--radius) + var(--space));
    margin-left: auto;
    margin-right: auto;
    margin-top: 4vmin;
    margin-bottom: calc(6vmin + 2em);
    z-index: 14;
    box-shadow: -1em -1em 2em #373b41,
                 1em 1em 2em #1D1F21;
}

img {
    position: relative;
    width: 100%;
    max-width: 800px;
    border-radius: var(--radius);
    transition: 0.25s ease;
    box-shadow:  20px  20px 40px #373b41,
                -20px -20px 40px #1d1f21;
}

h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -80%);
    color: #c5c8c6;
    opacity: 0;
    transition: 0.25s ease in;
    text-shadow: 0px 0px 32px #373b41;
    font-size: clamp(2em, 5em, 8vw);
    font-family: var(--font), cursive;
}

.container:hover h2 {

    opacity: 1;
}

.container:hover img {
    opacity: 0.5;
}