main{
    width: 98vW;
    min-height:100vH;
    margin:auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 120px auto auto 40px;
    gap: 10px 40px;
    grid-auto-flow: row;
    grid-template-areas:
    "header"
    "left_content"
    "right_content"
    "footer";
}
main > header {
    grid-area: header;
    position:fixed;
    top:0px;
    left:0px;
    display:block;
    width:100vW;
    height:120px;
    background-image:url(../image/bg.svg);
    background-size:cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 100;
}
#logodesk{
    display:none;
}
#logomobile{
    display:block;
}
main > header #burger{
    right:20px;
    top:20px;
}
main > section{
    max-height:70vH;
    overflow: auto;
    padding-right:20px;
}
main > section article{
    vertical-align:top;
    transform: skew(-5deg,0deg);
    margin:0px 20px;
    height:190px;
    position: static;
    perspective: 1000px;
}

main > section article{
    margin:0px 20px 0px 20px !important;
}
#content{
    vertical-align:top;
    transform: skew(-5deg,0deg);
    margin:auto;
    height:80vH;
    width:80vW;
    position: fixed;
    top:80px;
    left:10vW;
    background-color:rgba(255,255,255,0.9);
    z-index:2001;
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
    border-radius:8px;
    border:1px solid rgb(208,149,52);
    display:none;
    overflow: auto;
}
#content .closer{
    transform: skew(5deg,0deg);
}
#content .grid2{
    width: 100%;
    height:100%;
    margin:auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 20px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "cleft"
    "cright";
}
#contentclose{
    position: fixed;
    top:15px;
    right:15px;
    z-index:2001;
    display:none;
}
.grid2 figcaption picture img{
    transform: skew(0deg,0deg);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.2);
    border-radius:8px;
}
label{
    display:block;
    margin-top:5px;
}