*{
    margin: 0;
    padding: 0;
}

html{
    --color-1 : #a0a08b;
    --color-2 : #e9efec;
    --color-3 : #555568 ;
    --color-4 : #211e20 ;
    /* --color-1 : #b77985;
    --color-2 : #efe8df;
    --color-3 : #36206e ;
    --color-4 : #013a01 ; */

    background-color: inherit;
    background-image: url("paperTexture.png");
    background-size: cover;
    background-repeat: repeat;
    background-blend-mode: overlay;
}

body{
    padding: 5vw;
    background-color: var(--color-2);
    opacity: 0.8;
    background-image:  linear-gradient(var(--color-4) 1px, transparent 1px), linear-gradient(to right, var(--color-4) 1px, var(--color-2) 1px);
    background-size: 40px 40px;
}

@media (max-width: 600px) {
    body {
        padding: 2vw;
    }
}

/* Hide scrollbars cross-browser but allow scrolling */
::-webkit-scrollbar {
    display: none;
    background: transparent;
    width: 0;
    height: 0;
}

body, .item {
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE and Edge */
}

iframe{
    border-radius: 1rem;
    border: 2px dotted white;
}


#table{
    display: flex;
    flex-flow: column nowrap;

    margin: auto;
    width: 100%;
    height: 100%;
    gap: 25px;
}

.row{
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    height: 100%;

    margin: auto;

    gap: 25px;
}

.item{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    padding: 2rem;
    gap: 20px;
    overflow-x: hidden;
    overflow-y: scroll;

    font-size: 1.2rem;
    background-color: inherit;
    background-image: url("Photocopy 2.jpg");
    background-size: cover;
    background-repeat: repeat;
    background-blend-mode: overlay;

    border: 2px solid black;

      resize: both;
    overflow: auto;
}


.item-1{
    flex: 2;
    width: 100%;
    height: 400px;
    background-color: var(--color-1);
}

.item-2{
    flex: 1;
    width: 100%;
    height: 400px;
    color: wheat;
    background-color: var(--color-4);
}

.item-3{
    flex: 2;
    width: 100%;
    height: 400px;
    color: wheat;
    background-color: var(--color-3);
    border-radius: 1rem;

}

.item-4{
    flex: 1;
    width: 100%;
    height: 400px;
    background-color: var(--color-2);
}


.detail{
    flex: 2;
    width: auto;
    height: auto;
    text-align: justify;
}

.item a{
    flex: 2;
    width: 100%;
    height: 400px;
    max-width: 100%;
    max-height: 80%;

    color: aliceblue;
    text-decoration: none;

    border-radius: 1rem;

    overflow: hidden;
}

.item img{
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    object-fit: cover;
    border: 2px dotted white;
}