body{
    background-image: url(img/backgroundDay.webp);
    background-size:cover;
    background-position: center;
    background-attachment: fixed;
    margin:0px;
}
.maincenter{
    text-align: center;
    align-content: space-around;
}

.menu{ 
    display: flex;
    padding: 5px;
    background-color: aliceblue;
}

.buttonmenu{ 
    text-decoration: none;
    color: white;
    text-align: left;
}
.menushow{
    align-self: center;
    /*border-radius: 100%;*/
}


/*This part is for animation*/

.buttonmenu:hover{
    text-shadow: #000000 1px 1px 14px;
}
.menushow:hover{
    /*box-shadow: #000000 1px 1px 14px;*/
    filter: grayscale();
    transition: all 0.5s;
    transform: perspective(1.2)
}
.buttonlang:hover{
    transition: all 0.5s;
    box-shadow: #57fddd 1px 1px 20px;
}
.imagelinks:hover{
    transform: rotate(10deg)
}

@media screen and (max-width: 3000px) { /* For Msi Screen 1920px*/
    .buttonmenu{
        margin-left: 10px;
        font-size: 1.5vw;
    }
    .menushow{
        height: 50px;
    }
    .buttonlang{
        height: 2.5vw;
        margin-left: auto;
        align-self: center;
    }
    .footerdown{
        display: table;
        clear: both;
        content: "";
        background-color: #ffffffcc;
        border-radius: 20px;
        margin:10px;
    }
    .maintop{
        
        display: grid;
        text-align: center;
        /*height: 500px;*/
        margin-top: 10px;
    }
    .links{
        float: left;
        text-align: left;
        width: 40%;
    }
    .imagelinks{
        width: 6%;
        height: 6%;
        padding-left: 20px;
        transition: width 2s;
    }
    .info{
        float: right;
        text-align: right;
        font-size: 16px;
        padding-top: 1%;
        padding-left: 10px;
        padding-right: 5px;
        transition: font-size 2s;
    }
}

@media screen and (max-width: 3000px) and (orientation:landscape) { /* For Msi Screen 1920px*/
    .buttonmenu{
        margin-left: 10px;
        font-size: 1.5vw;
        border-radius: 20px
    }
    .menushow{
        height: 50px;
    }
    .buttonlang{
        height: 2.5vw;
        margin-left: auto;
        align-self: center;
    }
    .footerdown{
        display: table;
        clear: both;
        content: "";
        background-color: #ffffffcc;
        border-radius: 20px;
        margin:10px;
    }
    .maintop{
        
        display: grid;
        text-align: center;
        /*height: 500px;*/
        margin-top: 10px;
    }
    .links{
        float: left;
        text-align: left;
        width: 40%;
    }
    .imagelinks{
        width: 6%;
        height: 6%;
        padding-left: 20px;
        transition: width 2s;
    }
    .info{
        float: right;
        text-align: right;
        font-size: 1.4vw;
        padding-top: 1%;
        padding-left: 10px;
        padding-right: 5px;
        transition: font-size 2s;
    }
}

@media screen and (max-width: 1366px){ /* For Phone Screen  and (orientation:portrait) */
    .buttonmenu{
        margin-left: 10px;
        font-size: 1.5vw;
    }
    .menushow{
        height: 50px;
    }
    .buttonlang{
        height: 3.4vw;
        margin-left: auto;
        align-self: center;
    }
    .footerdown{
        display: table;
        clear: both;
        content: "";
        background-color: #ffffffcc;
        border-radius: 20px;
    }
    .maintop{
        display: grid;
        text-align: center;
        margin-top: 10px;
    }
    .links{
        float: left;
        text-align: left;
        width: 40%;
    }
    .imagelinks{
        width: 15%;
        height: 15%;
        padding-left: 9px;
        transition: width 2s;
    }
    
    .info{
        float: right;
        text-align: right;
        font-size: 2vw;
        padding-top: 1%;
        padding-right: 5px;
    }
}

@media screen and (max-width: 900px) { /* For Phone Screen and (orientation:portrait)*/
    .buttonmenu{
        margin-left: 7px;
        font-size: 3.5vw;
    }
    .menushow{
        height: 6vw; /*old 9vw*/
    }
    .buttonlang{
        height: 5vw; /*old 7 vw*/
        margin-left: auto;
        align-self: center;
    }
    .footerdown{
        display: table;
        clear: both;
        content: "";
        background-color: #ffffffcc;
        border-radius: 10px;
    }
    .maintop{
        display: grid;
        text-align: center;
        margin-top: 10px;
    }
    .links{
        float: left;
        vertical-align: bottom;
        text-align: left;
        width: 40%;
    }
    .imagelinks{
        width: 15%;
        height: 15%;
        padding-left: 10px;
        transition: width 2s;
    }
    .info{
        float: right;
        text-align: right;
        font-size: 2vw;
        padding-top: 2%;
        padding-right: 5px;
        
    }
    
}


@media screen and (max-width: 900px) and (orientation:landscape) { /* For Phone Screen and (orientation:portrait)*/
    .buttonmenu{
        margin-left: 7px;
        font-size: 3vw;
    }
    .menushow{
        height: 5vw;
    }
    .buttonlang{
        height: 4vw;
        margin-left: auto;
        align-self: center;
    }
    .footerdown{
        display: table;
        clear: both;
        content: "";
        background-color: #ffffffcc;
        border-radius: 10px;
    }
    .maintop{
        display: grid;
        text-align: center;
        margin-top: 10px;
    }
    .links{
        float: left;
        vertical-align: bottom;
        text-align: left;
        width: 40%;
    }
    .imagelinks{
        width: 10%;
        height: 15%;
        padding-left: 10px;
        transition: width 2s;
    }
    .info{
        float: right;
        text-align: right;
        font-size: 1.5vw;
        padding-top: 2%;
        padding-right: 5px;
    }
}