.column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.column-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.column-center-reverse {
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
}

.bg-box {
    width: 100%;
    height: calc(1080 * 100vw / 1920);
    background-image: url("../share/invite.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    background-position: center center;
}

.content-area {
    height: calc(1080 * 100vw / 1920);
    width: 50vw;
}

.content-side {
    height: calc(1080 * 100vw / 1920);
    width: 25vw;
}

.logo-area {
    height: 70%;
    width: 100%;
}

.btn-area {
    height: 15%;
    width: 100%;
}

.logo {
    width: 52%;
}

.play {
    width: 50%;
    margin-top: 5%;
}

.buttons {
    width: 100%;
    height: 100%;
}

.button-item {
    width: 50%;
    height: 100%;
}

.button {
    width: 70%;
}

.content {
    width: 100%;
}

.items {
    width: 100%;
}

.item1 {
    width: 45%;
    height: 85vw;
}

.item2 {
    width: 55%;
    height: 85vw;
}

.desc {
    width: 80%;
}

.footer{
    height: 10vh;
    width: 100%;
    background: black;
}
.footer-side{
    width: 25%;
    height: 100%;
}
.footer-mid{
    width: 50%;
    height: 100%;
}
.footer p {
    font-size: 2vh;
    color: white;
}
.images{
    width: 70%;
    height: 60%;
}
.icon-box{
    width: 33.33%;
    height: 100%;
}
.icon {
    width: 60%;
}
.pointer{
    cursor:pointer;
}