@media screen and (max-width: 600px) {
    nav ul li {
        float: none;
        width: 100%;
    }
    nav ul li ul {
        position: relative;
    }
}

/*

https://www.w3schools.com/css/tryit.asp?filename=trycss3_media_queries2

You can also link to different stylesheets for different media and different widths of the browser window (viewport):

<link rel="stylesheet" media="print" href="print.css">
<link rel="stylesheet" media="screen" href="screen.css">
<link rel="stylesheet" media="screen and (min-width: 480px)" href="example1.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="example2.css">

*/

div {
  font-family: Arial, Verdana, Helvetica, sans-serif;
}

p, h1, h2, h3, ul, ol {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color:#000000; /* #489D4A; #808080; */
}

p.text {

}

p.question {
  font-weight:bold;
  color:#489D4A;
}

p.slogan {
  font-weight:bold;
  color:#489D4A;
}

p.quote {
  margin-top:0;
  margin-bottom:0.1em;
  color:#5F009A; /* #7200B8; */
}

p.voice {
  margin-top:0;
  margin-bottom:0.8em;
  color:#336F34;
}


h1, h2, h3 { 
  font-weight:bold;
  font-size:1em;
  margin-top:1.2em;
  margin-bottom:0.4em;
}

h1 {
  color:#489D4A;
}

h2 {

}
h3 {

}

ul {
  margin-top:0;

}

.emphasis {
  font-weight:600;
}

.text_violet {
  color:#9933FF
}

.image_left {
  margin-top:0.5em;
  margin-bottom:0.5em;
}
.image_center {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top:0.5em;
  margin-bottom:0.5em;
}

hr {
  background: linear-gradient(to right, #B233FF, #489D4A);
  height: 3px;
  border: 0;
}

.flex_container {
  display: flex;
  /* flex-direction: row; */
  justify-content: space-between;
  align-content: flex-start;
  flex-wrap: no-wrap;
  margin-top: 0;
}

.embedded_video {
/*
  display: flex;
  justify-content: center;
  align-items: center;
*/
  margin-top:1em;
  margin-bottom:1em;
}

/* Content container */
.content {
  margin-top: 0.5em;
}

/* Footer container */
div.footer {
  margin-top: 2em;
}

p.footer {
  text-align: center;
  margin-top: 0.4em;
  color: #B233FF;
}

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #B233FF; 
/* #9933FF #333; */
  font-family: Arial, Verdana, Helvetica, sans-serif;
/*  position: fixed; */
  top: 0;
  left: 0;
  width: 100%;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Add a special background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color:#489D4A; /*  red; #489D4A */
}

.navbar a.active, .dropdown a.active .dropbtn {
  background-color:#489D4A; /*  red; #489D4A
}