/* 
CSS is how you can add style to your website, such as colors, fonts, and positioning of your
HTML content. To learn how to do something, just try searching Google for questions like
"how to change link color."
*/


/* 
Brand kit colours

Primary
#2D2145 Purple Midnight
#403A5C Dusky Violet
#828282 Silver Stars
#FFFFFF Cloud White
#000000 Inky Black

Secondary/Accents
#00F7FD Cyan Skies
#FDF51B Moon's Yellow
#08E34E Luminous Lime

Tertiary
#B53CD3 Magic Magenta
#FD5206 Crimson Gleam


Brand Kit Fonts
LOGO: Annie Use Your Telescope
HEADER: Poppins Semibold
BODY SANS SERIF: Ubuntu Medium
BODY SERIF: Sedan
*/

@property --purple {
    syntax: "<color>";
    inherits: false;
    initial-value: #2D2145;
}

@property --purple-optical {
    syntax: "<color>";
    inherits: false;
    initial-value: #3d266b;
}

@property --violet {
    syntax: "<color>";
    inherits: false;
    initial-value: #403A5C;
}

@property --silver {
    syntax: "<color>";
    inherits: false;
    initial-value: #828282;
}

@property --silver-50 {
    syntax: "<color>";
    inherits: false;
    initial-value: #DDDDDD;
}

@property --white {
    syntax: "<color>";
    inherits: false;
    initial-value: #FFFFFF;
}

@property --black {
    syntax: "<color>";
    inherits: false;
    initial-value: #000000;
}

@property --cyan {
    syntax: "<color>";
    inherits: false;
    initial-value: #00F7FD;
}

@property --yellow {
    syntax: "<color>";
    inherits: false;
    initial-value: #FDF51B;
}

@property --lime {
    syntax: "<color>";
    inherits: false;
    initial-value: #08E34E;
}

@property --magenta {
    syntax: "<color>";
    inherits: false;
    initial-value: #B53CD3;
}

@property --crimson {
    syntax: "<color>";
    inherits: false;
    initial-value: #FD5206;
}


body {
    background-color: var(--purple);
    font-family: "Ubuntu", sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wrapper {
    margin: 1rem;
    padding: 1rem;
    border-radius: 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Poppins", sans-serif;
    line-height: 3rem;
}

hr {
    margin: 2rem 0 0 0;
    height: .3em;
    border-radius: .5rem;
    border: 0 none;
    /* opacity: .5; */
    background: linear-gradient(to right,
            var(--crimson) 0%,
            var(--yellow) 25%,
            var(--lime) 50%,
            var(--cyan) 75%,
            var(--magenta) 100%);
}

hr.subtle {
    margin: 2rem 0 0 0;
    height: .3em;
    border-radius: .5rem;
    border: 0 none;
    background: linear-gradient(to right,
            rgba(from var(--crimson) r g b / 20%) 0%,
            rgba(from var(--yellow) r g b / 20%) 25%,
            rgba(from var(--lime) r g b / 20%) 50%,
            rgba(from var(--cyan) r g b / 20%) 75%,
            rgba(from var(--magenta) r g b / 20%) 100%);
}

header h1 {
    font-family: "Annie Use Your Telescope", cursive;
    font-weight: 600;
    font-style: normal;
    font-size: 2em;
    line-height: 3rem;
}

/* settings for background box behind body text */
#wrapper {
    background-color: var(--silver-50);
    border-radius: 2rem;
}

/* link color settings for hyperlinks in different states. */
#wrapper a {
    color: var(--purple-optical)
}

#wrapper a:visited {
    color: var(--violet);
}

#wrapper a:focus,
#wrapper a:active,
#wrapper a:hover {
    color: var(--magenta);
}

#wrapper a:focus {
    outline: 3px solid var(--magenta);
}

img#logo {
    width: 600px;
    max-width: 100%;
}

/* Where to listen buttons */
#contentlinks ul {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
}

#contentlinks ul li {
    list-style-type: none;
    padding: 10px;
    list-style-position: inside;
    text-align: center;
}

