@import url(../../global/normalize.css);

:root{
    /*colours*/
    --slate-900: #1F314F;
    --slate-500: #68778D;
    --slate-300: #D5E1EF;
    --white: #fff;

    /*font-family*/
    --ff: "Outfit", sans-serif;

    /*font-weight*/
    --fw-bold: bold;

    /*font sizes*/
    --fs-15px: calc(15/16 * 1rem);
    --fs-22px: calc(22/16 * 1rem);

    /*line-height*/
    --line-120: 1.2;
    --line-140: 1.4;

    /*letter spacing*/
    --letter-02: calc(0.2/15 * 1em); /*this is 0.2px*/

    /*layout spacing*/
    --spacing-16px: 1em;
    --spacing-24px: calc(24/16 * 1em);
    --spacing-40px: calc(40/16 * 1em);

    /*box stuff*/
    --padding-main-mobile: 1rem;
    --padding-main-desktop: 2rem;
    --br-10: calc(10/16 * 1rem);
    --br-20: calc(20/16 * 1rem); 

    --card-max-width: calc(320/16 * 1rem);
    --card-header-max-width: calc(288/16 * 1rem);
    --card-padding: var(--spacing-16px) var(--spacing-16px) var(--spacing-40px);

    /*transition*/
    --tr: all .3s ease-in-out;
}

html,body,main{
    overflow-x: hidden;
}

main{
    background-color: var(--slate-300);
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    padding: var(--padding-main-mobile);
}

#abstract-art{
    position: absolute;
    top: 0;
    opacity: .7;
    z-index: 1;
}

.qr{
    z-index: 2;
    max-width: var(--card-max-width);
    background-color: var(--white);
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    padding: 1rem 1rem calc(40/16 * 1rem);
    border-radius: var(--br-20);
    position: relative;
    top: 0;
    transition: var(--tr);
    overflow-wrap: break-word;
    word-wrap: break-word; /*legacy*/
    hyphens: auto;
}

.qr-header{
    order: 2;
    max-width: var(--card-header-max-width);
}
.qr-header-heading{
    font-family: var(--ff);
    font-weight: var(--fw-bold);
    font-size: var(--fs-22px);
    line-height: var(--line-120);
    text-align: center;
    margin-bottom: var(--spacing-16px);
}
.qr-header-sub{
    font-family: var(--ff);
    font-size: var(--fs-15px);
    line-height: var(--line-140);
    letter-spacing: var(--letter-02);
    color: var(--slate-500);
    text-align: center;
}
.qr-fig{
    order: 1;
    margin-bottom: var(--spacing-24px);
}
.qr-fig img {
    border-radius: var(--br-10);
    transition: var(--tr);
}
.qr-fig img:hover {
    scale: 1.3;
    border-radius: 100%;
    cursor: pointer;
    box-shadow: 2px 2px 20px #017b91;
}
#fig-cap{
    position: absolute;
    top: 0;
    color: transparent;
}

@media screen and (min-width: calc(768/16 * 1rem)){
    main{
        padding: var(--padding-main-desktop);
    }
}