*
{
    --tomortec-blue: #315a78;
    --tomortec-universe: #181d4b;
    --tomortec-night: #2b4490;
    --tomortec-atmosphere: #0485b7;
    --tomortec-horizon: #90d7ec;
    --tomortec-sun: #ffc20e;
}

body
{
    /*background-color: var(--tomortec-blue);*/
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    margin: 0;
    overflow-x: hidden;

    font-family: 'PingFang SC', 'Myriad Pro', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
}

html, body 
{
    width: 100vw;
    overflow-x: hidden;
}

a
{
    color: white;
    font-weight: bold;
    text-decoration: none;
}

button
{
    background-color: transparent;
    border: none;
}

progress 
{
    position: fixed;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    appearance: none;

    width: 100%;
    height: 20px;

    border: none;
    background: transparent;

    z-index: 6;
}

progress::-webkit-progress-bar 
{
    background: transparent;
}

progress::-webkit-progress-value 
{
    /*background: linear-gradient(to left, #db38b5,#01b3e3,#25ce7b,#fdc741,#ff6b01,#fc4236);*/
    background-image: url(../src/Background-Rocket-rotated.svg);
    background-color: transparent;
    background-position: right center;
    background-size: 30px 30px;
    background-repeat: no-repeat;

}

progress::-moz-progress-bar 
{
    /*background: linear-gradient(to left, #db38b5,#01b3e3,#25ce7b,#fdc741,#ff6b01,#fc4236);*/
    background-image: url(../src/Background-Rocket-rotated.svg);
    background-color: transparent;
    background-position: right center;
    background-size: 30px 30px;
    background-repeat: no-repeat;
}

.grayPageInMemoryOfChineseMartyrs
{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: gray(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

.titleContainer
{
    position: absolute;
    top: 7vh;
    left: 15vw;

    color: white;
    font-weight: bold;

    user-select: none;
    -moz-user-select: none;

    z-index: 5;
}

@media only screen and (max-width: 768px) {
    .titleContainer
    {
        min-width: 16rem;
        width: 50vw;
        font-size: 2rem;
    }
}

@media only screen and (min-width: 768px) {
    .titleContainer
    {
        min-width: 20rem;
        width: 50vw;
        font-size: 2.5rem;
    }
}

#firstProjectionTrigger
{
    position: absolute;

    /*background-image: url(../src/Icon-nextpage.svg);*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    cursor: pointer;
    z-index: 3;
}

@media only screen and (max-width: 768px) {
    #firstProjectionTrigger
    {
        width: 10vmin;
        height: 10vmin;

        top: calc(98vh - 10vmin);
        top: calc(calc(var(--vh, 1vh) * 98) - 10vmin);
        left: calc(50vw - 5vmin);
    }
}

@media only screen and (min-width: 768px) {
    #firstProjectionTrigger
    {
        width: 5vmin;
        height: 5vmin;
        
        /* here's a bug if I use bottom */
        top: calc(98vh - 5vmin);
        left: calc(50vw - 2.5vmin);
    }
}

#firstProjectionTrigger svg
{
    width: 100%;
    height: 100%;
}

.backgroundColor
{
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    
    z-index: -5;
}

.tipContainer
{
    position: absolute;

    background-color: white;
    font-weight: bold;

    /* it is set temporarily */
    opacity: 0;

    z-index: 3;

    cursor: pointer;
    user-select: none;
    -moz-user-select: none;
}

@media only screen and (max-width: 768px) {
    .tipContainer
    {
        bottom: calc(12vh - 100vh);
        bottom: calc(var(--vh, 1vh) * (-90));
        left: calc(10vw - 4px);
        width: 80vw;

        padding: 8px;
        border-radius: 10px;

        text-align: center;
    }
}

@media only screen and (min-width: 768px) {
    .tipContainer
    {
        /* the base position has changed */
        bottom: -95vh;
        left: 2vw;
        width: 20vw;

        padding: 10px;

        border-radius: 8px;
        text-align: center;
    }
}

#scrollableProjection
{
    min-height: 500vh;
}

.projection
{
    position: absolute;
}

/* -------- BACKGROUNDS --------- */

#iconContainer
{
    position: absolute;
    top: calc(50vh - 45vmin);
    left: calc(50vw - 45vmin);

    height: 90vmin;
    width: 90vmin;
}

#rocketContainer
{
    position: absolute;
    top: calc(50vh - 7.5vmin);
    left: calc(50vw - 7.5vmin);

    /* the final ratio of the size of the rocket and the planet
     *  should be 0.3584,
     *  but now is (15*0.7/90)=0.1166, therefore, it should scale 0.3584/0.1166=3.0738
    */
    height: 15vmin;
    width: 15vmin;

    z-index: -1;
}

@media only screen and (max-width: 768px) {
    #iconContainer {
        top: calc(var(--vh, 1vh) * 50 - 45vmin);
    }

    #rocketContainer {
        top: calc(var(--vh, 1vh) * 50 - 7.5vmin);
    }
}

