:root {
    --almost-black: rgb(22, 21, 21);
    --dark-grey: rgb(41, 40, 40);
    --grey: rgb(101, 100, 100);
    --light-grey: grey;
    --off-white: rgb(227, 226, 226);
    --dark-purple: rgb(109, 36, 168);
    --light-purple: rgb(184, 100, 201);
    --dark-cyan: rgb(18, 118, 123);
    --cyan: rgb(28, 204, 214);
}

/* background color for website */
body {
    background: linear-gradient(0.28turn, var(--almost-black)10%, var(--dark-grey)20%, 
    var(--grey)50%, var(--dark-grey)80%, var(--almost-black)90%);
    color: white;
}

/* carousel on homepage */
.c-itm-custom {
    height: 65vh;
}

.c-img-custom {
    height: 100%;
    object-fit: cover;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////////// */

/* background color applied to apod divs */
.bg-custom {
    background: linear-gradient(var(--grey) 15%, var(--light-grey)50%, var(--grey)85%);
    border: 3px solid var(--dark-grey);
}

/* custom border applied to images on apod*/
.border-custom {
    border: 8px solid var(--dark-grey);
    border-radius: 2%;
}

/* current APOD shows pointer with mouse so users intuitavely know they can click */
#currentApodImg {
    cursor: pointer;
}

/* couldn't find the text-justify in bootstrap, so here we go */
.justifyMe {
    text-align: justify;
}

/* customization for the dropdown lists and buttons in the apod search div */
.border-select-custom {
    border: 3px solid var(--dark-grey);
    background-color: var(--off-white);
}

.border-select-custom:focus {
    border: 3px solid rgb(31, 227, 239)
}

.border-select-custom:disabled {
    background-color: var(--grey);
}

.btn-search-custom {
    border: 3px solid var(--dark-grey);
    background: linear-gradient(var(--dark-purple) 15%, var(--light-purple)50%, var(--dark-purple)85%);
} 

.btn-search-custom:hover {
    transition: 150ms ease-in;
    color: white;
    border: 3px solid var(--light-purple);
}

.btn-search-custom:disabled {
    border: 3px solid black;
    color: var(--almost-black);
    background: var(--grey)
}

.btn-save-custom {
    border: 3px solid var(--dark-grey);
    background: linear-gradient(var(--dark-cyan), var(--cyan), var(--dark-cyan));
}

.btn-save-custom:hover {
    transition: 150ms ease-in;
    color: white;
    border: 3px solid var(--cyan);
}

/* hover effect for the images */
.pic-div {
    position: relative;
}

#currentApodImg {
    opacity:1;
}

.hover-effects {
    transition: .4s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    cursor: pointer;
    pointer-events: none;
    background: rgba(101, 100, 100, 40%);
    border-radius: 10px;
    padding: 3px 10px;
    border: 3px solid rgba(41, 40, 40, 60%);
    color: rgba(255, 255, 255, 70%)
}

.pic-div:hover #currentApodImg {
    opacity: 0.7;
}

.pic-div:hover .hover-effects {
    opacity: 1;
}

/* custom shine taken from https://www.amitmerchant.com/shine-animation-on-hover-using-css/ */
.apod-img-custom {
    -webkit-mask-image: linear-gradient(15deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    mask-image: linear-gradient(15deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
    -webkit-mask-size: 800%;
    mask-size: 800%;
    -webkit-mask-position: 0;
    mask-position: 0;
}

.apod-img-custom:hover {
    transition: mask-position 1s ease,-webkit-mask-position 1s ease;
    -webkit-mask-position: 120%;
    mask-position: 120%;
    opacity: 1; 
}