*{
padding: 0;
margin: 0;
min-zoom: 1.0;
}
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Dancing+Script&family=Noto+Sans+Malayalam:wght@300&family=Noto+Serif+Malayalam:wght@200;300&family=Roboto+Condensed:wght@300&display=swap');
body{
display: flex;
flex-direction: column;
margin-top: 0;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
background-color: white;
}
.header{
display:flex;
flex-direction: row;
height: 184px;
margin-top: -18px;
}
.contact{
background-color: black;
color: yellow;
border:none;
}
.contact:hover{
cursor: pointer;
color: white;
}
.photo{
background-image: url(Images/Logo.png) ;
border-style: none;
margin: none;
background-size:contain;
background-repeat:no-repeat;
background-color: rgb(27, 44, 121);
background-position: center;
}
.heading{
color:lightyellow;
font-size: 45px;
flex:auto;
font-family: dancing script;
text-align: center;
background-image: url(Images/bg.jpg) ;
background-size:cover;
max-height: 184px;
padding-top: 50px;
}
.comment{
background-image: url(Images/Picture1.jpg) ;
border-style: none;
margin: none;
}
.flex-container{
display: flex;
border-style: none;
flex-direction: row;
}
.left{
background-color:rgb(92, 89, 89);
padding-top: 100px;
min-width: 200px;
max-width: 200px;
}
.right{
background-color:rgb(92, 89, 89);
min-width: 200px;
max-width: 200px;
color: white;
font-family: abel;
max-height: auto;
padding-top: 10px;
}
.content {
margin-left: 0px;
aspect-ratio: 15/8.5;
padding-left: 0px;
background-image: url(Images/Ayah-01.jpg);
background-size: cover;
background-repeat: no-repeat;
width:100%;
min-height:100%;
max-height:100%;
}
.frame{
width:100%;
height:100%;
}
.footer{
background-color: rgb(32, 57, 126);
font-size: 15px;
height: 34px;
}
.author{
text-align: right;
padding-right: 15px;
padding-top: 5px;
}
.button {
background-color: rgb(27, 44, 121);
font-family: roboto condensed;
font-size: 20px;
border: none;
color:white;
font-size: 15px;
height: 45px;
width: 45px;
border-radius: 10px;
cursor: pointer;
transition: box-shadow 0.15s;
vertical-align: top;
display:none;
}
.button:hover {
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3) ;
background-color: rgb(66, 68, 158);
}
.select-container{
height: 200px;
width:175px;
border:none;
}
.select{
width: 175px;
color: white;
font-family: roboto condensed;
background-color: rgb(27, 44, 121);
font-size: 20px;
padding-bottom: 10px;
padding-top: 10px;
border-radius: 0 15px 15px 0;
justify-content: center;
align-items: center;
}
.verse{
background-color: rgb(130, 133, 136);
color: white;
font-family: roboto condensed;
border: solid 0.25px;
border-color:rgb(13, 13, 14);
width:200px;
justify-content: center;
align-content: center;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
}
.select::-webkit-scrollbar {
width: 15px;
background: rgb(27, 44, 121);
border-radius: 0 15px 15px 0;
}
.select::-webkit-scrollbar-thumb {
background:rgb(30, 109, 226);
border-radius: 0 8px 8px 0;
}
.verse,.selected {
padding: 15px 24px;
cursor: pointer;
}
.verse:hover {
background: rgb(27, 44, 121);
}
.select-box label {
cursor: pointer;
}
.english{
font-family: abel;
font-size: large;
display: flex;
background-color: rgb(8, 90, 8);
width:160px;
min-height: 200px;
max-height: 200px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
border-radius: 0 12px 12px 0;
padding: 10px;
}
.english::-webkit-scrollbar {
width: 8px;
background: rgb(131, 202, 113);
border-radius: 0 8px 8px 0;
}
.english::-webkit-scrollbar-thumb {
background:rgb(24, 158, 58);
border-radius: 0 8px 8px 0;
}
.malayalam{
font-family:Noto Serif Malayalam;
background-color:rgb(82, 75, 14);
margin-top: 20px;
width:160px;
min-height: 200px;
max-height: 200px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
border-radius: 0 8px 8px 0;
padding:10px;
}
.malayalam::-webkit-scrollbar {
width: 8px;
background: rgb(151, 156, 95);
border-radius: 0 8px 8px 0;
}
.malayalam::-webkit-scrollbar-thumb {
background:rgb(190, 188, 56);
border-radius: 0 8px 8px 0;
}
.footer{
background-color: rgb(70, 92, 91);
display: flex;
flex-direction: row;
}
.f2{
background-color: rgb(51, 50, 50);
color:rgb(221, 219, 219);
font-family: noto sans arabic;
font-size: 15px;
text-align: center;
}
.f3{
background-color: black;
color:yellow;
text-align: center;
padding-top:3px;
font-family: roboto condensed;
min-width: 200px;
max-width: 200px;
}
.full1{
display:flex;
flex-direction: column;
}
.full2{
display:flex;
flex-direction: column;
}
.f1{
display: flex;
flex-direction: row;
color:rgb(15, 15, 15);
font-family: noto sans arabic;
font-size: 15px;
text-align: center;
}
.l1{
background-color: rgb(157, 195, 230);
padding-left: 10px;
padding-right: 10px;
}
.l2{
background-color: rgb(169, 209, 142);
padding-left: 10px;
padding-right: 10px;
}
.l3{
background-color: rgb(166, 166, 166);
padding-left: 10px;
padding-right: 10px;
}
.l4{
background-color: rgb(240, 230, 140);
padding-left: 5px;
padding-right: 5px;
}
@media only screen and (max-width: 820px){
.heading{
font-size: 44px;
font-family: dancing script;
text-align: center;
height: 184px;
padding:0px;
margin:0px;
padding-top:30px;
padding-left: 3px;
padding-right: 3px;
}
.photo{
max-width:150px;
background-image: url(Images/Logo.png) ;
border-style: none;
margin: none;
background-size:contain;
background-repeat:no-repeat;
background-color: black;
background-position: center;
height:150px;
}
.header{
display:flex;
flex-direction: row;
height: 150px;
min-width: 100VW;
MAX-width: 100VW;
}
.flex-container{
display: flex;
flex-direction: column;
border-style: none;
}
.comment{
display:none;
}
.left{
padding-top: 10px;
max-height:100px;
background-color: rgb(92, 89, 89);
display: flex;
flex-direction: row;
min-width: 100VW;
max-width: 100VW;
}
.verse{
background-color: rgb(130, 133, 136);
color: white;
font-family: roboto condensed;
border: solid 0.25px;
border-color:rgb(13, 13, 14);
width:200px;
justify-content: center;
align-content: center;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
}
.right{
display: flex;
flex-direction: row;
background-color: rgb(92, 89, 89);
padding:0px;
min-width: 100vw;
width:100vw;
justify-content: space-evenly;
align-items: center;
padding-top: 10px;
}
.content {
background-color: white:
margin-left: 0px;
padding-left: 0px;
max-width:100vw;
height:auto;
}
.frame{
object-fit:cover;
}
.footer{
display: flex;
flex-direction: column;
border-style: none;
}
.f1{
max-width: 100VW;
min-width: 100VW;
max-height:30px;
margin-top: 0;
color:black;
}
.l1{
background-color: rgb(157, 195, 230);
padding-left: 40px;
padding-right: 40px;
}
.l2{
background-color: rgb(169, 209, 142);
padding-left: 40px;
padding-right: 40px;
}
.l3{
background-color: rgb(166, 166, 166);
padding-left: 40px;
padding-right: 40px;
}
.l4{
background-color: rgb(240, 230, 140);
padding-left: 40px;
padding-right: 40px;
}
.f2{
max-width: 100VW;
min-width: 100VW;
max-height: 50px;
}
.f3{
max-width: 100VW;
min-width: 100VW;
max-height: 30px;
}
.english{
font-family: abel;
font-size: larger;
display: flex;
background-color: rgb(8, 90, 8);
width:225px;
min-height: 125px;
max-height: 125px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
margin-top: 10px;
}
.malayalam{
font-family: Noto Serif Malayalam;
background-color:rgb(82, 75, 14);
width:225px;
min-height: 125px;
max-height: 125px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
border-radius: 0 8px 8px 0;
margin-top: 10px;
}
.select-container{
height: 200px;
width:250px;
border:none;
}
.button{
display:inline-block;
}
}
@media only screen and (max-width: 544px){
.heading{
padding-top:20px;
vertical-align: middle;
font-size: 30px;
height:150px;
padding-left: 5px;
padding-right: 5px;
}
.english{
font-family: abel;
font-size: 16px;
display: flex;
background-color: rgb(8, 90, 8);
width:160px;
min-height: 160px;
max-height: 160px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
margin-top: 10px;
}
.malayalam{
font-family: Noto Serif Malayalam;
font-size:14px;
background-color:rgb(82, 75, 14);
width:160px;
min-height: 160px;
max-height: 160px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
border-radius: 0 8px 8px 0;
margin-top: 10px;
}
.right{
display: flex;
flex-direction: row;
background-color: rgb(92, 89, 89);
padding:0px;
min-width: 100VW;
max-width: 100VW;
justify-content: space-evenly;
}
.photo{
max-width:100px;
background-image: url(Images/Logo.png) ;
border-style: none;
margin: none;
background-size:contain;
background-repeat:no-repeat;
background-color: black:
background-position: center;
height:100px;
}
.header{
height:100px;
}
}
@media only screen and (max-width: 480px){
body{
max-height: 600px;
}
.flex-container{
display: flex;
flex-direction: column;
border-style: none;
min-width: 100vw;
}
.left{
padding-top: 10px;
max-height:60px;
background-color: rgb(92, 89, 89);
display: flex;
flex-direction: row;
min-width: 100VW;
max-width: 100VW;
}
.right{
display: flex;
flex-direction: row;
background-color: rgb(92, 89, 89);
padding:0px;
min-width: 100VW;
max-width: 100VW;
justify-content: space-evenly;
padding-bottom: 10px;
}
.content {
background-color: white:
margin-left: 0px;
padding-left: 0px;
}
.frame{
border-style: solid 1px rgb(245, 27, 27);
background-color: rgb(236, 236, 69);
min-width: 100VW;
max-width: 100VW;
height:auto;
}
.comment{display:none;}
.heading{
color:lightyellow;
background-image: url(Images/bg.jpg) ;
font-size: 30px;
height: 100px;
align-items: center;
justify-content: center;
padding-top: 15px;
}
.select-container{
height: 200px;
width:275px;
border-style: solid red 1px;
overflow: visible;
}
.select{
width: 200px;
color: white;
font-family: roboto condensed;
background-color: rgb(27, 44, 121);
font-size: 20px;
border-radius: 0 15px 15px 0;
justify-content: center;
align-items: center;
border:none;
}
.footer{
display: flex;
flex-direction: column;
border-style: none;
}
.f1{
max-width: 100VW;
min-width: 100VW;
}
.l1{
background-color: rgb(157, 195, 230);
padding-left: 25px;
padding-right: 25px;
}
.l2{
background-color: rgb(169, 209, 142);
padding-left: 25px;
padding-right: 25px;
}
.l3{
background-color: rgb(166, 166, 166);
padding-left: 25px;
padding-right: 25px;
}
.l4{
background-color: rgb(240, 230, 140);
padding-left: 25px;
padding-right: 25px;
}
.f2{
max-width: 100VW;
min-width: 100VW;
}
.f3{
max-width: 100VW;
min-width: 100VW;
}
.f2{
color:white;
font-family: noto sans arabic;
background-color: rgb(51, 50, 50);
font-size: 12px;
text-align: center;
padding-top: 3PX;
min-height: 30px;
}
.english{
font-family: abel;
font-size: 16px;
display: flex;
background-color: rgb(8, 90, 8);
width:125px;
min-height: 180px;
max-height: 180px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
margin-top: 10px;
}
.malayalam{
font-family: Noto Serif Malayalam;
font-size:14px;
background-color:rgb(82, 75, 14);
width:125px;
min-height: 180px;
max-height: 180px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
border-radius: 0 8px 8px 0;
margin-top: 10px;
}
.button{
display:inline-block;
}
.full1{
display:flex;
flex-direction: column;
padding-top: 20px;
}
.full2{
display:flex;
flex-direction: column;
padding-top: 20px;
}
.photo{
max-width:100px;
background-image: url(Images/Logo.png) ;
border-style: none;
margin: none;
background-size:contain;
background-repeat:no-repeat;
background-color: black;
background-position: center;
height:100px;
}
.header{
height:100px;
}
.header{
display:flex;
flex-direction: row;
height: 100px;
min-width: 100VW;
MAX-width: 100VW;
}
}
@media only screen and (max-width: 414px){
.content {
background-color: white:
margin-left: 0px;
padding-left: 0px;
min-height: auto;
}
.english{
font-family: abel;
font-size: 16px;
display: flex;
background-color: rgb(8, 90, 8);
width:125px;
min-height: 180px;
max-height: 180px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
margin-top: 10px;
}
.malayalam{
font-family: Noto Serif Malayalam;
font-size:14px;
background-color:rgb(82, 75, 14);
width:125px;
min-height: 180px;
max-height: 180px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
border-radius: 0 8px 8px 0;
margin-top: 10px;
}
.right{
display: flex;
flex-direction: row;
background-color: rgb(92, 89, 89);
min-width: 100VW;
max-width: 100VW;
justify-content: space-evenly;
}
.f1{
display: flex;
flex-direction: row;
color:rgb(15, 15, 15);
font-family: noto sans arabic;
font-size: 13px;
text-align: center;
}
.full1{
display:flex;
flex-direction: column;
padding-top: 20px;
padding-bottom: 10px;
}
.full2{
display:flex;
flex-direction: column;
padding-top: 20px;
padding-bottom: 10px;
}
}
@media only screen and (max-width: 350px){
.heading{
color:lightyellow;
background-image: url(Images/bg.jpg) ;
font-size: 24px;
height: 75px;
align-items: center;
justify-content: center;
padding-top: 10px;
}
.photo{
max-width:75px;
background-image: url(Images/Logo.png) ;
border-style: none;
margin: none;
background-size:contain;
background-repeat:no-repeat;
background-color: black;
background-position: center;
height:75px;
}
.header{
display:flex;
flex-direction: row;
height: 75px;
min-width: 100VW;
MAX-width: 100VW;
}
.right{
display: flex;
flex-direction: row;
background-color: rgb(92, 89, 89);
padding:0px;
min-width: 100VW;
max-width: 100VW;
justify-content: space-evenly;
padding-bottom: 10px;
padding-left: 15px;
font-size: 14px;
}
.english{
font-family: abel;
font-size: 14px;
display: flex;
background-color: rgb(8, 90, 8);
width:100px;
min-height: 120px;
max-height: 120px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
margin-top: 10px;
}
.malayalam{
font-family: Noto Serif Malayalam;
font-size:12px;
background-color:rgb(82, 75, 14);
width:100px;
min-height: 120px;
max-height: 120px;
overflow-wrap: break-word;
overflow-y: scroll;
overflow-x: none;
text-align: center;
color: white;
border-radius: 0 8px 8px 0;
margin-top: 10px;
}
.select{
width: 130px;
color: white;
font-family: roboto condensed;
background-color: rgb(27, 44, 121);
}
.select-container{
height: 200px;
width:250px;
border:none;
}
.left{
padding-top: 5px;
max-height:52px;
background-color: rgb(92, 89, 89);
display: flex;
flex-direction: row;
min-width: 100VW;
max-width: 100VW;
}
.f2{
background-color: rgb(92, 89, 89);
color:white;
font-family: noto sans arabic;
font-size: 10px;
text-align: center;
padding-top: 5PX;;
}
.l1{
background-color: rgb(157, 195, 230);
padding-left: 15px;
padding-right: 15px;
}
.l2{
background-color: rgb(169, 209, 142);
padding-left: 15px;
padding-right: 15px;
}
.l3{
background-color: rgb(166, 166, 166);
padding-left: 15px;
padding-right: 15px;
}
.l4{
background-color: rgb(240, 230, 140);
padding-left: 15px;
padding-right: 15px;
}
}