body {
  background-color: #21222F;
  font-family:'Trebuchet MS', sans-serif;
}

ul {
  list-style-type: none;
  margin: 10;
  padding: 0;
}
.header {
  width: 100%;
  height: auto;
  margin:auto;
  overflow: hidden;
  box-shadow: 0px 0px 5px #E57ECD;
  border-style: solid;
  border-color:#F8B9EA;
  border-radius: 10px;
}
.header img{
  display: block;
  width:100%;
  height:100%;
  object-position: center center;
  object-fit: cover;

}
.navbar {
  background-color:#121219;
  color: #F4D4E1;
  border:2px solid;
  border-color:#F8B9EA;
  box-shadow: 0px 0px 4px #E57ECD;
  border-radius: 10px;
  max-width:12em;
  width:100%;
  font-size:1.3em;
  text-align: justify;
  text-shadow: 0 0 2px #FF00D8;
  padding: 10px;
  margin: 0;
    position: relative;
    top: 0;
    float: left;


}
.socials{
text-align:center;
}

h1 {
  color: #F4D4E1;
  max-width:12em;
  font-size:2.2em;
  text-align: justify;
  font-weight: bolder;
  margin: 20px 40px;
  text-shadow: 0 0 3px #FF00D8;
}

h2 {
  text-align: center;
}

h3 {
  text-align: center;
}

hr {
color: #F4D4E1;
text-shadow: 0 0 3px #FF00D8;
}

a{
color:#FF00D8;
}

.navbar a {
  color: #D565E6;
  text-shadow: 10px #FF00D8;
  padding: 10px;
  border: 1px solid;
  border-color:#F4D4E1;
background: #352747;
border-radius: 10px;
overflow: hidden;
display: flex;
}
a:hover {
  color:#FF6EF5;
}

.main {
background-color:#121219;
  color: #F4D4E1;
  border:2px solid;
  border-color:#F8B9EA;
  box-shadow: 0px 0px 4px #E57ECD;
  border-radius: 10px;
  font-size:1.2em;
  text-align: justify;
  text-shadow: 0 0 2px #FF00D8;
  margin:auto;
  padding-left:20px;
  padding-right:20px;
  position: relative; left: 0;
  float: left;
  width:65%;
}

.guestbook {
display: grid;
border: 1px solid #F8B9EA;
border-radius: 10px;
background-color: #21222F;
margin-top: 0px;
padding: 15px;
float: right;
min-width: 600px;
}

#gb-form {
display: grid;
border: 1px solid #F8B9EA;
border-radius: 10px;
background-color: #121219;
margin-top: 0px;
padding: 15px;
position: static;


}

#gb-form button {
  color:#FF00D8;
  color: #D565E6;
  text-shadow: 10px #FF00D8;
  padding: 10px;
  border: 1px solid;
  border-color:#F4D4E1;
  background: #352747;
  border-radius: 10px;
  margin-top: 10px;
 font-family:'Trebuchet MS', sans-serif;
 font-size:1.2em;
 float: right;
}

#gb-form button:hover {
background-color: #121219;
text-shadow: 10px #FF00D8;
}


#gb-name {
border: 1px solid #FF00D8;
border-radius: 5px;
background: #fff;
margin: 5px;
font-family:'Trebuchet MS', sans-serif;
}

#gb-message {
border: 1px solid #FF00D8;
border-radius: 5px;
background: #fff;
margin: 5px;
font-family:'Trebuchet MS', sans-serif;
}

#gb-entries {
  border-top: 2px dashed #FF00D8;
  display: block;
  padding: 10px 0;
  text-align: left;
  position: relative;
  left: 10px;
  float: left;
}



#yana {
  float: left;
  min-width:600px;
}

.footer {
  background-color:#121219;
  color: #F4D4E1;
  border:2px solid;
  border-color:#F8B9EA;
  box-shadow: 0px 0px 4px #E57ECD;
  border-radius: 10px;
  font-size:1.5em;
  text-align: center;
  text-shadow: 0 0 2px #FF00D8;
  padding: 10px;
  width: 100%;
  height: auto;
  margin:auto;
  display: flex;
  overflow: hidden;
  justify-content: center;

}
 .gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  border: 1px double #FF6EF5;
  border-radius: 10px;
  width: 180px;
}


div.gallery-item img {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
   border: 1px double #FF6EF5;
  border-radius: 10px;
  align-items: center;
  overflow: hidden;
  
}
div.gallery-item img:hover {
  border: 2px solid #F4D4E1;
  box-shadow:0px 0px 4px #FF6EF5;
  
}

div.gallery-item div.desc {
  padding: 10px;
  text-align: center;
}

 .game {
  display: inline-block;
  
}

div.game-item {
  margin: 10px;
  padding: 10px;
  width: 200px;
  flex-wrap: wrap;
  justify-content: flex-start;
  display: flex;
}

div.game-item img:hover {
  border: 2px double;
  
}

div.game-item img {
  width: 100%;
  height: auto;
  display: flex;
  border: 3px solid #FFFFFF;
  border-radius: 10px;
  overflow: hidden;
}
div.game-item div.desc {
  padding: 15px;
  text-align: center;
}

div.game-item div.desc:hover {
  padding: 15px;
  text-align: center;
  text-shadow: 0px 0px 15px #CA3CD2;
}

.list {
  display: grid
}

 .list-item {
  margin: 5px;
  padding: 10px;
  width: 60%;
 }
 .list-item img {
  width: 200px;
  height: auto;
  display: flex;
  border: 2px solid #FF00D8;
  border-radius: 10px;
  overflow: hidden;
  float: left;
}
.list-item div.desc {
  padding: 15px;
  float:left;
  flex-wrap: wrap;
  max-width: 300px;
  
}