:root {
    --source-sans: 'Source Sans Pro', sans-serif;
    --light: rgb(245, 245, 245);
    --white: rgb(255, 255, 255);
    --whitesmoke: rgb(216, 216, 216);
    --darker: rgb(0, 0, 0);
    --dark: rgb(33, 37, 41);
    --grey: rgb(52, 58, 64);
    --lightGrey: rgb(128, 128, 128);
    --orange: rgb(243, 191, 153);
    --gradient: linear-gradient(45deg, rgb(255, 250, 209), rgb(243, 191, 153), rgb(240, 185, 221), rgb(199, 185, 255), rgb(170, 209, 182));
    --black-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    --white-shadow: 0 0 6px #fff, rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
    /* closeBtn */
    --closeBtn: rgb(253, 179, 179);
    --closeBtnFocus: rgb(238, 127, 127);
    --closeBtnHover: rgb(241, 102, 102);
    --closeBtnActive: rgb(235, 82, 82);
    /* calendarBtn */
    --calendarBtn: rgb(240, 185, 221);
    --calendarBtnFocus: rgb(241, 167, 215);
    --calendarBtnHover: rgb(243, 152, 211);
    --calendarBtnActive: rgb(243, 135, 205);
    /* likeBtn */
    --likeBtn: rgb(255, 0, 0);
    /* inputDate */
    --inputDateFocus: rgb(181, 202, 249);
    /* planets */
    --sun: radial-gradient(#ff0, #f90);
    --planetA: #ff8;
    --planetB: linear-gradient(#00ff00, #09f, #09f);
    --planetC: radial-gradient(#ff9900, #ff4400);
}

html {
    font-family: var(--source-sans);
    font-size: 16px;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--light);
    min-height: 1vh;
}

header {
    display: flex;
    width: 100%;
}

nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: var(--gradient);
}

h1 {
    display: flex;
    margin: 1rem;
    font-size: 1.3rem;
}

header img {
    width: 1.875rem;
    height: 1.875rem;
    margin: 0 0.313rem 0.313rem 0;
}

.toggle {
    height: 0;
    width: 0;
    visibility: hidden;
    margin-left: auto;
}

label {
    display: flex;
    width: 3.125rem;
    height: 1.875rem;
    border-radius: 0.938rem;
    position: relative;
    cursor: pointer;
    margin: 0 1rem 1.5rem 1rem;
    background-color: var(--white);
}

label::after {
    content: '';
    position: absolute;
    width: 1.5rem;
    height: 1.438rem;
    border-radius: 50%;
    top: 0.188rem;
    left: 1.375rem;
    transition: .5s;
    background-color: var(--orange);
}

.toggle:checked+label::after {
    transform: translate(-1.125rem);
    background-color: var(--darker);
}

.btn {
    display: flex;
    padding: .60rem;
    border: none;
    border-radius: .5rem;
    color: var(--darker);
}

.input {
    cursor: pointer;
    display: none;
    width: 12rem;
    height: 2.3rem;
    padding: .30rem;
    margin: 1rem 0 1rem 1rem;
    border: none;
    border-radius: .5rem;
    background-color: var(--light);
    color: var(--lightGrey);
}

.input:focus {
    outline: none;
    box-shadow: 0 0 0 0.188rem var(--inputDateFocus);
}

.input:hover {
    background-color: var(--white);
}

.close-btn {
    cursor: pointer;
    display: none;
    margin: 1rem .5rem 1rem .5rem;
    background-color: var(--closeBtn);
}

.close-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.188rem var(--closeBtnFocus);
}

.close-btn:hover {
    background-color: var(--closeBtnHover);
}

.close-btn:active {
    background-color: var(--closeBtnActive);
    color: var(--white);
}

button,
label,
input {
    box-shadow: var(--black-shadow);
}

#calendar-btn {
    cursor: pointer;
    background-color: var(--calendarBtn);
}

#calendar-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.188rem var(--calendarBtnFocus);
}

#calendar-btn:hover {
    background-color: var(--calendarBtnHover);
}

#calendar-btn:active {
    background-color: var(--calendarBtnActive);
    color: var(--white);
}

.search-date {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.spaceData {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 3%;
}

.spaceData__container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: .75rem 0;
    width: 100%;
    border-radius: .50rem;
    background-color: var(--white);
    box-shadow: var(--black-shadow);
}

.card_details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
    width: 100%;
}

.card_details * {
    margin: .3rem;
}

