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

:root {
    --clr-light-shade: #f9f6f7;
    --clr-light-accent: #a8a246;
    --clr-main-brand: #659fbb;
    --clr-dark-accent: #8955ac;
    --clr-dark-shade: #0b5567;

    --clr-primary: rgba(13, 110, 139, 0.75);
    --clr-overlay: rgba(24, 39, 51, 0.85);

    --font-name: 'Raleway', sans-serif;

    --menu-speed: 0.75s;

    --el-wide: 70rem;
    --el-narrow: 40rem;
    --el-width: 54rem;
    --el-shadow: 2px 2px 5px rgba(25, 24, 26, 0.7);
}

/*------------------------------------*/
/*           Global Styles            */
/*------------------------------------*/
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    background: url(../img/boy-1300226.svg) no-repeat center center/cover;
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}

body {
    /*  background-color: var(--clr-light-shade); */
    color: var(--clr-dark-shade);
    font-family: var(--font-name);
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

header {
    display:block;
    margin:30% auto;
    width:420px;
}

h2, h3 {
    text-align: center;
}

main h1 {
    color: var(--clr-dark-shade);
}

main {
    background-color: #cdcdcd;
    height: 100%;
    margin: 0 auto;
    max-width: 45rem;
    opacity: 0.7;
    padding: 1rem;
}

footer {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
}

footer p {
    margin-bottom: 0.5rem;
}