body{
    background-color: rgb(18, 4, 37);
}

.container{
    width: 100%;
    height: 100dvh;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.content{
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
        place-self: end;
        padding: 0.75rem;

    #text{
        color: rgb(212, 212, 212);
        font-size: 2.2rem;
        font-weight: 500;
    }
    
    #subtext{
        color: rgb(180, 180, 180);
        font-size: 1.5rem;
        font-weight: 300;
    }
}
    

#monki{
    aspect-ratio: 5/4;
    width:100%;
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 5;
    align-self: flex-end;
    justify-self: flex-start;
}

@media screen and (max-width: 1200px){

#monki{
    aspect-ratio: 5/4;
    width:100%;
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 5;
    place-self: end;
}
}

@media screen and (max-width: 700px) {
    #monki{
        aspect-ratio: 5/4;
        width:100%;
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 3;
        grid-row-end: 5;
        place-self: end;
    }
    
}