#loadingTitleContainer
{
    position: absolute;
    left: calc(50vw - 5rem);
    width: 10rem;
    height: 5vmin;

    color: white;
    font-size: 2rem;
    font-weight: bold;

    text-align: center;

    user-select: none;
    -moz-user-select: none;
}

@media only screen and (max-width: 768px) {
    #loadingTitleContainer
    {
        top: calc(75vh - 5vmin);
        top: calc(var(--vh, 1vh) * 75 - 5vmin);
    }
}

@media only screen and (min-width: 768px) {
    #loadingTitleContainer
    {
        top: calc(90vh - 5vmin);
    }
}

#loadingTitleContainer progress
{
    height: 10px;

    background-color: #368DAE;
    border-radius: 5px;
}

@media only screen and (max-width: 768px) {
    #loadingTitleContainer progress
    {
        top: calc(82vh - 5vmin);
        top: calc(var(--vh, 1vh) * 82 - 5vmin);
        left: 10vw;    
        width: 80vw;
    }
}

@media only screen and (min-width: 768px) {
    #loadingTitleContainer progress
    {
        top: calc(90vh + 2vmin);
        left: 35vw;    
        width: 30vw;
    }
}

#loadingTitleContainer progress::-webkit-progress-bar 
{
    background-color: #368DAE;
    border-radius: 5px;

}

#loadingTitleContainer progress::-webkit-progress-value 
{
    /*background: linear-gradient(to left, #db38b5,#01b3e3,#25ce7b,#fdc741,#ff6b01,#fc4236);*/
    background-image: none;
    background-color: #f3bf56;
    border-radius: 5px;
}

#loadingTitleContainer progress::-moz-progress-bar 
{
    /*background: linear-gradient(to left, #db38b5,#01b3e3,#25ce7b,#fdc741,#ff6b01,#fc4236);*/
    background-image: none;
    background-color: #f3bf56;
    border-radius: 5px;
}

@media only screen and (max-width: 768px) {
    #membersBackground
    {
        overflow-x: hidden;
    }

    #membersBackground svg 
    {
        transform: scale(1.5);
        transform-origin: top;
    }
}

#membersBackground
{
    background-image: linear-gradient(var(--tomortec-universe), var(--tomortec-night));
}

.backgroundRocket
{
    opacity: 0;
}

#projectsBackground
{
    background-image: linear-gradient(var(--tomortec-night), var(--tomortec-atmosphere));
}

.projectsBackgroundRocket
{
    position: absolute;
    height: 25vmin;
    width: 25vmin;

    cursor: pointer;
}

#projectsBackgroundRocketLeft
{
    top: calc(55vh - 12.5vmin);
    left: calc(30vw - 12.5vmin);
}

#projectsBackgroundRocketMiddle
{
    top: calc(40vh - 12.5vmin);
    left: calc(50vw - 12.5vmin);
}

#projectsBackgroundRocketRight
{
    top: calc(55vh - 12.5vmin);
    right: calc(30vw - 12.5vmin);
}

.projectsBackgroundRocketSmoke
{
    position: absolute;
    width: 25vmin;
    height: 50vmin;
}

#projectsBackgroundRocketSmokeLeft
{
    top: calc(55vh + 12.5vmin);
    left: calc(30vw - 12.5vmin);
}

#projectsBackgroundRocketSmokeMiddle
{
    top: calc(40vh + 12.5vmin);
    left: calc(50vw - 12.5vmin);
}

#projectsBackgroundRocketSmokeRight
{
    top: calc(55vh + 12.5vmin);
    right: calc(30vw - 12.5vmin);
}

#rewardsBackground
{
    background-image: linear-gradient(var(--tomortec-atmosphere), var(--tomortec-horizon));
}

#rewardsBackground svg
{
    margin-top: 10vh;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    #rewardsBackground
    {
        overflow-x: hidden;
    }

    #rewardsBackground svg {
        transform: scale(1.5);
        margin-top: 25vh;
    }
}

#aboutBackground
{
    background-image: linear-gradient(var(--tomortec-horizon), var(--tomortec-sun));
}

#aboutBackground svg
{
    position: absolute;
    bottom: 0;
}

.TowerRotatable
{
    transform-origin: 20% 90%;
}

/* -------------------- BODY OF PROJECTIONS ------------------------ */

