@import "generic.css";
@import "desktop.css?rev=20250428" only screen and (min-width: 901px);
@import "phone.css?rev=20250428" only screen and (max-width: 900px);

:root
{
/*
    --wp--preset--font-size--small: clamp(.75rem, 0.75rem + ((1vw - 0.2rem) * 0.172), .875rem);
    --wp--preset--font-size--medium: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.552), 1.5rem);
    --wp--preset--font-size--large: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 0.69), 2rem);
    --wp--preset--font-size--x-large: clamp(2rem, 2rem + ((1vw - 0.2rem) * 1.103), 2.8rem);
    --wp--preset--font-size--x-small: clamp(.7rem, 0.7rem + ((1vw - 0.2rem) * 0.138), .8rem);
    --wp--preset--font-size--base: clamp(.875rem, 0.875rem + ((1vw - 0.2rem) * 0.172), 1rem);
    --wp--preset--font-size--medium-small: clamp(1.05rem, 1.05rem + ((1vw - 0.2rem) * 0.276), 1.25rem);
    --wp--preset--font-size--xx-large: clamp(2.1rem, 2.1rem + ((1vw - 0.2rem) * 1.241), 3rem);
    --wp--preset--font-size--xxx-large: clamp(3rem, 3rem + ((1vw - 0.2rem) * 2.483), 4.8rem);
    --wp--preset--font-family--primary: "Montserrat", sans-serif;
    --wp--preset--spacing--20: 0.44rem;
    --wp--preset--spacing--30: 0.67rem;
    --wp--preset--spacing--40: 1rem;
    --wp--preset--spacing--50: 1.5rem;
    --wp--preset--spacing--60: 2.25rem;
    --wp--preset--spacing--70: 3.38rem;
    --wp--preset--spacing--80: 5.06rem;
    --wp--preset--spacing--x-small: clamp(.125rem, 0.625vw, .25rem);
    --wp--preset--spacing--small: clamp(.5rem, 2.5vw, 1rem);
    --wp--preset--spacing--medium: clamp(1.5rem, 4vw, 2rem);
    --wp--preset--spacing--large: clamp(2rem, 5vw, 3rem);
    --wp--preset--spacing--x-large: clamp(3rem, 7vw, 5rem);
    --wp--preset--spacing--xx-large: clamp(4rem, 9vw, 7rem);
    --wp--preset--spacing--xxx-large: clamp(3rem, 10vw, 9rem);
    --wp--preset--spacing--xxxx-large: clamp(6rem, 14vw, 13rem);
    --wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
    --wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
    --wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);
    --wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);
    --wp--custom--font-weight--thin: 100;
    --wp--custom--font-weight--extra-light: 200;
    --wp--custom--font-weight--light: 300;
    --wp--custom--font-weight--regular: 400;
    --wp--custom--font-weight--medium: 500;
    --wp--custom--font-weight--semi-bold: 600;
    --wp--custom--font-weight--bold: 700;
    --wp--custom--font-weight--extra-bold: 800;
    --wp--custom--font-weight--black: 900;
    --wp--custom--line-height--none: 1;
    --wp--custom--line-height--tight: 1.1;
    --wp--custom--line-height--snug: 1.2;
    --wp--custom--line-height--normal: 1.5;
    --wp--custom--line-height--relaxed: 1.625;
    --wp--custom--line-height--loose: 2;
    --wp--custom--line-height--body: calc(1px + 2ex + 7px);
*/



}

body
{
    margin:                                 0;
    font-family:                            "Montserrat", sans-serif;
    color:                                  #333;
}

.author h1
{
    padding:                                4px 0;
    margin:                                 0 0;
    font-size:                              clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 0.69), 2rem);
    font-weight:                            600;
    z-index:                                500;
}

.author h2
{
    padding:                                0 0;
    margin:                                 0 0;
    font-size:                              clamp(.875rem, 0.875rem + ((1vw - 0.2rem) * 0.172), 1rem);
    font-weight:                            500;
    z-index:                                500;
}

.story h1
{
    padding:                                4px 0;
    margin:                                 16px 0;
    font-size:                              clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 0.69), 2rem);
    font-weight:                            500;
    z-index:                                500;
}

.story h2
{
    padding:                                4px 0;
    margin:                                 12px 0;
    font-size:                              clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.552), 1.5rem);
    font-weight:                            400;
    z-index:                                500;
}

.story h3
{
    padding:                                4px 0;
    margin:                                 12px 0;
    font-size:                              clamp(.95rem, 0.95rem + ((1vw - 0.2rem) * 0.172), 1.3rem);
    font-weight:                            100;
    line-height:                            clamp(1.25rem, 4vw, 1.5rem);
    z-index:                                500;
    font-weight:                            400;
}

.story li
{
    padding:                                1px 0;
    margin:                                 1px 0;
    font-size:                              clamp(.95rem, 0.95rem + ((1vw - 0.2rem) * 0.172), 1.3rem);
    font-weight:                            100;
    line-height:                            clamp(1.25rem, 4vw, 1.5rem);
    z-index:                                500;
    font-weight:                            400;
}

.story img
{
    box-shadow:                             2px 2px 2px 2px #333;
    margin:                                 8px 0px;
    border:                                 1px solid;
    border-color:                           #333;
}

.foot
{
    padding:                                16px 0;
    margin:                                 16px 0;
    text-align:                             center;
    width:                                  100%;
    background:                             #333;
    color:                                  #AAF;
    margin:                                 0;
}

.foot h1
{
    font-size:                              clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.552), 1.5rem);
    font-weight:                            400;
}

/*

The menu should look like www.devoteam.com

On desktop, there is a logo, followed by the name followed by the dropdown selection
On mobile, there is a logo, followed by the name and than a hamburger menu
    When you press the hamburger, the dropdown selections show up

On desktop, information left of the actual contents is shown such as author, share and stuff
On mobile, this is shown at the bottom





*/