/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background-color:rgb(227, 213, 196)}

#container {
  display:flex;
  flex-direction:column;
  width: 90%;
  background-color: white;
  border: 2px solid black;
  margin: 10px auto;
  border-radius: 25px;
  box-shadow: 15px 15px 10px rgba(0, 0, 0, 0.5); }

header {
  background-color: hsl(257, 60%, 88%);
  color:black;
  text-align: center;
  padding: 20px;
  border-radius: 23px 23px 0 0; }

nav {
  background-color: hsl(257, 60%, 25%);
  color: white;
  text-align: center;
  padding: 24px; }

  nav ul {
    display:flex;
    flex-direction:row;
    justify-content:space-around;
  }
  nav li {
    display: inline;
    list-style-type: none;
    margin-right: 1.2em; 
    text-transform: uppercase;}

h3 {
  text-align: center;
  padding:.75em; }


main {

  display:flex;
  flex-direction:row;
   }

#columna {
  background-color:rgb(158, 216, 158);
  padding:0.55em;
  order:3;
  flex:1;

}
#columnb {
  background-color:lightskyblue;
  padding:0.55em;
  order:2;
  flex:3;
}

#columnc {
  background-color:lightsalmon;
  padding:0.55em;
  order:1;
  flex:1;
}

footer {
  display:flex;
  flex-direction:row-reverse;
  justify-content: space-around;
  align-items:center;
  color: white;
  background-color: hsl(257, 60%, 25%);
  padding: 1.5em;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px; }


 .floatleft {
  float:left;
  margin-right:.5em;
 }

 .floatright {
  float:right;
  margin-left:.5em;
 }

 p {
  margin-top:0.5em;
 }

@media only screen and (max-width: 600px)

{

  #container {
    width:100%;
    margin:0;
  }

  nav ul {
    flex-direction:column;

  }
  main  {
    flex-direction:column;
  }

  .floatleft {
    display:block;
    float:none;
    margin:.5em auto;
   }
  
   .floatright {
    display:block;
    float:none;
    margin:.5em auto;
   }


}