@charset "utf-8";
/* CSS Document */

/* || VARIABLES */
:root {
    /* FONT */
    --FF:"Nunito", sans-serif;
    --FS: 1.2em;
    --FS-XL: 2em;
  
    /* COLOR */
    --BGCOLOR: #475569;
    --DARK-COLOR: black;
    --FOOTER-COLOR: grey;
    --HEADER-COLOR: rgb(145, 155, 192);
    --LIGHT-COLOR: whitesmoke;
    
    /* GENERAL */
    --MAIN-PAD: 1em;
    --BORDER-RADIUS: 1em;
    --SHADOW:0 6px 5px -5px var(--DARK-COLOR);
   }


html {
    font-family:var(--FF);
}

* {
    margin: 0;
} 

main {
    background: var(--BGCOLOR);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}

h1 {
    text-align: center;
    color: var(--LIGHT-COLOR);
}

#flex_container {
    margin: 0;
    margin: 1em;
    margin-left: 1.4em;
    font-size: 1.1em;
    padding: 1em;
 }

input {
    padding: .5em;
    margin-bottom: .9em;
    margin-top: .2em;
    width: calc(97% - 1em);
}

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten {
    background: var(--LIGHT-COLOR);
    font-size: var(--FONT-SIZE);
    padding-left: .5em;
    margin: 0;
    width: calc(100% - 1em);
}

#one, #three, #five, #seven, #nine {
    background: var(--LIGHT-COLOR);
    padding-left: .5em;
    
    margin: 0;
    margin-right: 1em;
}

button {
    padding: .5em 0;
    background: rgb(91, 157, 157);
    border: 1px solid black;
    border-radius: .4em;
    width: calc(95% - 2em);
    font-size: 1.2em;
    box-shadow: var(--SHADOW);
    color: var(--LIGHT-COLOR);
}

#submit {
    margin-bottom: 1em;
    width: calc(45% - 1em);
}

.btn :hover {
    opacity: .9;
}

.current {
    opacity: .2;
    box-shadow: 0;
}

nav {
    display: flex;
    justify-content: space-arround;
    margin: 1.3em 0;
}

header {
    display: flex;
    justify-content: space-between;
    padding: 1.4em;
    background: var(--HEADER-COLOR);
}

header .center {
  margin-right: 12%;
}

footer {
    display: flex;
    justify-content: space-between;
    padding: 1.4em;
    background: var(--HEADER-COLOR);
}

footer .center {
    margin-left: 10%;
  }

footer .right {
    text-align: end;
}

.btn {
    display: flex;
    justify-content: center;
    padding: 0;
    width: 100%;
}

h1 {
    color: var(--DARK-COLOR);
}

h2 {
    color: var(--DARK-COLOR);
    margin-bottom: .2em;
}

p {
    font-size: var(--FS);
}

img {
    width: 50%;
}

#copy {
    margin: 0;
    padding: .2em;
    background: var(--HEADER-COLOR);
    text-align: center;
    opacity: .9;
    font-size: 1em;
    color: var(--LIGHT-COLOR);
}

#index1 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
    display: flow-root;
}

#index2 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
    display: flow-root;
}
#index3 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
    display: flow-root;
}

#index4 {
    padding: 1em;
    margin: .5em;
    background: var(--LIGHT-COLOR);
    border-radius: .1em;
    display: flow-root;
}

#index1 img {
    float: right;
    width: 25%;
    height: auto;
}

#index2 img {
    float: right;
    width: 25%;
    height: auto;
}

#index3 img {
    float: right;
    width: 25%;
    height: auto;
}

#index4 img {
    float: right;
    width: 25%;
    height: auto;
}

.logo {
    height: 2.2em;
    width: auto;
}

textarea {
    width: calc(100% - 1em);
    height: 6em;
}

@media screen and (min-width: 650px){      
    #flex_container {
     display: flex;
     flex-wrap: wrap;
    }
 
     #one, #two, #three, #four, #five, #six, #seven, #eight, #nine, #ten {
         width: calc(50% - 1em);
         margin: 0;
         
     }
    
    
 }