/* This is the style for the Koala Site*/

@import url('https://fonts.googleapis.com/css2?family=Protest+Guerrilla&family=Ruslan+Display&display=swap');

* {
    margin:0;
    padding:0;
}

body {
    background-color: rgb(233, 233, 212);
    font-family: Arial, Helvetica, sans-serif;
   
}

#container {
    width:90%;
    max-width:1025px;
    border: 4px solid darkgreen;
    margin: 12px auto;
    border-radius: 25px;
    box-shadow: 15px 15px 15px 5px rgba(0, 0, 0, 0.5);
    background-color:white;
}
 img.banner {
    width:100%;
    height:auto;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
 }

p {
    line-height: 1.6;
    font-size:1.2em;
    padding: 0 1.5%;
}

h1, h2, h3, h4 {
    color:#ff6347;
    text-align: center;
    text-decoration: overline;
    text-decoration-color: green;
    font-family: "Ruslan Display", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top:1.5%;

  }

  h1 {
    border-top:4px solid green;
    text-decoration:none;
    padding-top:1.5%;
    margin-top:1.5%;
  }




ol li {
    color:rgb(3, 66, 161);
    font-size:1.2em;
    margin: 0 5%;
}

p strong {
    color:darkred;
}

.bluebackground {
    background-color:lightblue;
}

.greenbackground {
    background-color:lightgreen;
}

.red {
    color:red;
}

li.purple  {
    color:purple;
}

/* styling of the navbar*/

nav {
    background-color:lightblue;
    text-transform:uppercase;
    //text-align:center;
    //padding: 1.15%;
    font-weight:bold;
}

nav ul  {
    display:flex;
    flex-direction:row;
    justify-content:center;
}

nav li {
   
    list-style-type: none;
    display:inline;
    padding:.5em;
    
}

nav ul li a {
    color:darkgreen;
    text-decoration:none;

}

nav ul li a:hover {

    color:#ff6347;
}


.cap::first-letter {
    color:red;
    font-size:xx-large;
}




img.left  {
    float:left;
    margin: 0 5% 5% 2%;
    border:4px solid green;
    padding:8px;
    background-color:lightblue;
}

img.right  {
    float:right;
    margin: 0 2% 5% 5%;
    border:4px solid green;
    padding:.5em;
    background-color:lightblue;
}

.clearfloat {
    clear:both;
}

footer {
    color:white;
    background-color:black;
    text-align:center;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;

}

footer a {
    color:white;
    background-color:black;
    text-align:center;
    
}


@media only screen and (max-width: 600px) {
    nav ul  {
        flex-direction:column;
        align-items: center;
    }
    #container {
        width:100%;
        border:none;
        margin: 0;

  }