*{
    margin:0%;
    padding:0%;
}
body{
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}
a{
    text-decoration: none;
}
.calen{
    z-index: -1;
    display: grid;
    position: absolute;
    left: 150px;
    top: 90px;
    width: 800px;
    
    grid-template-columns: 25% 25% 25% 25%;
    grid-auto-rows: 33% 33% 33%;   
}
.elmes{
    border:solid 1px;
    background-color: rgb(255, 255, 255)
}
.tablecal{
    border:solid;
    width: 200px;
    height: 200px;
}
td{
    background-color: rgb(255, 235, 178);;;
}
#titulo{
    position: absolute;
    left: 180px;
    top: 20px;
    font-size: 35px;
}
#publi{
    position: absolute;
    left: 950px;
    top: 90px;
    width: 300px;
    height: 700px;
    background-color: rgb(255, 223, 186);  
}
#foot{
    z-index: -1;
    position: absolute;
    left: 150px;
    top: 690px;
    width: 800px;
    height: 100px;   
    background-color: rgb(255, 223, 186);       
}
@media (width < 700px){
    *{
        margin:0%;
        padding:0%;
    }

html body{
    width: 100%;
    overflow-x: hidden;
}
.calen{
    display: grid;
    border: 0px;
    position: absolute;
    width: 100%;
    left: 0px;
    top: 50px;
    grid-template-columns: 50vw 50vw;
    grid-auto-rows: 50vw;   
}
.tablecal{
    border: 0px;
    width: 50vw;
    height: 50vw;
}
#titulo{
    position: absolute;
    left: 60px;
    top: 0px;
    font-size: 23px;
}
}