@import url('https://fonts.googleapis.com/css2?family=Bungee+Outline&family=Dosis:wght@200..800&family=Monoton&display=swap');

/* reset */ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/* new stuff below */
nav {font-family: "Dosis", sans-serif;
      font-size: 1em;
      color: #A795BB;
      display: flex;
    text-align: center;}

#menu-btn {
  position: absolute;
  top: -100%;
  left: -100%;
}

.menu-icon {
  visibility: hidden;
}
.menu {
  display:inline;
  justify-content: center;
  align-items: center;
  max-width: 250px;
  margin-right: 2rem;
}

 nav li {display: inline-flex;}

@media screen and (max-width: 750px) {
  header {
    display: grid;
    grid-template-areas:
      "title   title   hamburger"
        "nav     nav     nav     nav";}{input[type="checkbox"]:not(:checked) + ul {
        display: none;}
  }
    
h1 {
    grid-area: title;
  }
  .menu a {
    text-decoration: none;
    color: #726680;
  }

.menu-btn {
    display: none;
  }
  .menu-icon {
    grid-area: hamburger;
    cursor: pointer;
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding: 30px 20px 30px 0;
    position: relative;
    user-select: none;
    visibility: visible;
  }
  .navicon {
    background: #726680;
    display: block;
    height: 2px;
    width: 18px;
    position: relative;
  }
    
.navicon:before {
    top: 5px;
  }
  .navicon:after {
    top: -5px;
  }
  .navicon:before,
  .navicon:after {
    background: #726680;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    transition: all 0.2s ease-out;
  }
    
.menu {
    grid-area: nav;
    max-width: unset;
    max-height: 0;
    transition: max-height 0.2s ease-out;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background-color: #A795BB;
    display: flex;
    flex-direction: row;
  }
  .menu a {
    padding: 10px 10px;
    border-right: 1px solid pink;
    background-color: #F1EBFF;
    width: 100%;
    text-align: center;
  }
  .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  .menu-btn:checked ~ .menu-icon .navicon:before,
  .menu-btn:checked ~ .menu-icon .navicon:after {
    top: 0;
  }
}


/* CSS Text and Images */
main {width: 90%; margin: auto; padding: 1em;}

body {background-color:#E7E1F5;}

h1 {font-family: "Monoton", sans-serif; font-size: 4em; text-align: center; padding-bottom: .25em; color: #A795BB;}

p {margin: 1em; font-family: "Dosis", sans-serif; font-size: 1.5em; line-height: 1.25em; color: #726680;}

h2 {font-family: "Bungee Outline", sans-serif; font-size: 2.5em; text-align: center; color: #726680; padding-top: .25em;}

footer {font-family: "Monoton", sans-serif; text-align: center; color: #A795BB; padding-top: .5em;}

div span {font-family: "Dosis", sans-serif; text-align: center; font-style: italic; display: block; color:#A795BB;}

a {text-decoration: underline; color: #A795BB; font-size: 1.5em;}

li {font-family: "Dosis", sans-serif; font-size: 1.5em; color: #726680; padding: .25em;}



p span {font-family: "Dosis", sans-serif; font-size: .75em; color: #726680;}

.button {background:#F1EBFF; color:#726680; font-family: "Bungee Outline", sans-serif; padding: .5em 1em; font-size: 1em; border-color: #F1EBFF; border-style: groove; display: inline; justify-items: center;}

label {display: block; margin-bottom:.5em;}

.FormList label {display: inline; font-size: .75em;}


/* images layout */

.index-pic {width: 850px; display: block; margin: auto; padding: .5em;}

.flex-container1 {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;}
    
    .flex-item1 {padding: 1px; width: 500px; margin-top: 5px;}

.flex-container2 {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;}
    
    .flex-item2 {padding: 1px; width: 500px; margin-top: 5px;}

.flex-container3 {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around;}
    
    .flex-item3 {padding: 1px; width: 500px; margin-top: 5px;}

img {width: 100%;}

@media screen and (max-width: 955px) {.index-pic {width: 450px;}}