@charset "UTF-8";

* {
  font-family: "Imprima", sans-serif;
  font-weight: 400;
  font-style: normal;
}

body {
  
background-color: #ffffff;
background-image:
linear-gradient(to right, #ffe66d 1px, transparent 1px),
linear-gradient(to bottom, #ffe66d 1px, transparent 1px);
background-size: 50px 50px;
}

nav ul {
 background-color: #ffe66d;
 display: flex;
 width: auto;
 justify-content: flex-end;
}

nav li {
  color: brown;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  padding: 10px 10px;
}

nav li :hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

header {
  width: auto;
}

.top {
  width: 100%;
  margin-bottom: 20px;
  
}
 
#Scroll {
 text-align: center;
}

/* main {
  width: 1328px;
  margin: 200px;
} */

section {
 
  border: brown 0.3px solid;
  margin: 50px auto;
  width: 1000px;
}

h2 {
background-color: #ffe66d;
 color: brown; 
 font-size: 50px;
 padding: 20px 20px;
}

#profile {
display: flex;
justify-content: space-around;
height: 500px;
margin: 20px 30px;
}

.profile {
width: 450px;
border-radius: 50%;
margin: 20px 30px;
}

article p {
width: 450px;
padding: 30px 30px;
line-height: 1.5;
}

h3 {
  font-weight: bold;
  margin: 20px;
  text-align: center;
  font-size: 32px;
  border-bottom: 3px black solid;
}

#works {
display: flex;
justify-content: space-between;
height: 400px;
margin: 20px;
}

#works li {
  background-color: #ffffff;
height: 300px;
width: 300px;
border: brown 0.3px solid;
margin: 20px;
position: relative;
}

#works a {
color: black;
font-weight: bold;
font-size: 32px;
width: 200px;
text-align: center;
position: absolute;
top: 50%;
left: 0;
}

#works :hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#postcard {
background: url(../works/images/Xmas.png);
width: 100%;
}

#panfu {
  background: url(../works/images/panfu.png);
  width: 100%;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 background-size: contain;
}

#logo {
  background: url(../works/images/logo.png);
  width: 100%;
 background-position: 50% 50%;
}

#dentaku {
background: url(../works/images/dentaku.png);
 width: 100%;
 background-position: 50% 50%;
 background-repeat: no-repeat;
 background-size: contain;
}

#workspg {
height: 1000px;
}

#workspg ul {
font-weight: bold;
margin: 20px;
}

#workspg ul li{

}

#workspg ul p {

}


#all {
font-size: 32px;
font-weight: bold;
text-align: right;
margin: 10px 20px;
}

#all  :hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#skills {
height: 500px;
margin: 20px;
}

#skills ul {
display: flex;
flex-wrap: wrap;
}

#skills ul li {
background-color: #ffe76d65;
box-shadow: 2px 2px white;
height: 200px;
width: 150px;
margin: 20px;
font-weight: bold;
text-align: center;
}

#skills ul li p {
text-align: center;
margin: 20px 20px;
}

 #contact  {
height: 500px;
margin: 20px auto;
 }

 #contact form {
 margin: 40px 20px;
 }

#contact p { 
text-align: center; 
}

#contact form dl { 
width: 800px;
margin: auto;
margin-bottom: 24px; 
}

#contact form input, #contact form textarea { 
background-color:white;
border: 2px solid black; 
width: 800px;
margin: 0 auto;
padding: 8px; 
border-radius: 5px; 
text-align: center; 
}

#contact form .submit { 
text-align: center; 
}

#contact form .submit input { 
text-align: center; 
background-color: white; 
color: black; 
font-weight: bold;
width: 200px;
margin: 20px;
}

#contact form .submit input:hover { 
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

footer {
 background-color: #ffe66d;
 text-align: center;
 padding: 14px 10px 20px;
 height: 50px;
}