@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap'); /* font p */
@import url('https://fonts.googleapis.com/css2?family=Rubik+Lines&display=swap'); /* font glitch h */
@import url('https://fonts.googleapis.com/css2?family=Jersey+10+Charted&display=swap'); /* font glitch p */
@import url('https://fonts.googleapis.com/css2?family=Rationale&display=swap'); /* code */


/* body */

:root {
    --color-body: #0d0d3a;
    --color-title: #FF2E74;
    --color-body-highlight: midnightblue;
    --color-body-link: #7A2B48;
    --color-dark: rgba(25, 25, 112, 0.75);
    --color-light: #80E3FF;
    --color-light-highlight: #FF8285;
    --color-transparent: rgba(25, 25, 112, 0.25);
    --font-code: "Rationale", sans-serif;
    --font-glitch-h: "Rubik Lines", "Orbitron", "Courier New", Courier, monospace;
    --font-glitch-p: "Jersey 10 Charted", "Orbitron", "Courier New", Courier, monospace;
    --font-p: "Orbitron", "Courier New", Courier, monospace;
}

body {
    background: var(--color-light);
}

.prp-text {
    font-family: var(--font-p);
    font-weight: 100;
    color: var(--color-body);
}

.prp-heading {
    font-family: var(--font-p);
}

.prp-link-color {
    color: var(--color-body-link);
}

.prp-link-color:hover {
    color: var(--color-title);
    transition: 1s;
}

.wallbreak {
    font-family: var(--font-glitch-p);
    font-size: 125%;
    color: var(--color-body-highlight);
}


/* nav */

.prp-nav-text {
    font-size: 100%;
}

.nav-collapse-a {
    font-size: medium;
    color: var(--color-light-highlight);
}

.prp-form-story-select {
    margin-top: -5px;
}


/* header */

.prp-header {
    background: url(../images/prp/header_background_image.webp) no-repeat 20% 40% / cover;
    max-width: 100vw;
    text-align: center;
    padding-bottom: 1vh;
    padding-top: 15vh;
}

.prp-title {
    font-family: var(--font-p);
    color: #ffffff;
    font-size: 100%;
    width: 100vw;
}


/* blurb */

.glitch-text {
    background: var(--color-transparent);
    border: outset var(--color-dark);
    border-radius: 5%;
    font-family: var(--font-glitch-p);
    font-size: 125%;
    color: var(--color-body-highlight);
    padding: 1%;
    margin: 1%;
}

.glitch-heading {
    font-family: var(--font-glitch-h);
    font-size: 150%;
    color: var(--color-body-highlight);
    position: relative;
    top: 0.5vw;
    float: unset;
    width: auto;
}

#amber-profile {
    background: url(../images/prp/amber.webp) no-repeat 30% 50% / cover;
    border-radius: 50%;
    min-height: 150px;
}


/* chapters */

.chapter {
    font-size: 150%;
    padding: 25vw 0 2vw 0;
    text-align: center;
}

/* chapter 1 */

.one {
    background: var(--color-transparent-dark) url(../images/prp/chapter1_background_image.webp) no-repeat center center / cover;
    color: var(--color-light-highlight);
}

/* chapter 2 */

.two {
    background: var(--color-transparent-dark) url(../images/prp/chapter2_background_image.webp) no-repeat center 69% / cover;
    color: var(--color-light-highlight);
}

/* chapter 3 */

.three {
    background: var(--color-transparent-dark) url(../images/prp/chapter3_background_image.webp) no-repeat center 69% / cover;
    color: var(--color-light);
}

/* chapter 4 */

.four {
    background: var(--color-transparent-dark) url(../images/prp/chapter4_background_image.webp) no-repeat center 40% / cover;
    color: var(--color-light-highlight);
}

/* chapter 5 */

.five {
    background: var(--color-transparent-dark) url(../images/prp/chapter5_background_image.webp) repeat center center / contain;
    color: #ffff00;
}


/* fact */

.fact-heading {
    font-family: var(--font-glitch-p);
    font-weight: normal;
    font-size: xx-large;
}


/* story */

.story {
    width: 90%;
    margin: auto;
}

/* code */

.code {
    font-family: var(--font-code);
    color: #ffff00;
    background: #000000;
    padding: 2px 5px;
    border-radius: 5px;
}


/* end of teaser  */

.end-button {
    background: var(--color-transparent-dark) url(../images/prp/buttons.webp) no-repeat center top / auto;
    border: none;
    display: inline-block;
    height: 2rem;
    width: 100%;
    color: white;
    font-family: var(--font-glitch-h);
    text-decoration: none;
    text-align: center;
}


/* form */

.form-prp-heading {
    color: var(--color-body-link);
}

.stars i:hover {
    color: var(--color-title);
}

.stars i.active {
    color: var(--color-body-link);
}

.form-prp-submit-button {
    font-size: 2rem;
    height: 3rem;
}

.form-border {
    border: 2px solid var(--color-body-link);
    border-top-color: var(--color-title);
    border-left-color: var(--color-title);
    border-radius: 5px;
}

.form-radio {
    appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    display: inline-block;
    background-color: var(--color-transparent-dark);
    outline: 2px solid var(--color-body-link);
}

.form-radio:hover {
    background-color: #ffffff;
}

.form-radio:checked {
    background-color: var(--color-title);
}

.form-checkbox {
    border-radius: 0%;
}


/* device media queries */
  
@media screen and (min-width: 1024px) {
    .prp-nav-text, .prp-heading {
      font-size: 200%;
    }

    .nav-chapter {
        padding-top: 15px;
    }

    .prp-header {
        padding-top: 40vh;
    }

    .story {
        width: 75%;
    }

    .end-button {
        background: var(--color-transparent-dark) url(../images/prp/buttons.webp) no-repeat center center / cover;
        color: white;
        text-decoration: none;
    }
    
    .end-button:hover {
        text-decoration: underline;
        color: var(--color-light-highlight);
        background: var(--color-transparent-dark) url(../images/prp/buttons.webp) no-repeat center top / cover;
        transition: 1s;
    }
}