#membersPanel
{
    display: grid;
    /* grid-template-columns: repeat(3, 1fr); */
    grid-auto-rows: minmax(0, 1fr);
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    position: absolute;
    top: 20vh;
    left: 12.5vw;

    width: 75vw;
    /* height: 60vh; */

    text-align: center;
    opacity: 0;

    overflow-y: visible;
}

#memberInfoCard
{
    position: absolute;

    background-color: white;

    border-radius: 12px;
    z-index: 3;
}

@media only screen and (min-width: 768px) {
    #membersPanel
    {
        width: 50vw;
        top: 25vh;
        left: 25vw;
    }

    #memberInfoCard
    {
        top: 25vh;
        left: 20vw;

        width: 60vw;
        height: 50vh;
    }
}

@media only screen and (max-width: 768px) {
    #membersPanel
    {
        top: 25vh;
    }

    #memberInfoCard
    {
        top: 25vh;
        top: calc(var(--vh, 1vh) * 25);
        left: 10vw;

        width: 80vw;
        /* height: 65vh; */
        height: calc(var(--vh, 1vh) * 55);
    }
}

#memberInfoCardBackground
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;

    backdrop-filter: blur(8px);
    cursor: pointer;

    z-index: 2;
}

#memberInfoCardAvatar
{
    width: 16vh;
    height: 16vh;
    margin: 0 auto;

    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
    transform: translateY(-8vh);
    box-shadow: 0 8px 8px var(--tomortec-night);
    border-radius: 50%;
}

#memberInfoCardContent
{
    width: 80%;
    height: 80%;
    margin: 0 auto;
    transform: translateY(-8vh);
    padding: 1rem 0;

    user-select: none;
}

@media only screen and (max-width: 768px) {
    .memberInfoPanel
    {
        margin: 15px 5px;
        align-items: center;
    }

    .memberInfoAvatar
    {
        width: 22vw;
        aspect-ratio: 1;
    }
}

@media only screen and (min-width: 768px) {
    .memberInfoPanel
    {
        margin: 5px;
        align-items: center;
    }

    .memberInfoAvatar
    {
        width: calc(15vw - 2rem);
        max-width: 16vh;
        aspect-ratio: 1;
    }
}

.memberInfoPanel
{
    display: flex;
    flex-direction: column;
}

.memberInfoAvatar
{
    background-color: white;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 50%;

    cursor: pointer;
}

/* @media only screen and (max-width: 768px) {
    .memberInfoName
    {
        display: none;
    }
} */

.memberInfoName
{
    color: white;
    font-size: 1.5rem;
    font-weight: bold;

    user-select: none;
    -moz-user-select: none;
    cursor: pointer;
}

#projectsContainer
{
    position: absolute;
    width: 60vw;
    height: 60vh;

    /* minus the width of paddings */
    top: calc(20vh - 1rem);
    left: calc(20vw - 2rem);
    
    color: var(--tomortec-atmosphere);
    background-color: white;
    border-radius: 12px;
    padding: 1rem 2rem;
    box-shadow: 0 0 16px var(--tomortec-atmosphere);

    text-align: center;
    overflow-y: scroll;

    z-index: 2;
}

.projectInfoPanel
{
    display: inline-block;

    padding: 5px;
    margin: 5px;

    word-break: break-word;
}

.projectInfoPanelTitle
{
    font-size: 1.5rem;
    font-weight: bold;
}

.projectInfoPanelYear
{
    font-size: 0.8rem;
    user-select: none;
    -moz-user-select: none;
}

@media only screen and (max-width: 768px) {
    .projectInfoPanelDescription
    {
        font-size: 0.8rem;
    }
}

@media only screen and (min-width: 768px) {
    .projectInfoPanelDescription
    {
        font-size: 1.2rem;
    }    
}

#rewardsContainer
{
    position: absolute;
    width: 60vw;
    height: 60vh;

    top: 20vh;
    left: 20vw;
    
    color: var(--tomortec-atmosphere);
    background-color: white;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 0 16px var(--tomortec-horizon);

    text-align: center;
    overflow-y: scroll;

    z-index: 2;
}

#rewardsImage
{
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (max-width: 768px) {
    #rewardsImage
    {
        background-image: url(../src/Image-Rewards-mobile.png);
    }
}

@media only screen and (min-width: 768px) {
    #rewardsImage
    {
        background-image: url(../src/Image-Rewards.png);
    }
}

@media only screen and (max-width: 768px) {
    #aboutContainer
    {
        top: 25vh;
        top: calc(var(--vh, 1vh) * 25);

        font-size: 1.5rem;
    }
}

@media only screen and (min-width: 768px) {
    #aboutContainer
    {
        top: 30vh;

        font-size: 2rem;
    }
}

#aboutContainer
{
    position: absolute;
    width: 60vw;

    left: 20vw;

    color: white;
    font-weight: bold;

    text-align: center;

    z-index: 1;
}