.spaceData__container__img {
    min-height: 12.5rem;
    max-height: 25rem;
    width: 100%;
    max-width: 37.5rem;
    border-radius: .50rem .50rem 0 0;
    box-shadow: var(--black-shadow);
}


/* btn like */

.btn-like {
    padding: .3rem;
    margin: .6rem;
    width: 3rem;
    color: var(--lightGrey);
    background-color: var(--white);
    border: 0.01rem solid var(--whitesmoke);
    border-radius: .5rem;
    box-shadow: var(--black-shadow);
    cursor: pointer;
    transition: .2s;
}

.btn-liked {
    padding: .3rem;
    color: var(--likeBtn);
    background-color: var(--white);
    border-radius: .5rem;
    box-shadow: var(--black-shadow);
}

.btn-like:focus,
.btn-liked:focus {
    outline: none;
    box-shadow: 0 0 0 0.125rem var(--whitesmoke);
}

.btn-like:hover,
.btn-liked:hover {
    background-color: var(--light);
}

.btn-like:active,
.btn-liked:active {
    background-color: var(--whitesmoke);
    color: var(--white);
}


/* dark mode */

.dark {
    background-color: var(--dark);
}

.dark nav {
    background: var(--grey);
}

.dark .orbit {
    border: 0.063rem solid var(--white);
}

.dark h1,
.dark h3,
.dark p {
    color: var(--light);
}

.dark button,
.dark #input-date,
.dark label {
    box-shadow: var(--white-shadow);
}

.dark #input-date:focus,
.dark #close-btn:focus,
.dark #calendar-btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.188rem var(--whitesmoke);
}

.dark #input-date:hover {
    background-color: var(--white);
}

.dark #close-btn {
    color: var(--white);
    background-color: var(--dark);
    box-shadow: var(--white-shadow);
}

.dark #close-btn:hover {
    background-color: var(--grey);
}

.dark #close-btn:active {
    background-color: var(--white);
    color: var(--black);
}

.dark #calendar-btn {
    background-color: var(--light);
}

.dark #calendar-btn:hover {
    background-color: var(--whitesmoke);
}

.dark #calendar-btn:active {
    background-color: var(--dark);
    color: var(--white);
}

.grey {
    background-color: var(--grey);
    box-shadow: var(--white-shadow);
}


/* loading page */

.loader {
    height: 100%;
    width: 100%;
    position: fixed;
    background-color: inherit;
}

.sun {
    height: 3.125rem;
    width: 3.125rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    background: var(--sun);
}

.planet {
    position: absolute;
    z-index: 100;
    border-radius: 50%;
}

.planetA {
    left: 1.25rem;
    height: 0.813rem;
    width: 0.813rem;
    background-color: var(--planetA);
    border: 0.031rem solid var(--lightGrey);
}

.planetB {
    left: 1.438rem;
    height: 1.25rem;
    width: 1.25rem;
    background: var(--planetB);
    -webkit-animation: rotation 1s infinite linear;
    animation: rotation 1s infinite linear;
}

.planetC {
    left: 3.063rem;
    height: 1.063rem;
    width: 1.063rem;
    background: var(--planetC);
}

.orbit {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: transparent;
    border-radius: 50%;
    border: 0.063rem solid var(--dark);
}

.orbitA {
    height: 6.25rem;
    width: 6.25rem;
    -webkit-animation: rotation 2s infinite linear;
    -moz-animation: rotation 2s infinite linear;
    animation: rotation 2s infinite linear;
}

.orbitB {
    height: 9.375rem;
    width: 9.375rem;
    -webkit-animation: rotation 3s infinite linear;
    -moz-animation: rotation 3s infinite linear;
    animation: rotation 3s infinite linear;
}

.orbitC {
    height: 12.5rem;
    width: 12.5rem;
    -moz-animation: rotation 6s infinite linear;
    -webkit-animation: rotation 6s infinite linear;
    animation: rotation 6s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(359deg);
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

@-moz-keyframes rotation {
    from {
        -moz-transform: rotate(0deg);
    }
    to {
        -moz-transform: rotate(359deg);
    }
}

@media screen and (min-width: 0px) and (max-width: 437px) {
    .loader {
        margin-top: 80%;
    }
}

@media screen and (min-width: 438px) and (max-width: 1024px) {
    .loader {
        margin-top: 60%;
    }
}

@media screen and (min-width: 1025px) {
    .loader {
        margin-top: 40%;
    }
}