/*This is Amanullah's styles for koalas page*/
/*FAQ is for internal and koala home is for inline on the first paragrph*/

@import url('https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&family=Noto+Sans+Telugu:wght@100..900&family=Oswald:wght@200..700&display=swap');
/*this is the body*/
body {
    background-color: lightgreen;
}
/*this is Header with custom font*/
h1 {
    color: purple;
    font-family: "Mukta", sans-serif;
    font-weight: 800;
    font-style: normal;
    text-shadow: 0.06em 0.06em purple;
    text-decoration-line: underline;
    text-align: center;
}
/*Same thing but with not extra text decoration but grouped for two headers*/
h2, h3{
    color: purple;
    font-family: "Mukta", sans-serif;
    font-weight: 700;
    font-style: normal;
}
/*this is regular fonts*/
p {
    font-family: Tahoma, Verdana, sans-serif;
}
/*this is regular fonts*/
li {
    font-family: Tahoma, Verdana, sans-serif;
}
/*this is adecendent color style for every ordered list item*/
ol li {
    color: red;
}
/*this is a independent class can be used anywhere but here for ol li in save koalas*/
.background {
    background-color: black;
}
/*this is dependent class only user for h2 used in save koalas*/
h2.darkblue {
    color: darkblue;
}
/*this is a decendent color style for navigation*/
nav ul li a {
    text-decoration: none;
    color: firebrick;
}
/*this is a decendent color style for navigation but with psuedo-class*/
nav ul li a:hover {
    text-decoration-line: underline;
    color: yellow;
}
/*this is to make the nav in one line*/
nav ul {
  list-style-type: none;
  margin: 0em;
  padding: 0em;
  display: flex; 
}
/*This is to have the nav look good*/
nav ul li {
  display: inline-block;
  padding: 2.5% 2.7%;
  text-decoration: none;
/*This makes sure brower does not use its own settings for margin and padding*/
}
* {
   margin: 0;
   padding: 0;
}
/*This is the container or boarder around the website*/
#container {
    background-color: tan;
    width: 80%;
    max-width: 84.17em;
    border: 0.75vh solid magenta;
    margin-left: auto;
    margin-right: auto;
    padding: 2em;
}
/*This makes sure the banner picture is not distoreted on different sizes of screens*/
img.banner {
    width: 100%;
    height: auto;
}
/*Footer editing*/
footer {
    text-align: center;
    margin-top: 4.33em;
    background-color: aliceblue;
    padding: 3.33em;
}
/*Float image to the left*/
img.floatleft {
    float: left;
    padding: .25em;
    border: .25em solid red;
    background-color: red;
    margin-top: .25em;
    margin-bottom: .25em;
}
/*Makes sure item is on its own line*/
.clear {
    clear: both;
}
/*A shadow for the image apperance*/
img.shadow  {
    box-shadow: -.6250em  .6250em .315em .315em rgba(0, 0, 0, 0.5);
    float: right;
    border-style: groove;
    margin-bottom: 5%;
}
/*Centers the nav*/
nav ul {
display:flex;
flex-direction:row;
justify-content:center;
}
form {
    width: 85%;
    max-width: 900px;
    border: 2px solid black;
    margin: 0 auto;
    padding: 0.5em;
    list-style-type: none;
    border-radius: 15px;
    background-color: lightgreen;
}
legend {
    margin: 0 auto;
    text-decoration-line: underline;
    text-align: center;
}
fieldset {
    border: 1px solid rgb(53, 51, 51);
    margin-bottom: 3px;
    padding: 5px;
    background-color: lightgreen;
}
section {
    display: flex;
    justify-content: space-evenly;
    padding: 0.5em;
}
label {
    flex: 1;
    text-align: right;   
    margin-right: 10px;
    padding: .05em;
}
input {
    flex: 2;
}
.label {
    display: flex;
    flex-direction: column;
}
.label label {
    text-align: left;
}
.button {
    display: flex;
    justify-content: space-evenly;
}
button {
    width: 100px;
}
/*A medua query to output customized display values for smaller screens*/
@media only screen and (max-width  : 600px) {
    #container {
        width:100%;
        margin:0;
        border: none;
        padding: 0.234em;
    }
    /*stacks the nav*/
    nav ul {
        flex-direction:column;
        align-items: center;
    }
    img.shadow  {
    margin-left: 1.1em;
    margin-right: .1em;
}
    /*Center the header and make it smaller*/
    h1 {
        font-size: large;
    }
    form {
        width: 95%;
    }
    legend {
        text-decoration-line: none;
    }
    section {
        flex-direction: column;
    }
    label {
        text-align: left;
    }
    .button {
    display: block;
    text-align: center;
    }

}
/*Center the header and make it smaller*/
@media only screen and (max-width  : 750px) {
    h1 {
        font-size: large;
    }
}