*{
    padding: 0px;
    margin: 0px;

    box-sizing: border-box;
}

body{
    width: 100vw;
    height: 100vh;
    min-height: 100vh;


    background-color: var(--main-color);
    overflow-y: hidden;


}

.main-wrapper{
    width: 100%;
    height: 100vh;

    display: grid;

    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
}

.main-content{
    padding: 10px;
    width: 100%;
    height: 100vh;
    grid-area: 1/4/11/8;

    border-style:double;
    border-width: 1px;
    border-color: var(--accent-color1);

    overflow-y: scroll;
}

article{
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    color: var(--accent-color1);
    font-family: "text-font";
    font-size: 2vw;  

}

#heading{
    padding: 4px;
    margin: 0px;
    background-color: var(--accent-color1);
    color: var(--main-color);
}

#title{
    width: 100%;
    color: var(--main-color);
    font-family: "header-font";
}

img{
    padding: 4px;
    margin: 2px;

    max-width: 100%;
    max-height: 30%;

    flex: 0 1 300px;

    object-fit: contain;

    border-style: double;
    border-color: var(--accent-color1);
}

p{
    max-height: fit-content;
    flex: 1 1 300px;
    padding: 7px;
    margin: 10px;

    border-style: double;
    border-color: var(--accent-color1);
}

a{
    color: var(--accent-color1);
}

a:visited{
    color: var(--accent-color1);
}