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

body {
background-color: white;
color: black;
display: flex;
flex-direction: column;
flex-wrap: wrap;
font-family: sans-serif;
font-size: 4vw;
line-height: 136%;
margin: 0;
min-height: 100vh;
padding: 0;
text-size-adjust: none; 
}

a {
color: mediumblue;
text-decoration: underline;
}

p {
margin: 0 0 6.4vw;
}

h1, h6 {
display: block;
font-size: 100%;
font-weight: bold;
line-height: 136%;
margin: 0 0 6.4vw;
padding: 0;
text-decoration: underline;
}

h6 {
font-weight: normal;
margin: 0 0 1.6vw;
}

ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}

li {
margin: 0 0 6.4vw 0;
width: 100%;
}

li:nth-child(4n) {
margin-right: 0;
}

li img {
display: block;
height: auto;
width: 100%; 
}

li span {
display: none;
}

ul ul {
display: block;
font-size: 72%;
margin: -6.4vw 0 -6.4vw 3.2vw;
}

ul ul li,
ul ul li:nth-child(2n) {
margin: 0;
width: 100%;
}

ul ul:last-of-type {
margin-bottom: 16%;
}

header {
margin: 6.4vw 6.4%;
width: 87.2%;
}

nav {
background-color: white;
padding: 6.4vw 0;
position: relative;
}

main {
flex: 1;
margin: 6.4vw 6.4%;
width: 87.2%;
}

main p img {
display: block;
float: right;
height: auto;
width: 100%;
}

form {
display: flex;
flex-direction: row;
margin: 0 0 1.6vw;
}

input,
button {
border: 1px solid gray;
border-radius: 0.2vw;
box-sizing: border-box;
color: black;
font-family: sans-serif;
font-size: 100%;
margin: 0;
padding: 3.2vw;
}

input {
margin-right: 1%;
width: 64%;
}

button {
cursor: pointer;
}

#About {
width: 80%;
}

#Contact {
margin-top: 12.8vw;
}

.no {
color: gray;
position: absolute;
z-index: -8;
}

footer {
margin: 12.8vw 6.4% 0;
width: 87.2%;
}

/* Medium */
@media only screen and (min-width: 480px) {

body {
flex-direction: row;
font-size: 1.6vw;
}

p {
margin: 0 0 3.2vw;
}

h1, h6 {
margin: 0 0 3.2vw;
}

h6 {
margin: 0 0 1.6vw;
}

ul {
flex-direction: row;
}

li {
margin: 0 1% 1% 0;
width: 49.5%;
}

li:nth-child(2n) {
margin-right: 0;
}

ul ul {
margin: -3.2vw 0 -3.2vw 1.6vw;
}

header {
margin: 3.2vw 3.2%;
width: 32%;
}

nav {
padding: 3.2vw 0;
position: sticky;
top: 0;
}

main {
margin: 3.2vw 3.2%;
}

main p img {
width: 80%;
}

form {
margin: 0 0 0.8vw;
}

input,
button {
border-radius: 0.2vw;
padding: 1.6vw;
}

input {
margin-right: 1%;
width: 64%;
}

#About {
width: 88%;
}

#Contact {
margin-top: 6.4vw;
}

footer {
margin: auto 3.2% 0;
}}

/* Large */
@media only screen and (min-width: 1600px) {

body {
font-size: 0.8vw;
}

p {
margin: 0 0 1.6vw;
}

h1, h6 {
margin: 0 0 1.6vw;
}

h6 {
margin: 0 0 0.4vw;
}

li,
li:nth-child(2n) {
margin: 0 0.5% 0.5% 0;
width: 24.625%;
}

li:nth-child(4n) {
margin-right: 0;
}

ul ul {
margin: -1.6vw 0 -1.6vw 0.8vw;
}

header {
margin: 1.6vw 1.6%;
}

nav {
padding: 1.6vw 0;
}

main {
margin: 1.6vw 1.6%;
}

form {
margin: 0 0 0.4vw;
}

input,
button {
padding: 0.8vw;
}

#About {
width: 60%;
}

#Contact {
margin-top: 3.2vw;
}

footer {
margin: auto 1.6% 0;
}}

/* DP */
@media only screen and (min-width: 1200px) {




}