@import url('https://fonts.googleapis.com/css?family=Poppins:200i,400,700&display=swap'); /* Importing google stylesheet for font-family Poppins. */ /* *********************************************************************************** Style sheet for http://www.gayatrigyanmandirlko.in and related pages. Graphic design by Pradeep Kumar Singh for Gayatri Gyan Mandir, Indira Nagar, Lucknow. *********************************************************************************** */ /*:root selector means element is the root which will be affected*/ :root { --color-black: #000000; --color-black-alfa: rgba(0, 0, 0, 0.6); --color-white: #ffffff; --color-darkred: #8b0000; --color-blue: #0000ff; --color-green: #4cc44c; --color-darkyellow: #d1d13d; --color-darkyellow-alfa: rgba(255, 255, 0, 0.575); --color-darkgreen: #1c7c1c; --color-darkgreen-alfa: rgba(27, 50, 27, 0.6); --color-vibrant: #ff006e; --color-vibrant-alfa: rgba(255, 0, 110, 0.3); } html { font-family: 'Poppins', Arial, Helvetica, sans-serif; font-size: 16px; /*Default font size base equal to 1em.*/ } *, *::before, *::after { box-sizing: border-box; } body { width: 100%; margin: 0; padding: 5px 0px 0px; font-family: 'Poppins', Arial, Helvetica, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.4; color: var(--color-black); /*background: linear-gradient(to bottom, #ff9900 0%, #ffff88 50%, #ff9900 100%);*/ background: #ffff88; background-image: linear-gradient( 115deg, rgba(156, 156, 58, 0.6), rgba(206, 206, 136, 0.5) ), url(../images/background.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } /* mobile friendly alternative to using background-attachment: fixed */ body::before { content: ''; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; background: var(--color-darkblue); /*background-image: linear-gradient( 115deg, rgba(156, 156, 58, 0.6), rgba(206, 206, 136, 0.45) ), url(../images/background.jpg); background-size: cover; background-repeat: no-repeat; background-position: center;*/ } a:link, a:visited { color: #0000ff; text-decoration: none; font-weight: normal; } a:active, a:hover { color: #ff0000; text-decoration: underline; } /* Start : Color Gradients Classes*/ .red { background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27)); box-shadow: 0 0 15px 0 rgba(83, 14, 14, 0.8); } .green { background: linear-gradient(#55680D, #71F53E, #116C31); box-shadow: 0 0 15px 0 #3B7E20CC; } .blue { background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%)); box-shadow: 0 0 15px 0 blue; } .aqua { background: linear-gradient(rgb(0, 255, 255), rgb(180, 255, 255), rgb(0, 255, 255)); box-shadow: 0 0 15px 0 rgba(15, 15, 200, 0.8); } .darkyellow { background: linear-gradient(rgb(255, 150, 0), rgb(255, 255, 0), rgb(255, 150, 0)); box-shadow: 0 0 15px 0 rgba(83, 14, 14, 0.8); } .tranparentblack { background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4)); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.6); } /* End : Color Gradients Classes */ /* Start : Styling header section. */ /* Start : Styling Site Banner */ .banner_header { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; text-align: center; text-transform: uppercase; border-bottom: 0px solid var(--color-white); } #left_site_banner { order: 1; width: 15%; height: 125px; max-width: 100%; } #left_site_banner img { max-width: 100%; height: auto; } #mid_site_banner { order: 2; width: 70%; height: auto; max-height: 125px; } #banner_mid_image { max-width: 100%; height: auto; } #mid_site_banner h1, #mid_site_banner p { text-align: center; line-height: 1rem; max-width: 100%; } #right_site_banner { order: 3; width: 15%; height: 125px; max-width: 100%; } #right_site_banner img { max-width: 100%; height: auto; } .clearfix:after { content: ""; display: table; clear: both; } .clear::after { display: block; clear: both; } /* End : Styling Site Banner */ /* Start : Styling Gayatri Mantra Scroller. */ .gayatri_mantra_scroller div { display: block; width: 94%; margin: 0 auto; font-size: 0.825rem; } /* End : Styling Gayatri Mantra Scroller. */ /* Start : Styling Menu Section */ .menu_header { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin: 0 auto; padding: 2px 5px; width: 99.99%; } .menu_item ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #2b2b2b; } .menu_item li { float: left; border-right:1px solid #800000; } .menu_item li:last-child { border-right: none; } .menu_item li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .menu_item li a:hover:not(.active) { background-color: #003f009a; } .active { background-color: #ffdd009d; } /* End : Styling Menu Section */ /* End : Styling header section. */ /* Start : Styling Main Section */ .main { display: block; width: 90%; height: auto; margin: 0 auto; padding: 16px; border: 1px dotted darkblue; border-radius: 20px; } /* Start : Styling Notice Section */ .events-article { width: 99%; margin: 0px auto; border: 1px solid var(--color-vibrant); border-radius: 15px; padding: 0px 25px; background-color: var(--color-vibrant-alfa); } .events-article p { font-size: 1.5rem; line-height: 2rem; color: #000000; } /* End : Styling Notice Section */ /* End : Styling Main Section */ /* Start : Styling Footer Section */ .footer { max-width: 100%; text-align: center; font-size: 1rem; margin: 1em auto; } .footer div { font-size: 1rem; } #footer-links { font-size: 1rem; } /* Start : Photoscroller at the bottom of the page */ .scrollerHeight { width: 100%; height: 160px; margin: 0 auto; } .scrollerHeight img { height: 160px; width: auto; margin: 0 auto; padding: 5px; } /* End : Photoscroller at the bottom of the page */ /* End : Styling Footer Section */