#contentlinks img {
    height: 3rem;
}

#contentlinks a:hover {
    opacity: .8;
}

/* Social Media Settings */
#patreon {
    display: inline-block;
    background-color: var(--purple);
    padding: 1rem;
    border-radius: 1rem;
    width: 15rem;
}

a#patreon:hover {
    opacity: 1;
    background-color: var(--violet);
}

#patreon img {
    height: 2rem;
    padding: 0 .5rem;
}

#nifty-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

.nifty-icons,
.nifty-icons:visited,
.nifty-icons:focus,
.nifty-icons:active {
    text-decoration: none;
    border: 0;
    width: 3rem;
    height: 3rem;
    padding: .5rem;
    margin: .5rem;
    color: #ffffff;
    border-radius: 15%;
    background-color: var(--purple);
}

.nifty-icons:hover {
    background-color: var(--violet);
}

.nifty-icon-svg {
    display: block;
    fill: var(--white);
}

.nifty-icons-small {
    height: 2rem;
    width: 2rem;
}

#team ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

#team li {
    list-style-type: none;
    margin: 0;
    padding: 1rem;
}


/* Navigation Styling */

nav {
    border-radius: 1rem;
    background: linear-gradient(to right,
            rgba(from var(--crimson) r g b / 10%) 0%,
            rgba(from var(--yellow) r g b / 10%) 25%,
            rgba(from var(--lime) r g b / 10%) 50%,
            rgba(from var(--cyan) r g b / 10%) 75%,
            rgba(from var(--magenta) r g b / 10%) 100%);
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav li {
    line-height: 1rem;
    margin: .5rem;
    padding: .5rem;
    border-radius: .5rem;
}

/* Bios Page Styling */
.bio {
    text-align: left;
}

.bio-text {
    width: 100%;
}

.bio img {
    margin: 0 1rem 1rem 0;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); 
    width: 100%;
}

.bio h3 {
    flex-wrap: wrap;
}

.bio h3 div {
    width: 100%;
}

.bio h3 .name {}

.bio h3 .pronouns {
    color: var(--violet);
}

.bio h3 .role {
    color: var(--purple);
}

.bio h4 {
    line-height: 2rem;
}

/* Contact Page Styling */
#contact-form-iframe {
    width: 100%
}


/* Breakpoints
Mobile	320px - 480px	Smartphones (portrait) - DEFAULT - work with this in the code above.
Tablet	481px - 768px	Tablets (portrait), small laptops
Small Desktop	769px - 1024px	Tablets (landscape), smaller laptops
Large Desktop	1025px and up	Desktop monitors, larger laptops
*/

/* Small tablets and larger mobile devices (481px - 768px) */
@media (min-width: 481px) {
    /* body {background-color: red} */

    body {
        font-size: 18px;
    }

    #wrapper {
        margin: 1rem;
        min-width: 60vw;
        padding: 1rem;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 3rem;
    }

    header h1 {
        font-size: 2.5rem;
    }

    .bio-image-text {
        display: flex;
    }

    .bio img {
        width: 10rem;
    }

    .bio h3 {
        display: flex;
        justify-content: space-between;
    }

    .bio h3 div {
        width: auto;
    }
}

/* Tablets and small laptops (769px - 1024px) */
@media (min-width: 769px) {
    /* body {background-color: orange}   */

    header h1 {
        font-size: 4rem;
        line-height: 5rem;
    }
}

/* Large desktops and high-resolution screens (1025px and up) */
@media (min-width: 1025px) {
    /* body {background-color: yellow} */

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        line-height: 5rem;
    }

    #wrapper {
        margin: 2rem;
        width: 60vw;
        padding: 2rem;
    }

    .bio img {
        width: 15rem;
    }
}

/* Extra-large screens (1440px and up) */
@media (min-width: 1440px) {
    /* body {background-color: green} */

    #wrapper {
        margin: 2rem;
        width: 60vw;
        padding: 2rem;
    }
}