/* css/mystyle.css */

 :root {
     --yellow: #ffde14;
     --light-yellow: #f2f2b4;

     --light-orange: #fcc968;

     --green: #aed96c;
     --light-green: #c8df8c;

     --blue: #81d9ed;
     --dark-blue: #1b1464;

     --light-blue: #c3e7ed;

     --pink: #e07cb1;
     --light-pink: #e7c0cb;

     --dark-purple: #6652a1;
     --purple: #8f58b2;
     --light-purple: #a7bce2;
 }

 html {
    background-color: white;
 }

 body {
    max-width: 700px;
     background-color: var(--light-yellow);
     margin: 0px auto;
 }

 /* Background color classes */
.bg-yellow        { background-color: var(--yellow); }
.bg-light-yellow  { background-color: var(--light-yellow); }

.bg-light-orange  { background-color: var(--light-orange); }

.bg-green         { background-color: var(--green); }
.bg-light-green   { background-color: var(--light-green); }

.bg-blue          { background-color: var(--blue); }
.bg-dark-blue     { background-color: var(--dark-blue); }
.bg-light-blue    { background-color: var(--light-blue); }

.bg-pink          { background-color: var(--pink); }
.bg-light-pink    { background-color: var(--light-pink); }

.bg-dark-purple   { background-color: var(--dark-purple); }
.bg-purple        { background-color: var(--purple); }
.bg-light-purple  { background-color: var(--light-purple); }


 img {
     width: 100%;
     padding: 0px;
 }

 .w3-third {
     width: 33.33333% !important;
 }

 nav {
     border-bottom: black 3px solid;
 }

 .nav-button {
     width: 100%;
     padding: 0px 10px;

 }

 .nav-button .tab-button {
     padding: 0px !important
 }

 .bottom-nav {
     background-color: var(--light-green);
 }

 .head-regreg {
     width: 50%;
     margin: 0px auto;
 }

 .margin-top-20 {
     margin-top: 20px !important;
 }
 .margin-bottom-20 {
    margin-top: 20px !important;
}
.padding-side-20 {
    padding-left: 20px;
    padding-right: 20px;
}

 .w3-button:hover {
     background-color: transparent !important;
     filter: brightness(130%);
     -webkit-filter: brightness(130%);
     -moz-filter: brightness(130%);
     -o-filter: brightness(130%);
     -ms-filter: brightness(130%);
     -webkit-transition: all 0.50s;
     transition: all 0.50s;
 }

 .max-70 {max-width: 70vw;}
 .max-60 {max-width: 60vw;}
 .max-50 {max-width: 50vw;}
 .max-30 {max-width: 30vw;}

 .round-box {
    background-color: #fafaf0;
    border: solid 3px black;
    border-radius: 3vw;
    box-shadow: 3vw 3vw black;
 }

 .w3-input {
    border: solid 1px gray;
    border-radius: 1vw;
    margin-bottom: 20px;
 }

 fieldset { margin-bottom: 20px;}