input {
    cursor: pointer;
}

#projectPageWindow {
    position: fixed;

    width: 100%;
    height: 101%;

    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    display: none;
    z-index: 10;

    overflow: hidden;

    transition-duration: 2000ms;

    border-color: var(--grey);
    border-style: solid;
    border-width: var(--border-width);
    box-shadow: 0 var(--shadowHeight) 0 currentColor;
}


#projectPageBackground {
    background-color: var(--black);
    /* Add stars in the black background */
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 101%;
}

#btClose {
    background-color: var(--red);
    color: var(--white);
    font-size: 1em;
    text-align: center;

    width: 50px;
    height: 50px;

    position: fixed;
    z-index: 15;
    scale: 1.5;
    right: 0%;
    top: 0%;
    transition-duration: 100ms;

    scale: 0.9;
    animation-fill-mode: forwards;
}


#projectPageContent {

    width: 70vw;
    height: 85vh;

    box-shadow: 0 var(--shadowHeight) 0 var();
    border-radius: var(--border-radius-big);


    overflow: visible;
    display: block;

    text-align: justify;

    transition-duration: 100ms;

    border-color: var(--grey);
    border-style: solid;
    border-width: var(--border-width);
    border-radius: var(--border-radius);

    position: fixed;

    left: 50%;
    top: 50%;
    transform: translate(-50%, 10%);

    z-index: 12;

    top: 0;

}


#projectPageContent iframe {
    border: none;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
}

@media screen and (orientation:portrait) {

    @keyframes projectPageContentFrames {

        from {
            transform: translate(-50%, 100%);
        }

        to {
            transform: translate(-50%, 5%);
        }
    }

    #projectPageContent {
        height: 90%;
        width: 90%;
        transform: translate(-50%, 5%);
    }

    #btClose {
        right: 5%;
    }
}