/* Web, Table, Mobile Breakpoints */

/* iPhone SE */
@media (min-width: 600px) {

    /* Door */

    .door {
        width: 34vw;
        margin-left: -20vw;
        margin-top: 9vh;
        z-index: 10;
    }

    .door:hover {
        cursor: pointer;
    }


    #doorOpen {
        visibility: hidden;
        transition-duration: .5s;
    }


    /* message window  */

        #icon {
            height: 6vh;
        }

        #message {
            display: flex;
            justify-content: center;
        }

        #window {
            display: flex;
            flex-direction: column;        
            align-content: center; 
            width: 67vw;
            height: 65vh;;
            background-color: var(--midPurple-color);
            border: 2px solid var(--midLitePurple-color);
            border-radius: 5px;
            position: absolute;
            bottom: 7vh;
        }

        #topBar {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            color: var(--midLitePurple-color);
            margin: 5px 0px;
            width: 67vw;
        }

        #windowTitle {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 1vw;
            margin-left: 3vw;
            color: var(--litePurple-color);
            font-family: daydream;
            font-size: 3.2vh;
            margin: 1vh 4vw 0 0;
        }

        #windowTitleBmp {
            margin-left: 2vw;
            color: var(--litePurple-color);
            font-size: 3vh;
        }

        #windowBtns {
            display: flex;
            gap: .5vw;
            margin-right: 2.5vw;
        }
        .btn {
            background-color: var(--midLitePurple-color);
            color: var(--darkPurple-color);
            border: 1px solid var(--midPurple-color);
            border-radius: 2px;
        }

        #enterBtn h5{
            text-shadow: 2px 2px 0px rgba(146, 0, 114, 0.78);
        }

        #enterBtn:hover h5{
            color:  var(--yellow-color);
            text-shadow: 2px 2px 0px rgba(255, 0, 200, 0.78);
        }

        .btn:hover {
            background-color: var(--pink-color);
            color: white;
            border: 1.5px solid white;
            border-radius: 2px;
        }

        #windowContent {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background-color: var(--darkPurpleOutline-color);
            border-radius: 3px;
            border: 2px solid var(--midLitePurple-color);
            width: 65vw;
            height: 53.5vh;
            align-self: center;
        }

        #wText {
            margin-top: 1vh;
            margin-left: 2vw;
            margin-right: 5.5vw;
            color: var(--pink-color);
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
        }

        /* BG */

        #faceLogo {
            position: fixed;
            top: -7vh;
            right: 0vw; 
            z-index: -2; 
            width: 70vw;
        }

        #cloudBg {
            position: fixed;
            bottom: 0vh; 
            z-index: -3; 
            width: 100%;
        }
        


}

/* My screen */
@media (min-width: 1500px) and (max-height: 800px) {


    /* Door */

    .door {
        width: 30vw;
        margin-left: -22vw;
        margin-top: 9vh;
    }

    /* message window  */

        #icon {
            height: 5vh;
        }

        #window {
            width: 40vw;
            height: 50vh;
            bottom: 16vh;
        }

        #windowContent {
            width: 39vw;
            height: 43vh;
        }

        #topBar {
            margin: 9px;
            width: 39vw;
        }


        #windowBtns {
            margin-right: .5vw;
        }

        /* BG */

        #faceLogo {
            top: -7vh;
            right: 0vw; 
            width: 70vw;
        }

        
}

/* iPhone XR, 12 Pro */
@media (min-width: 700px) and (max-height: 450px) {}

/* Galaxy S8+ */
@media (min-width: 700px) and (max-height: 400px) {}

/* */
@media (min-width: 800px) and (max-height: 450px) {}

/* iPhone 14 Pro Max */
@media (min-width: 900px) and (max-height: 450px) {}

/* Pixel 7, Galaxy S20 Ultra */
@media (min-width: 900px) and (max-height: 420px) {}

/* iPad Mini and Air */
@media (min-width: 1000px) and (max-width: 1200px) and (max-height: 900px) {}

/* iPad Pro */
@media (min-width: 1300px) and (max-width: 1400px) and (max-height: 1030px) {}

/* General */


/* .linkObj {
     transition-duration: .5s;
}

.linkObj:hover img{
    scale: 1.05;
    transition-duration: .5s;
}
.linkObj:hover h3{
    scale: 1.05;
    color: #a87fff;
    transition-duration: .5s;
} */