@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');
*{
    box-sizing: border-box;
}
body{
    display : grid;
    grid-template-columns: 1fr 4fr 1fr;
    background-color: rgb(220, 218, 218);
    margin: 0;
}
main{
    padding: 10px;
    grid-column: 2/3;
    grid-row: 2/3;
}
main div{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}
.middle img{
    object-fit: cover;
    object-position: center;
    height: 200px;
    border-radius: 10px;
}
img{
    width:100%;
    display: inline-block;
}
.frog1{
    grid-column: 1/4;
}
.frog4{
    grid-column: 2/5;
}
.frog5{
    grid-column: 1/5;
}
footer{
    display: grid;
    grid-template-columns: 4fr 1fr;
    background-color: green;
    grid-column: 1/4;
}
footer p{
    color: white;
}
header{
    grid-column: 1/4;
    background-color: green;
}
header img{
    width: 50%;
    background-color: white;
    margin: 20px auto 20px auto;
    padding: 10px 170px 10px 170px;
    border-radius: 10px;
    display: block;
}
nav p{
    display: block;
    background-color: white;
    text-align: center;
    color: green;
    border-radius: 5px;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
}
main, aside h2, h1{
    text-align: center;
    font-family: "dancing script";
    color: green;
}
.bottom{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 15px;
    column-gap: 15px;
}
.bottom img{
    object-fit: cover;
    object-position: center;
    height: 200px;
    border-radius: 10px;
    max-width: 100%;
}
.bottom h3{
    border-bottom: solid green 2px;
}
.middle{
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    border: 2px solid green;
}
.bottom section{
background-color: white;
border-radius: 10px;
padding: 10px;
}
main h1{
    grid-column: 1/-1;
    border-bottom: dashed green 2px;
}
main h2{
    background-color: white;
    border-radius: 10px;
    padding: 20px;
}
main .bleh{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
}
nav{
    margin-top: 110px;
}
aside{
    margin-top: 50px;
}
.green_line{
    border: solid green 3px;
    width: 95%;
    height: 1px;
    margin: auto 0px;
}
a{
    text-decoration-line: none;
    text-align: center;
}
footer div{
    margin-left: 20px;
}
footer div h4{
    border-bottom: solid white 2px;
    display:inline;
    color: white;
    font-family: "dancing script";
}