html {
    padding: 0;
    margin: 0;
    background-color: rgb(174, 173, 173);
    scroll-behavior: smooth;
}

h1 {
    width: 99%;
    margin-top: -1rem;
    margin-left: -1rem;
    margin-right: -1rem;
    padding: 2%;
    padding-top: 5%;
    border: 1px solid rgb(0, 0, 0);
    height: 3rem;
    border-radius: 4rem;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: rgb(4, 133, 184);
}

/* ul li{
    list-style-type: none;
}
ul li{
    display: inline-block;
    border: .5px solid white;
    border-radius: .5rem;
    padding: .5%;
}

ul li:hover{
    background-color: blue;
    color: white;
} */

section div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 2;
    flex-wrap: wrap;
    overflow-x: auto;
    scroll-snap-type:  x mandatory;

}

section div h3 {
    font-size: 1.8vh;
    padding-left: .1rem;
    padding-right: .1rem;
    border: 1px solid blue;
    margin: .3rem;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 200px;
    flex-wrap: wrap;
    flex-grow: 1;
    flex-shrink: 2;
    border-radius: 1.5rem;
}

section div h3:hover {
    background-color: rgb(4, 133, 184);
    padding: 0.2rem;
    padding-left: .5rem;
    padding-right: .5rem;
}

.content {
    text-align: center;
    border: 1px solid blue;
    padding: 1rem;
    margin: .5rem;
    border-radius: .5rem;
}


a {
    text-decoration: none;
    color: inherit;
}

section .h33 {
    text-align: center;
    border: .1rem solid white;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 1rem;
    background-color: rgb(4, 133, 184);

}

.bodytagshow{
    height: 23vw;
}
.basicformat{
    height: 20vw;
}
.titleimg{
    height: 10vw;
}
.basicff{
    text-align: left;
}
.headingimage{
    height: 20vw;
}

section ol{
    display: flex;
    overflow-x: auto;
    padding: 24px;
    width: 80%;
    /* height: 70%; */
    scroll-snap-type: x mandatory;
    scroll-padding: 24px;
    border-radius: 8px;
    /* gap: 12px; */
}



ol li {
    margin-left: 10%;
    list-style-position: inside;
    list-style-type: none;
    padding: .6rem;
}

abbr {
    text-decoration: none;
}










button {
    font-size: .9rem;
    color: white;
    padding: .7rem;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    border-radius: 1.5rem;
    background-color: rgb(0, 0, 0);

}



.copyright {
    background-color: rgb(4, 133, 184);
    white-space: nowrap;
    border: 1px solid white;
    text-align: center;
    margin: .5rem;
    padding: .5rem;
    display: inline-block;
    width: fit-content;
    border-radius: 1.5rem;
    position: relative;
    bottom: .6rem;
    left: 0rem;
}


.copyright:hover {
    white-space: nowrap;
    background-color: rgb(40, 37, 197);
    color: white;
    border: 2px solid white;
    margin: .5rem;
    padding: .6rem;
    display: inline-block;
    width: fit-content;
    border-radius: 1.8rem;
    position: relative;
    bottom: 0.6rem;
    left: 0rem;

}





