@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root { --lightcolor:#669900; 
        --darkcolor: #666633;
        --deepdarkcolor:#446600;} 
        
/*Colors blue: #0073e6, #0059b3,#004080  or green: #669900, #666633, #446600 or red: #cc0000, #8f1313, #540a0a or yellow: #e6b800, #b38f00, #997a00, */

body
{/*background-color:#ddd;*/
background-image:url('../images/spring.jpg');
font-family:open sans;
font-weight:300;
line-height:150%;
min-height:10%;
margin:0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;}

h2
{color:#446600;}

h3
{color:#446600;}

a
{color:#446600;}

#logo 
{position: absolute;
margin-top:50px;
padding: 10px 5px 3px 5px;}

#nav
{height:50px;
width:100%;
background-color: #669900;
text-align:center;
position:fixed;
margin-bottom:30px;
margin-right:auto;
margin-left:auto;}

#nav a
{display: none;}

#nav ul 
{padding:0;
list-style: none;
position: relative;
display: inline-table;}

#nav ul:after 
{content: "";
clear: both; 
display: block;}

/*Top Level Navigation Menu */

#nav ul li 
{float: left;
padding: 0 20px;}

#nav ul li:hover 
{background:  var(--darkcolor);
border-radius: 40px;}

#nav ul li a 
{display: block; 
color: #fff;
font-weight:500;
text-transform: uppercase;
text-shadow: 2px 2px var(--darkcolor);
text-decoration: none;
font-size: 1em;}

/*Sub Level Navigation Menu */

#nav ul li:hover > ul 
{display:block;
background: var(--lightcolor);
width:auto;
padding:5px;}

#nav ul ul 
{display:none;
position: absolute; 
width:auto;
margin: 0 -20px;
z-index:1;
top: 100%;}

#nav ul ul li
{float: none; 
font-size:0.8em;
position: relative;}

/*End of Navigation Menu */

#content
{clear:both;
padding:30px;
margin-left: auto;
margin-top:120px;
margin-right: auto;
margin-bottom:100px;
background-color:#fff;
opacity:1;
color: #000;
width:679px;
top: 120px;
z-index:-2;}

#invite
{display: -webkit-flex; /* Safari */
-webkit-flex-direction: row; /* Safari 6.1+ */
display: flex;
flex-direction: row;}

/*Footer*/

#footer
{clear:both;
bottom:0;
background-color: var(--lightcolor);
font-family:open sans;
font-size:0.9em;
font-weight: 500;
color:#fff;
text-align:center;
text-shadow: 2px 2px var(--darkcolor);
width:100%;
padding-top:3px;
position:fixed;}

#footer ul
{padding:0;
margin:0;
list-style: none;
display: inline-table;}

#footer li
{display:block;
float:left;}

/*End of Footer*/

/* Button container */

.button 
{background-image: linear-gradient(to bottom,var(--lightcolor),var(--darkcolor));
border-radius:40px;
border: none;
outline: 0;
padding: 10px 20px;
display: block;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
cursor: pointer;
font-family:"Palatino Linotype","Georgia","Corbel", "Arial";
font-size: 16px;
text-transform: uppercase;
text-shadow: 2px 2px var(--darkcolor);
text-align: center;
text-decoration: none;
color: white;
-webkit-transition-duration: 0.4s; /* Safari */
-moz-transition-duration: 0.4s; /* Firefox */
-o-transition-duration: 0.4s; /* Opera */
transition-duration: 0.4s;}

.button:hover 
{box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);}

.button:active
{border:none;}

/*End of Button*/

/*Input*/

input[type="text"] 
{font-family:"proxima-nova", "Open Sans","Gill Sans MT","Gill Sans", "Corbel", "Arial" , sans-serif;
padding: 10px;
border: solid 1px var(--lightcolor);
transition: box-shadow 0.3s, border 0.3s;}

input[type="text"].focus 
{border: solid 1px var(--lightcolor);
box-shadow: 0 0 5px 1px var(--darkcolor);}

input[type="email"] 
{font-family:"proxima-nova", "Open Sans","Gill Sans MT","Gill Sans", "Corbel", "Arial" , sans-serif;
padding: 10px;
border: solid 1px var(--lightcolor);
transition: box-shadow 0.3s, border 0.3s;}

input[type="email"].focus 
{border: solid 1px var(--lightcolor);
box-shadow: 0 0 5px 1px var(--darkcolor);}

/* Popup container */

.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;}

/* The actual popup*/
.popup .popuptext {
    visibility: hidden;
    width: 350px;
    background-color: var(--darkcolor);
    color: #fff;
    text-align: left;
    padding:8px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    transform:translate(-25%,50%);
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent;}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}}

/*End of Popup*/


/*Display on smaller screens*/

@viewport {zoom: 1.0; width: device-width;}
@media screen and (max-width: 700px) /* for 700 px or less*/{
    
body {font-size:110%;background-image:none;}

h2, h3 {font-size:110%;}

table {overflow-x: auto; display: block; }

#logo {display:none;}

#content {clear:both;width:80%;margin-top:5px;}

#nav {position: relative; padding-top:10px;margin-bottom:0; z-index:1;}
#nav > a{color: #fff;font-weight: 500;text-decoration: none;text-transform: uppercase;}
#nav:not( :target ) > a:first-of-type,
#nav:target > a:last-of-type {display: block;}
#nav > ul{height: auto;display: none;position: absolute;left: 0;right: 0;}
#nav > ul > li {width: 100%;}
#nav:target > ul{display:block;background: var(--lightcolor) ;padding: 5px 5px;left:35%;right:35%;}
#nav ul li {float: left;padding: 5px 0;text-align:center;}
#nav ul li a {font-size: 0.8em;}
#nav ul li:hover {background: var(--darkcolor);padding: 5px 0;}
#nav ul li:hover a {font-size: 0.8em;}
#nav ul li:hover > ul {display:none;}
#nav ul ul li {display:none;}

#signup {clear:both;}

#footer{font-size:70%;}