html{
    scroll-behavior: smooth;
}
body {
    background-color: #dedede;
    padding: 5px;
    margin: 15px;
    font-size: 25px;
    font-family:Arial, sans-serif;
}

h1 {
    text-align: center;
    font-family:Arial, sans-serif;
    font-size: 1.95em;
}

h2{
    text-align:center;
  }

li{
    margin-top: 20px;
}

img{
    border: 5px solid #eee;
    border-radius: 35px;
    width: 100%;
    box-sizing: border-box;
}
.label{
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.grid-container{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media screen and (min-width: 772px){
    .grid-container{
        grid-template-columns: 1fr 1fr;
        gap:0;
    }

    figure{
        border: 5px solid #eee;
        border-radius: 35px;
    }
    figure:last-child{
        grid-column: 1 / span 2;
    }
    img{
        border:0px;
    }
}

@media screen and (min-width: 992px){
    figure{
        border-radius: 0;
    }
    figure:nth-child(3n){
        grid-column: 1 / span 2;
        padding: 0;
    }
    img{
        border-radius:0px;
    }
}

@media (prefer-reduced-motion: reduce){
    scroll-behavior: unset;
}


@media (prefer-color-scheme: dark){
    body{
        background-color: #2f3335;
    }
    #top, p{
        color: #e69e34;
    }
    figure{
        background-color: #2f3335;
        color: #e69e34;
        border-color: #000;
    }
    img{
        border-color: #000;
    }
}