@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');
*{padding: 0;margin: 0;box-sizing: border-box;}
html, body {
  height: 100%;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}

body {
    background-color: #121212;
}
main {margin-bottom: 50px;}
footer {
  width: 100%;
  background: #171717;
  text-align: center;
  padding: 10px;
  color: #fff;
  position: fixed;
  bottom: 0;
}
#menu {width: 100%;text-align: center;}
#menu ul li {
  display: inline-block;
  padding: 12px;
  margin: 0 15px;
  color: #fff;
}
#menu ul li:hover{ 
  color: #ff9300;
}
#container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
#logo {
  width: 300px;
  margin: 0 auto;
  color: #fff;
  padding-top: 25px;
}
.text-top-left {
  text-align: left;
  position: relative;
  top: 25px;
  right: 20px;
}
.text-center {text-align: center;color: #ff9300;font-size: 60px;margin: 0;padding: 0;text-shadow: 0 0 10px #ff9300;}
.text-bottom-right {text-align: right;font-size: 16px;font-weight: normal;}

#content {width: 100%;padding-left: 300px;margin-bottom: 50px;}

#imgs {
  padding: 0 25px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
}

#info {
  width: 300px;
  max-height: 450px;
  border-right: 1px solid #ff9300;
  padding: 15px;
  color: #fff;
  text-align: center;
  position: fixed;
  background: #121212;
}
#discoink-logo {
  width: 150px;
  height: 150px;
  background-size: cover;
  border-radius: 100%;
}
#info p {padding-top: 25px;text-align: left;}

.img-box {
  grid-column: span 2;
  grid-row: span 2;
  display: inline-block;
  /* width: 450px; */
  /* height: 280px; */
  border: 2px solid #ff9300;
  border-radius: 4px;
  margin: 5px;
  overflow: hidden;
  cursor: pointer;
}
#img-preview {
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.8);
  position: fixed;
  top: 0;
  display: none;
  z-index: 999999;
}
#close-preview {
  color: #fff;
  font-size: 48px;
  position: absolute;
  top: 30px;
  right: 30px;
  cursor: pointer;
  z-index: 9999999;
}
#image {
  width: 50%;
  height: 50%;
  object-fit: contain;
}
.vertical {
  grid-column: span 1;
  grid-row: span 2;
}
.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s;
}
.img-box img:hover {
  transform: scale(1.2);
  transform-origin: 50% 50%;
}
/************* WHO PAGE *************/
#who {padding: 0 15px;}
.skills-title {
  font-size: 28px;
  color: #fff;
  text-shadow: 0 0 10px #fff;
  display: inline-block;
  padding-left: 10px;
}
.skills-logo {
  width: 40px;
  height: 32px;
  display: inline-block;
  position: relative;
  top: 20px;
}
.skills-info {
  list-style: none;
  padding-left: 15px;
  color: #fff;
  border-bottom: 1px solid #ff9300;
  padding-bottom: 25px;
}
#blender {filter: invert(1);background: url('../img/blender-logo.png') center center;background-size: cover;}
#krita {height: 36px;background: url('../img/krita-logo.png') center center;background-size: cover;}
#tool-sai {height: 36px;background: url('../img/paint-tool-sai.png') center center;background-size: cover;filter:invert(1)}
#godot {height: 36px;background: url('../img/godot.png') center center;background-size: cover;}
#spriter-pro {width: 40px;height:36px; background: url('../img/spriter_pro.png') center center;background-size: cover;}
#game-creator {height: 40px;background: url('../img/001.png') center center;background-size: cover;}

.fa-language {color: #fff;font-size: 30px;position: relative;top: 2px;}
.skills-info li {
  margin: 5px 0;
}


/************* CONTACT FORM *************/
#contact {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
#pageAlert, #alert {
  position: fixed;
  top: 25px;
  color: #000;
  left: 50%;
  transform: translate(-50%);
  padding: 12px;
  background: #ff9300;
  display: none;
}
#ds-id, #discord-id {display: inline-block;color: #ff9300;cursor: pointer;}
#discord-id {display: inline-block;position: relative;bottom: 5px;}
#contact-form {
  width: 50%;
}
.title {
  font-size: 28px;
  color: #fff;
}
.sub-title {
  font-size: 16px;
  color: #fff;
  text-align: center;
  line-height: 1.6;
}
.label-float { position: relative; }
.field-label {
	position: absolute;
	top: 32px;
	left: 10px;
	font-size: 12px;
	color: #fff;
	cursor: text;
}
.label-float .field:focus + label,
.label-float .field:not(:placeholder-shown) + label {
	top: 0;
	font-size: 14px;
	transition: linear .2s;
}
.field {
	position: relative;
	top: 10px;
	padding: 8px;
	border: 2px solid #ff9300;
  background: #ff930055;
	display: inline-block;
	width: 100%;
	margin: 10px 0;
	outline: none;
  color: #fff;
}
.field:hover {
  background:rgba(0, 209, 136, .3);
  border-color:rgb(0, 209, 136);
}
select option {color: #000;background: #fff;}

textarea {
  resize: none;
  height: 200px;
}
.btn {
  background: #ff9300;
  color: #fff;
  cursor: pointer;
  width: 100%;
  margin-top: 25px;
  border-radius: 0;
}
.btn:hover {
  background: #ffc06b;
}
#hamb {display: none;}


/* maintenance */
#maintenance {
    width: 450px;
    padding: 5%;
    background: #171717;
    color: #ff9300;
    border: 2px solid #ff9300;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5% auto;
}
/************* MOBILE *************/
@media only screen and (max-width: 900px) {
  aside#info {
    display: none;
  }
  #menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    background: #070609;
    z-index: 50;
  }
  #menu ul li {
    display: block;
  }
  #container {
    width: 100%;
  }
  #content {
    width: 100%;
    padding: 0;
    margin: 0;
    display: block;
  }
  #imgs {
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .img-box {
    width: 90%;
    height: 200px;
    margin: 15px auto;
  }
  .vertical {
    height: 300px;
  }
  #hamb {
    display: block;
    z-index: 51;
    position: fixed;
    right: 15px;
    top: 15px;
  }
  #hamb i {
    color: #fff;
    font-size: 32px;
  }
  #contact-form {
    width: 100%;
    text-align: center;
  }
  .label-float {width: 100%;}
  .field {width: 100%;}
}