#page4 {
    background-color: #301934;
    color: #81E4AE;
}

#page4 .multilingual {
    opacity: 1;
    margin: 70px 15px 2px 15px;
    font-size: 1.4em;
    font-weight: 500;
    animation: slideUpMultilingual 0.5s linear 0.3s backwards, slideOutMultilingual 0.5s linear 15.8s forwards;
}

#page4 .pMultilingual {
    opacity: 1;
    margin: 0 15px;
    font-size: 0.8em;
    animation: slideUpMultilingual 0.5s linear 2s backwards, slideOutMultilingual 0.5s linear 15.8s forwards;
}

@keyframes slideUpMultilingual {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
}

@keyframes slideOutMultilingual {
    100% {
        opacity: 0;
        transform: translateY(-30px);
    }
}

#page4 .languages {
    position: absolute;
    background-color: #FE019A;
    color: black;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    bottom: 120px;
    width: 90px;
    height: 0;
    padding-top: 0;
}

#page4 .postgresql {
    left: 20px;
    animation: expandPostgresql 0.6s ease-in-out 5.5s forwards, shrink 0.6s ease-in-out 14s forwards;
}

#page4 .htmlCSS {
    left: 80px;
    animation: expandHtmlCSS 0.6s ease-in-out 4s forwards, shrink 0.6s ease-in-out 15.1s forwards;
}

#page4 .python {
    left: 125px;
    animation: expandPython 0.5s ease-in-out 5s forwards, shrink 0.6s ease-in-out 14.4s forwards;
}

#page4 .java {
    left: 185px;
    animation: expandJava 0.5s ease-in-out 4.5s forwards, shrink 0.6s ease-in-out 14.8s forwards;
}

#page4 .javascript {
    left: 230px;
    animation: expandJavascript 0.5s ease-in-out 5.7s forwards, shrink 0.6s ease-in-out 13.8s forwards;
}

@keyframes expandPostgresql {
    0% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
    }
    100% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
        padding-top: 10px;
        height: 120px;
    }
}

@keyframes expandHtmlCSS {
    0% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
    }
    100% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
        padding-top: 10px;
        height: 350px;
    }
}

@keyframes expandPython {
    0% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
    }
    100% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
        padding-top: 10px;
        height: 230px;
    }
}

@keyframes expandJava {
    0% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
    }
    100% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
        padding-top: 10px;
        height: 330px;
    }
}

@keyframes expandJavascript {
    0% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
    }
    100% {
        box-shadow: 1px 1px 0px black,
                2px 2px 0px black,
                3px 3px 0px black,
                4px 4px 0px black,
                5px 5px 0px black,
                6px 6px 0px black,
                7px 7px 0px black,
                8px 8px 0px black,
                9px 9px 0px black,
                10px 10px 0px black,
                11px 11px 0px black,
                12px 12px 0px black,
                13px 13px 0px black;
        border: black 5px solid;
        padding-top: 10px;
        height: 120px;
    }
}

@keyframes shrink {
    100% {
        padding-top: 0;
        height: 0;
    }
}

#page4 .cover {
    position: absolute;
    background-color: #301934;
    height: 15px;
    width: 100%;
    bottom: 105px;
    animation: moveCover 0.1s linear 15.7s forwards;
}

@keyframes moveCover {
    100% {
        height: 50px;
    }
}