:root {
    --white: #F2F2F2;
    --black: #1E1F25;
    --deepBlue: #0d1d45;
    --orange: #c73c09;
    --lightOrange:#fe8d01;
    --deepGreen: #008000;
    --green: #00CE7A;
    --red: #CF2020;
    --grey: #606060;
    --lightGrey: #757575;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--deepBlue);
    color: var(--white);
    font-family: "Inter", sans-serif;
}

a {
    color: var(--orange);
}

a, button {
    cursor: pointer;
}



/* > Add Piece > Images collection forms add */
.addFormImages li {
    margin-bottom: 20px;
}

/* > Add Piece > Images collection forms display */
.displayFormImagesLabel {
    font-size: 150%;
    font-weight: 700;
}

#piece_form_images {
    margin-top: 10px;
    margin-bottom: 30px;
}

#piece_form_images > div {
    margin-top: 20px;
}



/* > Add Piece > Videos collection forms add */
.addFormVideos li {
    margin-bottom: 20px;
}

/* > Add Piece > Videos collection forms display */
.displayFormVideosLabel {
    font-size: 150%;
    font-weight: 700;
}

#piece_form_videos {
    margin-top: 10px;
}

#piece_form_videos > div {
    margin-top: 20px;
}



/* > Add Influencer > Socials collection forms add */
.addFormSocials li {
    margin-bottom: 20px;
}

/* > Add Influencer > Socials collection forms display */
.displayFormSocialsLabel {
    font-size: 150%;
    font-weight: 700;
}

#influencer_form_socials {
    margin-top: 10px;
}

#influencer_form_socials > div {
    margin-top: 20px;
}



/* Delete modal */
.openModal {
    width: 33%;
    margin: auto;
    padding: 25px;
    border: none;
    background: white;
    text-align: center;
    border-radius: 10px;
    user-select: none;
}

.openModal h3 {
    margin-bottom: 20px;
    font-weight: 700;
}

.openModal button {
    margin: 0 5px;
    padding: 2.5px 5px;
}

/* .openModal:focus {
    outline: none;
} */

.openModal::backdrop {
    background: rgb(0, 0, 0, 0.80);
}



/* Star scores */
.fullstars {
    font-size: 200%;
    color: var(--lightOrange);
}

.emptystars {
    font-size: 200%;
    opacity: 0.33;
}

.starsDisplay {
    display: flex;
    flex-wrap: nowrap;
    gap: 2.5px;
}

/* User star score vote */
.user-score-form {
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-score {
    display: flex;
    flex-direction: row-reverse;
    border: none;
    gap: 4px;
}

.user-score input {
    display: none;
}

.user-score label {
    cursor: pointer;
}

.user-score label:active {
    transform: scale(0.9);
    transition: 0.1s ease;
}

.user-score input:checked + label, 
.user-score input:checked + label ~ label {
    color: var(--lightOrange);
    opacity: 1;
}

.user-score label:hover,
.user-score label:hover ~ label {
    color: var(--lightOrange);
    opacity: 1;
}


/* User star score display */
.user-score-display-container { 
    width: fit-content;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.user-score-display-container h2, .user-score-form h2 {
    margin-bottom: 7.5px;
}

.user-score-display {
    display: flex;
    gap: 4px;
}

.user-score-submit, .user-score-reset {
    margin-top: 0.75em;
    width: fit-content;
    padding: 0.1em 0.2em;
    cursor: pointer;
}



/* Next links */
.nextLink {
    text-decoration: none;
    font-size: 125%;
    font-weight: 500;
    align-self: flex-start;
    color: var(--white);
}

.nextLink i:hover {
    text-decoration: underline;
}



/* Icon colors */
.fas {
    color: var(--red);
}

.fa-solid.fa-bookmark, .fa-regular.fa-bookmark {
    color: var(--white);
}



/* > > Accessibility trick for labels */
.accessLabel {
    position: absolute;
    visibility: hidden;
}



/* > > Position of the ReCaptcha badge */
.grecaptcha-badge {
    bottom: 80px !important;
}




@media screen and (max-width: 960px) {
    
    .openModal {
        width: 50%;
    }
}

@media screen and (max-width: 640px) {
    
    .openModal {
        width: 75%;
    }
}

@media screen and (max-width: 451px) {
    
    .openModal {
        width: 90%;
    }
}