@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&display=swap');

/*This part is to change the elements of the website*/
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    background-color: aliceblue;
    font-family: Arial, Helvetica, sans-serif;
}

header {
    margin: 1rem;
}

h1 {
    font-size: 3rem;
    padding: 1rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
    border-top: .1rem solid forestgreen;
}

h1,
h2 {
    text-align: center;
}

h1,
h2,
h3 {
    color: #005f0e;
    text-transform: uppercase;
    font-family: 'Merriweather', serif;
}

h2,
h3 {
    padding: .25rem;
    margin: .5rem;
}

p {
    color: hsl(85, 0%, 21.2%);
    text-align: justify;
    padding: 0.5rem;
    margin: 1rem;
    font-size: 1rem;
}

nav {
    display: flex;
    background-color: #ffc937;
    padding: 0.50rem;
    border-color: black;
    border-style: groove;
    border-width: .5rem;
    border-radius: .5rem;
    justify-content: space-evenly;
    align-items: center;
    gap: 1rem;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    list-style-type: none;
    align-items: center;
    gap : 2.5rem;
    padding-left: 0rem;
    font-weight: 700;
}

nav a {
    text-decoration: none;
    padding: 0.25rem;
}

nav a:link, nav a:visited {
    color: #003300;
}

nav a:hover,
nav a:focus {
  background-color: #e6b800;
  color: #ffffff;
  border-bottom: 2px solid #003300;
  outline: none; 
}

ol,
ul {
    text-align: justify;
}

a {
    text-decoration: none;
}

a:link,
a:visited {
    color: rgb(9, 192, 9);
}

a:hover,
a:focus {
    color: hsl(110, 80%, 21%);
}

header {
    background-color: #ffc937;
    margin-top: .5rem;
}

footer a {
    margin: .5rem;
    padding: .5rem;

}
/*This part is to change the different classes of the website*/

.images {
    width: 25rem;
    max-width: 100%;
    height: 15rem;
    border: .25rem solid darkgray;
}

.right {
    float: right;
}

.left {
    float: left;
}

.home-main .clearfix {
    overflow: auto;
}

ol.about-ordered-list {
    list-style-type: lower-latin;
    list-style-position: inside;
    margin-left: 1.5rem;
    padding: 0.5rem;
}

ul.about-unordered-list {
    list-style-type: square;
    list-style-position: inside;
    margin-left: 1.5rem;
    padding: 0.5rem;
}

.faq {
    margin-bottom: 1.5rem;
}

.dropcap::first-letter {
    font-size: 1.5rem;
    font-weight: 700;
    float: left;
    margin-right: 0.1rem;
    line-height: 1.0rem;
}

.faq-questions {
    list-style-image: url(images/leaf-1-24.png);
}

.columns h2 {
    column-span: all;
    margin-bottom: 1rem;
}

.columns p {
    margin-top: 0%;
    padding-top: 0%;
    display: inline-block;
}

.columns {
    column-count: 3;
    column-gap: 1.5rem;;
    column-rule: .15rem solid forestgreen;
    column-width: 15rem;
}

.about-footer {
    clear: both;
}

.container {
    max-width: 1200px;
    margin: auto;
    padding: 1.25rem;
}

/*This part is to change the #id of the website*/
#cute-koala {
    margin: .50rem;
    
}

#koala-picture {
    margin: .50rem;
}

#baby-koala {
    margin: .5rem;
}

#koala-banner {
    width: 100%;
    margin-bottom: -.25rem;
}

#koala-video {
    padding: 0.5rem;
    margin: 0.5rem;

}

#home-para1 {
    color: white;
    background-color: darkgreen;
    margin: 1rem;
    padding: .75rem;
    display: block;
    border-radius: .5rem;
    clear: left;
}

#FactSheet {
    padding: .5rem;
    background-color: rgb(167, 84, 25);
    border-style: groove;
    border-color: black;

}

#koala-sitting {
    margin-bottom: 1rem;
}

#koala-resting {
    margin-bottom: 1rem;
}

/*Adopt a koala flex container*/
form {		
    display: flex;
    flex-direction: column; 
    background-color:#BDCFDB;;
    width:90%;
    padding:0.5em;
    margin:1.5em auto;
    border:thin solid black;
    border-radius:10px;
}
		
 	
.flex-form {
    display: flex;
    margin-bottom:0.3em;
}



.flex-form label {

    text-align: right ;
    margin-top: 0.5em;
    margin-right:0.5em;
}	
    
.flex-form input, select, textarea {
    flex: 1;
}
        
        
.flex-radio  {
    display:flex;

    flex-direction: row;
    justify-content: start;
    margin-left:1.8em;
    margin-top:1.2em;
    margin-bottom:1.2em;
}
    

    
.flex-radio  label {
margin-right:1.8em;}

.flex-buttons  {
    display:flex;
    justify-content: start;
    gap: 8px;
}



textarea {
    height:200px;
    width: 100%;
}

fieldset {	
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin:0.5em;
    padding:0.5em;
}

/* End flex css */