@charset "utf-8";

@media screen {

    html,
    body {
        background: url("../img/background.jpg") scroll no-repeat left bottom;
        padding: 0;
        margin: 0;
        height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-size: cover;
    }
}


:root {
    --white: #d5d5d5;
    --truewhite: #efefef;
    --snowwhite: #f7f7f7;
    --black: #000000;
    --shadowedblack: #0D0D0D;
    --transblack: #1111119c;
    --grey: #1c1c1c;
    --lightgrey: rgb(128, 128, 128);
    --blue: #3e5664;
    --lightblue: #15384c;
    --white-yellow: #888;
    --red: rgb(208, 61, 51);
    --light-red: #ff0000;
}

#main {
    display: block;
    padding: 2vw;
    color: var(--white);
    font-family: "Nanum Myeongjo";
}

.message-container {
    display: none;
    background-color: #f1f1f1;
    color: #333;
    border: 3px solid var(--red);
    padding: 20px 30px;
    border-radius: 5px;
    z-index: 1000;

    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
    transition: opacity 0.5s ease-in-out;

    text-align: center;
}