html {
  overflow-x: hidden;
}

#del {
  margin-top: 10px;
  border-color: white;
  text-align: left;
}

#del li {
  display: inline;
  list-style: none;
  font-size: 25px;
}

#del a {
  display: inline-block;
  width: 100%;
  height: 5px;
  margin: 0px;
  padding: 0px;
  color: white;
  text-decoration: none;
}

#del a:hover {
  opacity: 0.7;
  transition-duration: 0.1s;
}

#nav {
  padding: 0;
  margin-top: 60;
  text-align: center;
  border-radius: 5px;
  color: black;
}

#nav2 {
  padding: 0;
  text-align: center;
  border-radius: 5px;
  color: black;
  margin:auto;
}

#nav2 a {
padding:10px;
}

.footer img:hover {
  opacity: 0.7;
  border-radius: 15px;
  transition-duration: 0.1s;
}


    #nav2 li {
      display: inline;
      list-style: none;
    }


#nav li {
  display: inline;
  list-style: none;
}

#nav li :hover {
  color: black;
  background: white;
  transition: 0.5s;
}

#nav a {
  display: inline-block;
  width: 150px;
  color: white;
  border-radius: 5px;
  text-decoration: none;
}

#ellie {
  padding: 0;
  margin-top: 90;
  margin-left: auto;
  margin-right: auto;
}

#ellie li {
  display: inline;
  list-style: none;
}

#ellie li :hover {
  transition: 0.3s;
  background-color: red;
}

#ellie a {
  display: inline-block;
  width: 100px;
  height: 120px;
  margin: auto;
  color: white;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

body, html {
  background-color: black;
}

body {
  text-align: center;
  font-size: 17px;
}


.mark {
  background-color: white;
  color: black;
  font-size: 30px;
  font-style: normal;
  font-family: 'Sarabun';
  width:100%;
  text-align: center;
  margin-left:-10%;
  border-radius:15px;
  margin-top:-1px ;
  font-weight: 400;
}


.hello {
    height:520px;
    border-radius: 15px;
    width:95%;
    margin:auto;
    padding:1px;
    background-color: white;
  }

.footerbox {
min-width:100%;
max-width:100%;
width:100%;
padding:none;
}

.footer {
height:50px;
width:120%;
margin-left: -10%;
background-color: white;
bottom:0;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1700px) {
.column {
flex: 10%;
max-width: 100%;
} }

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
} }

a {
text-decoration: none;
}

.mark:hover {
font-size: 35px;
transition-duration: 0.5s;
transition-timing-function: ease-out;
}

#nav2 img {
height:50px;
margin-bottom:-11px;
}

.contact {
  font-family: 'Roboto Condensed', sans-serif;
  color:white;
  font-size: 16px;
  padding:230px;
  padding-top: 150px;
  font-weight: 300;
  font-style: Light;
}

.img {
  height: 500px;
}

 html {
   overflow-x: hidden;
 }