.container {
    display: grid;
    gap:1em;
    grid-template:
        "myHeader myHeader myHeader"
        "mySidebar myMainContent mySidebar2"
        "myFooter myFooter myFooter"
        / 1fr 4fr 1fr;
    }
    header { grid-area: myHeader; }
    sidebar { grid-area: mySidebar; }
    sidebar2 { grid-area: mySidebar2; }
    web_frame { grid-area: myMainContent; }
    footer { grid-area: myFooter; }
.web_frame{ /*alt for main*/
    display: block;
    text-align: center;
    padding: 4px;
    background-color: #ffeeba;
    border: solid 2px #e9b497;
    /*border-color: red*/
    /*height: 100%;*/
    border-radius:25px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: hidden;
}
.web_frame main{
    margin: 10px;
}
.web_frame hr {
    color: red
}

.sidebar{ /*alt for aside*/
    height:100%;
    display: block;
    /*
    margin-bottom: 0px;
    padding-bottom: 0px;
    */
}
.badge_array{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-color: #252426;
    border-radius: 20px;
    overflow: hidden;
    padding: 10px;
    
}
.badge_array img{
    transition: transform 0.5s ease;
    width: 100px;
    padding:5px
}
.badge_array div:hover img{
    transform: scale(1.35) rotate(3deg);
}


.artical{
    text-align: left;
    display: block;
    word-wrap: break-word;
}
.artical img{
    /*float: left;*/
    max-height: 10em;
    width: auto;
    overflow: hidden;
    resize: horizontal;
    padding: 3px;
}


@media screen and (max-width: 1000px) {
    .web_frame {
        font-size: 24px;
        border-radius:15px;
    }
    .container{
        grid-template:
            "myHeader"
            "myMainContent"
            "myFooter"
            /1fr
    }
    .sidebar{
        display: none;
    }
}