/*add media query and size down into just one column w title at the top, size down images to be responsive*/
.sourceslayout{
    display: grid;
    grid-template-columns: 20% repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100vh;
    width: 100vh;
    padding-top: 13%;
}

.grid-item {
  /* border: 1px solid black;  */
  padding: 1em;
}

/* dialog styling */

dialog[open]{
    background-color: blanchedalmond;
    font-family: 'Bellefair', serif; 
    font-size: larger;
    max-width: 70%;
    display: grid;
    grid-template-columns: [firstcol] 40% [secondcol]60%;
    grid-template-rows: [firstrow];
    gap: 20px;
    padding: 20px;
}

#opendialog{
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    font-family: 'Big Shoulders', system-ui;
    font-size: medium;
    background-color: blanchedalmond;
    text-align: left;
    align-self: flex-start;
}

#opendialog:hover{
    cursor: pointer;
}

#closebutton{
    height:30px;
    background-color: bisque;
    font-family: 'Big Shoulders', system-ui;
    font-size: medium;
    grid-column: 2 / 3;
    align-self: flex-start;
}

#closerbutton:hover{
    cursor: pointer;
}


img{
    align-items: center;
    width: 100%;
    height: auto;
    border: 2px solid black;
    
}

#titleheading{
    grid-column: 1 / 2;
    grid-row: 1 / 6;
}

h1{
   font-family: 'Big Shoulders', sans-serif; 
}

h3, p, a{
   font-family: 'Bellefair', serif; 
}

a:link{
    color: orangered;
}
a:hover{
    color: lightcoral;
}