/*
Application Rangalaaf Website
Filename default.css
Directory /styles
Created May 15, 2026
Author Team
Updated May 18, 2026, May 17, 2026, May 16, 2026, May 15, 2026
Updator Team
*/

html{
color-scheme:light dark;
--bgcolor:light-dark(#ffffff,#000000);
--textcolor:light-dark(#000000,#ffffff);
font-size:100%;
}

body{
background-color:var(--bgcolor);
color:var(--textcolor);
padding:0px;
margin:0px;
box-sizing:border-box;
font-family:arial,helvetica,sans-serif;
font-weight:400;
font-style:normal;
line-height:1.5;}

header{width:100%;position:fixed;top:0;left:0;z-index:1000;display:flex;background-color:var(--bgcolor);border-bottom:1px solid #cccccc;box-shadow:0 2px 4px #00000000;align-items:center;justify-content:space-between;box-sizing:border-box;padding:4px 24px 4px 8px}
.logo{display:flex;align-items:center;justify-content:left;gap:4px;font-size:200%;font-weight:700;padding:4px 16px 4px 16px}
.hero{}
.page{width:100%;min-height:80vh;overflow:auto;box-sizing:border-box;padding:4px 24px 24px 24px}
footer{width:100%;min-height:100px;display:flex;background:#d2921e;align-items:flex-end;justify-content:center;box-sizing:border-box;padding:8px 16px 8px 16px}

/*Menu*/
.menu{display:flex;justify-content:space-between;align-items:center;padding:0.5rem 5%}
.menu0{display:flex;list-style:none}
.menu0 li{position:relative}
.menu0 a{display:block;padding:1.0rem 1.25rem;color:#000000;text-decoration:none}
.menu1{display:none;position:absolute;background:#cccccc;min-width:150px;top:100%;list-style:none}
.menusub:hover .menu1{display:block}
.menui{width:2.0rem;cursor:pointer;display:none;filter:invert(1);}

@media screen and (max-width:1080px){
.menui{display:block}
.menu0{display:none;flex-direction:column;position:absolute;top:60px;left:0;width:100%;background-color:#c0c0c0}
.menu1{position:static;background-color:#aaaaaa}
.menusub:hover .menu1{display:block}
}

h1{}
h2{}
h3{}
h4{}

a{text-decoration:none;color:#000000}
a:visited{text-decoration:none;color:#000000}
a:hover{text-decoration:underline;color:#0000ff}

@media screen and (max-width:1080px){
body{
font-size:clamp(1.25rem,4vw,2.0rem);}
header{height:80px;}
.page{margin-top:80px}
.logo{height:100px;}
.logoi{height:80px;border:0px;}
input.data{width:80%;padding:0.25rem;font-size:125%}
select.data{width:80%;padding:0.25rem;font-size:125%}
textarea.data{width:80%padding:0.25rem;font-size:125%}
input.databutton{width:30%;background-color:#00ff00;padding:0.25rem;font-size:125%}
}


@media screen and (min-width:1081px){
body{
font-size:clamp(1.0rem,3vw,1.25rem);}
header{height:80px;}
.page{margin-top:80px}
.logo{height:80px;}
.logoi{height:60px;border:0px}
input.data{width:400px;padding:0.25rem;font-size:100%}
select.data{width:400px;padding:0.25rem;font-size:100%}
textarea.data{width:400px;padding:0.25rem;font-size:100%}
input.databutton{width:96px;background-color:#00ff00;padding:0.25rem;font-size:100%}
}


/*End of File*/