* {
    box-sizing: border-box;
}

body {
    margin: 0px;
}

.caution {
    display:block;
    height: 100vh;
    position:absolute; 
    left: 50%; 
    top:50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.border {
    background-color: black;
    width: 75vh;
    height: 1%;
    position:absolute; 
    left: 50%; 
    top:24%;
    transform: translate(-50%, -50%);
    transition: height 2s;
    z-index: 1;
}

.background{
    height: 100%;
    width: 100%;
    position:absolute; 
    left: 50%; 
    top:50%;
    transform: translate(-50%, -50%);
    filter:brightness(100%) contrast(100%);
    transition: all 1s;
}

.phase1 {
    display:block;
    height: 100vh;
    position:absolute; 
    left: 50%; 
    top:50%;
    transform: translate(-50%, -50%);
}

.phase2 {
    display:none;
}

.phase3 {
    display:none;
}

.phase4 {
    display:none;
}

.phase5 {
    display:none;
}

@media screen and (max-height: 800px) {

    .background{
        filter:brightness(80%) contrast(120%);
        transition: all 1s;
    }
    .border {
        height: 10%;
    }

    .phase1 {
        display:none;
    }

    .phase2 {
        display:block;
        height: 100vh;
        position:absolute; 
        left: 50%; 
        top:50%;
        transform: translate(-50%, -50%);
    }

    .phase3 {
        display:none;
    }

    .phase4 {
        display:none;
    }

    .phase5 {
        display:none;
    }
}

@media screen and (max-height: 600px) {

    .background{
        filter:brightness(60%) contrast(140%);
        transition: all 1s;
    }

    .border {
        height: 34%;
    }

    .phase1 {
        display:none;
    }

    .phase2 {
        display:none;
    }

    .phase3 {
        display:block;
        height: 100vh;
        position:absolute; 
        left: 50%; 
        top:50%;
        transform: translate(-50%, -50%);
    }

    .phase4 {
        display:none;
    }

    .phase5 {
        display:none;
    }
}

@media screen and (max-height: 400px) {

    .background{
        filter:brightness(40%) contrast(160%);
        transition: all 1s;
    }

    .border {
        height: 60%;
    }

    .phase1 {
        display:none;
    }

    .phase2 {
        display:none;
    }

    .phase3 {
        display:none;
    }

    .phase4 {
        display:block;
        height: 100vh;
        position:absolute; 
        left: 50%; 
        top:50%;
        transform: translate(-50%, -50%);
    }

    .phase5 {
        display:none;
    }
}