body
{
background-color: #f0f0f0;
}


.top
{
background-color: rgb(9, 33, 63);
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.title
{
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
width: 80%;
border-radius: 20px;
background-color: white;
padding: 20px;

}

.bottom
{  
background-color: rgb(9, 33, 63);
}
.maingrid
{
margin-top: 40px;
display: grid;
grid-gap: 10px;
padding: 10px;
text-align: center;
grid-template-columns: repeat(7, 1fr);
margin-bottom: 40px;
}
.menu
{
grid-column: span 1;
color: rgb(9, 33, 63);
font-size: 20px;
}
.gridimages
{
background-color: white;
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 20px ;
overflow: hidden;
padding: 20px;
border-radius: 20px;
}
.ads
{
grid-column: span 1;

}
.adimg
{
width: 100%;
height: 450px;
}

#frog01
{
grid-column: span 3;
background-image: url("upgift11img/frog_long01.jpg");
background-size: cover;

}
#frog02
{
grid-column: span 1;
background-image: url("upgift11img/frog01.jpg");
background-size: cover;

}

#frog03
{
grid-column: span 1;
background-image: url("upgift11img/frog02.jpg");
background-size: cover;
}

#frog04
{   
grid-column: span 3;
background-image:  url("upgift11img/frog04.jpg");
background-size: cover;
}

#frog05
{
grid-column: span 4;
background-image: url("upgift11img/frog06.jpg");
background-size: cover;
}
#frog06
{
grid-column: span 4;
color: rgb(9, 33, 63);
font-size: 15px;
gap: 0px ;
height: 100px;
}
.fyou
{
height: 250px;
border-radius: 40px;
gap: 20px;
}
.dumass
{
margin-bottom: 20px;
padding: 15px;
border-radius: 20px;
background-color: white;
}
.text-divider 
{
    display: flex;
    align-items: center;
    text-align: center;
    grid-column: span 5;
}

.text-divider::before,
.text-divider::after 
{
    content: '';
    flex: 1;
    height: 2px;
      border-color: black;
    background-color: rgb(9, 33, 63);
}

.text-divider span
 {
    padding: 0 30px;
    font-size: 20px;
    font-weight: bold;
    padding-top: 30px;
    padding-bottom: 30px;
   
}
.linegrid
{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px ;
}
.text 
{
    background-color: white;
    border-radius: 20px;
    color: gray;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 30px;
}
.bottom
{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px ;
background-color: rgb(9, 33, 63);
color: white;
}
.bottomr
{   
text-align: right;
margin-right: 20px;
color: white;
}
.bottoml
{

margin-left: 20px;
}
.arrow {
font-size: 100%;

}
.bottom a {
color: white;
text-decoration: none;
}
.centercontent
{
grid-column: span 5;
}
.secondimages
{
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 20px ;
color: gray;
}
.coolimg
{
margin-top: 20px;
margin-bottom: 20px;
background-color: white;
border-radius: 20px;
padding: 20px;;
}
#onelength
{
object-fit: cover;
width: 100%;
}
.line
{
border: 1px solid gray;
}
.coolimg p
{
color: black;
}
.dotted
{
border-style: dashed;
border-color: gray;
border-width: 1px;
}
h1, h2, p, .text
{
    font-family: "Dancing Script", sans-serif;
}
.h2
{
font-size: 30px;
font-weight: 200;
}
.menu a
{
text-decoration: none;
color: black;
}

@media screen and (max-width: 768px) {
    /* Stack main layout into a single column */
    .maingrid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 16px;
    }

    /* Make the sidebar full width and appear before content */
    .menu {
        grid-column: 1 / -1;
        width: 100%;
        display: block;
        text-align: center;
    }
    .menu .dumass {
        display: block;
        margin: 8px auto;
        width: 90%;
    }

    /* Center the secondary header and remove decorative lines */
    .linegrid {
        grid-template-columns: 1fr;
    }
    .text-divider::before,
    .text-divider::after {
        display: none;
    }
    .text-divider {
        grid-column: 1 / -1;
        justify-content: center;
    }
    .text-divider span {
        display: inline-block;
        text-align: center;
        padding: 12px 0;
        margin: 0 auto;
    }

    /* Make content and image grids single-column */
    .centercontent, .gridimages, .secondimages, .ads {
        grid-column: 1 / -1;
    }
    .gridimages {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .secondimages {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* Hide ads on small screens */
    .ads {
        display: none !important;
    }

    /* Footer stack and center */
    .bottom {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .bottoml, .bottomr {
        margin: 0;
        text-align: center;
    }

    /* Make title image less wide on small screens */
    .title {
        width: 90%;
    }
}