@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300&display=swap');

body
{
    font-family: 'Poppins', sans-serif;
    background-color:rgb(168, 208, 245);
}
.font-menu
{
    font-size: 15px;
    font-weight: lighter;
    color: rgb(34, 4, 63);
    font-family: 'Poppins', sans-serif;
}
.font-menu:hover
{
    font-size: 20px;
    font-weight: lighter;
    color: rgb(80, 3, 151);
    font-family: 'Poppins', sans-serif;
}
.font-bold-red
{
    font-size: 20px;
    font-weight: lighter;
    color: blueviolet;
    font-family: 'Poppins', sans-serif;
}
.all-btn
{
    background-color: rgb(197, 241, 113);
    color:darkblue;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10%;
    width: 200px;
    border-radius: 20%;
}
.all-btn:hover
{
    background-color:darkblue;
    color:  rgb(255, 255, 255);;
    font-size: 20px;
} 
.center-div
{
    text-align: center;
}

.div-header
{
    background-color: #3333FF;
    color: #adf759;
    text-align: center;
    font-size: 50px;
    font-family: 'Poppins', sans-serif;
}
.div-footer
{
    background-color: #3333FF;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Poppins', sans-serif;
}
h1
{
    font-family: 'Poppins', sans-serif;
    font-size: 50px;
 }
h1:hover
{
    text-shadow: rgb(139, 238, 10) 3px 3px;
}
h2
{
    font-family: 'Poppins', sans-serif;
 }
h2:hover
{
    text-shadow: rgb(139, 238, 10) 3px 3px;
}
h3
{
    font-family: 'Poppins', sans-serif;
}
h4
{
    text-shadow: white 3px 3px 3px;
    font-family: 'Poppins', sans-serif;
}
h4:hover
{
    text-shadow: rgb(139, 238, 10) 3px 3px;
    font-family: 'Poppins', sans-serif;
}

hr
{
    border-style: dotted none none;
    border-color: rgb(7, 73, 73);
    border-width: 10px;
    width:15%
}
#profile_table
{
    box-shadow: 0 1rem 1.25rem 0 #07484d;
}
#profile_table2
{
    box-shadow: 0 1rem 1.25rem 0 #2b4b88 inset;
}
.btncls1
{
    cursor:pointer;
    position: relative;
    padding: 1rem 2rem;
    border-radius: 3.75rem;
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 300;
    border:1px solid black;
    background-image: linear-gradient(-180deg, #a592a0 0%, white 100%); box-shadow: 0 1rem 1.25rem 0 #a592a0 insert;
}
.btncls1:hover
{
    background-image: linear-gradient(-180deg, white 0%, #a592a0 100%); box-shadow: 0 1rem 1.25rem 0 #a592a0 insert;
}
.lblbackgrnd
{
    text-decoration: none;
    width:fit-content;
    padding:.75rem 1.5rem;
    border-radius: 0rem 3.75rem 3.75rem 0rem;
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: rgb(36, 141, 141);
    
}
.lblbackgrnd:hover
{
    text-decoration: none;
    width:fit-content;
    padding:.75rem 1.5rem;
    border-radius: 0rem 3.75rem 3.75rem 0rem;
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: rgb(69, 209, 209);
    cursor:pointer;
}
.btncls2
{   
    cursor:pointer;
    position: relative;
    padding: 1rem 2rem;
    border-radius: 3.75rem;
    line-height: 0.5rem;
    font-size: 1rem;
    
    font-weight: 400;
    border:1px solid black;
    background-image: linear-gradient(-180deg, #bfe903 0%, white 100%); box-shadow: 0 1rem 1.25rem 0 #bfe903 insert;
}
.btncls2:hover
{
    background-image: linear-gradient(-180deg, white 0%, #bfe903 100%); box-shadow: 0 1rem 1.25rem 0 #bfe903 insert;
}
.lblbackgrnd2
{
    text-decoration: none;
    width:fit-content;
    padding:.75rem 1.5rem;
    border-radius: 0rem 3.75rem 3.75rem 0rem;
    line-height: 1rem;
    font-size: 1rem;
    font-weight: 600;
    background-color: rgb(30, 127, 145);
    
}

.save-btn
{
    background-color: green;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10%;
    width: 100px;
}
.cancel-btn
{
    background-color: rgb(197, 10, 10);
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 10%;
    width: 100px;
}
.save-btn:hover
{
    background-color: blue;
    font-size: 22px;
} 
.cancel-btn:hover
{
    background-color: rgb(2, 2, 34);
    font-size: 22px;
} 

/** this area is for slide show
.slideshow {
  list-style-type: none;
}

/** SLIDESHOW **/
.slideshow,
.slideshow:after { 
    top: -16px; /*Not sure why I needed this fix*/
		position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    z-index: 0; 
}

.slideshow li span { 
		position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 30s linear infinite 0s; 
}



.slideshow li:nth-child(1) span { 
    background-image: url("/image/5.jpg"); 
}
.slideshow li:nth-child(2) span { 
    background-image: url("/image/4.jpg");
    animation-delay: 6s; 
}
.slideshow li:nth-child(3) span { 
    background-image: url("/image/3.jpg");
    animation-delay: 12s; 
}
.slideshow li:nth-child(4) span { 
    background-image: url("/image/2.jpg");   
    animation-delay: 18s; 
}
.slideshow li:nth-child(5) span { 
    background-image: url("/image/1.jpg");
    animation-delay: 24s; 
}

@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}


@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}


.no-cssanimations .cb-slideshow li span {
	opacity: 1;
}
h1
{
    font-family: 'Poppins', sans-serif;
}

.imght
{
    height: 300px;
}

.imgcen
{
    margin-left: auto;
    margin-right: auto;
}
.autoadj
{
    padding: 10px;
    margin-right: auto;
    margin-left: auto;
    width: fit-content;    

}
.mybtn
{
    box-shadow: 5px 5px 5px gray;

}