/* reset css */
article, aside, figcaption, figure, 
footer, header, main, nav, section{
    display: block;
}

address, article, aside, blockquote, 
body, cite, div, dl, dt, dd, em, 
figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, ol, p, section, span, ul{
    background: transparent;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

nav ul{
    list-style: none;
    list-style-image: none;
}

nav a{
    text-decoration: none;
}

body{
    line-height: 1;
}




:root{
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  --background-page: whitesmoke;
  --background-section: #fbfbfb;
  --background-accent: honeydew;
  --background-button: #9bfdca;
  --text-base: black;
  --text-accent: #428d6d;
  --text-accent-dark: #335242;
  --border: black;
  --border-accent: #428d6d;
  --shadow: #00000033;
  --shadow-accent: #002f02;
  --secondary-accent: #00000088;
  --form-background-wip: #aecbfb33;
  --form-background-valid: #9bfdca55;
  --form-background-invalid: #fcb9bf55;
  --background-selected: #aecbfb99;
}

body{
  max-width: 900px;
  min-width: 330px;
  width: 95%;
  margin: 0 auto;
  padding: 10px 5px;
  background-color: var(--background-page);
  color: var(--text-base);
}

::selection{
  color: var(--text-base);
  background-color: var(--background-selected);
}


div{
  display: flex;
  flex-flow: column nowrap;
  gap: 20px;
}


img {
  width: 80%;
}