body{
    background-color: rgb(255, 255, 68);
    font-family:Arial, Helvetica, sans-serif;
}

h1 {
    color: rgb(0, 0, 150);
    font-family: Arial, Helvetica, sans-serif;
    margin: 2rem;
    font-family:"terminal-grotesque";
    font-size: 70px;
}

@font-face {
    font-family:"terminal-grotesque";
    src: url(terminal-grotesque.ttf);
}
nav {
    text-align: center;
    margin: 2rem;
}

h2 {
    font-size: 20px;
    text-align: center;
    color: rgb(0, 0, 112);
    font-family:"terminal-grotesque";
}

.responses {
    display: grid;
    margin-left: 2rem;
    gap: 50px;
}
#response1 {
    height: 550px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    padding: 15px 25px 50px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}

#response2 {
    height: 500px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
    padding: 15px 25px 10px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}

#response3 {
    height: 500px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
    padding: 15px 25px 150px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}

#response4 {
    height: 500px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
    padding: 15px 25px 190px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}

#response5 {
    height: 500px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 6;
    grid-row-end: 7;
    padding: 15px 25px 100px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}

#response6 {
    height: 500px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 7;
    grid-row-end: 8;
    padding: 15px 25px 10px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}
#response7 {
    height: 500px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 9;
    grid-row-end: 10;
    padding: 15px 25px 30px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}

#response8 {
    height: 350px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 10;
    grid-row-end: 11;
    padding: 15px 25px 30px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}

#response9 {
    height: 350px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 11;
    grid-row-end: 12;
    padding: 15px 25px 30px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}
#response10 {
    height: 550px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 12;
    grid-row-end: 13;
    padding: 15px 25px 30px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}
#response11 {
    height: 550px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 13;
    grid-row-end: 14;
    padding: 15px 25px 110px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}

#response12 {
    height: 550px;
    width: 500px;
    grid-column-start: 1; 
    grid-column-end: 2;
    grid-row-start: 14;
    grid-row-end: 15;
    padding: 15px 25px 130px;
    color: rgb(0, 0, 112);
    border-style: dashed;
    border-color: rgb(0, 0, 112);
    border-width: 3px;
}