body{
  font-family: Arial, sans-serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  padding:0;
  margin:0;
}

/* Global */
.container{
  z-index: 1000;
  width:100%;
  margin:auto;
  overflow:hidden;
}
.link{
  position: relative;
  bottom: 200px;
  color: rgba(0.0,0,0,0.0);
}
.main_content {
  margin-left: 10%;
  margin-right: 10%;

}
.title_decoration{
  font-family: "Comic Sans MS", serif;
}
.container h2{
  font-size: 30px;
  margin-top: 0px;
  text-align: center;
}
.main_content h3{
  font-size: 30px;
  font-weight:bold;
}
#about_form{
  display: none;
}
#email_form{
  overflow:hidden;
  display: none;
}
#contact_form{
  display: none;
}
#color_picker{
  display: none;
}
#video_form{
  display: none;
}
#eshop_form{
  display: none;
}
#game_form{
  display: none;
}
.light_beground{
  background: #f4f4f4;
}
.dark_beground{
  background: rgb(53, 66, 74);
}
.purple_color_becround{
  background:#bf15e5;
}
.purple_color{
  color: #bf15e5;
}
.white_text{
color:#ffffff;
}
.shedow_text{
  color: #35424a;
}
.dark_text{
  color: #000000;
}
.red_beground{
  background: #ff0000;
}


/* list_of_pages */
#list_of_pages{
  padding:15px;
  overflow: hidden;
}

#list_of_pages h1{
  float:left;
}

#list_of_pages form {
  float:left;
  margin-top:15px;
}

#list_of_pages input[type="email"]{
  padding:4px;
  height:25px;
  width:250px;
}
#main_box_holder{
  margin-left: 4.7%;
}
#logo_box img{
  width: 100px;
  height: 100px;
}
.font_box .white_text{
  margin: 0px;
}
/* boxes of list_of_pages */
.boxes{
  display: flow-root;
  padding-bottom:20px;
}
.boxes .box{
  float:left;
  text-align: center;
  width:29%;
  height:200px;
  padding:10px;
  border-radius: 25px;
}
.box p{
  height: 80px;
}
.box .button_list_of_pages{
  border-radius: 10px;
}

.boxes .box img{
  width:90px;
}
.box{
  margin-right: 10px;

}
.button_list_of_pages{
  height:31px;
  border:0;
  padding-left: 5px;
  padding-right:5px;
}
/* about */
#image_section{
  text-align: center;
  margin: 10px;
}
#image_section img{
  margin: 10px;
  float: none;
  width: 500px;
  transition : all 2s ;
}
#image_section button{
  text-align: center;
  border-radius: 50%;
  margin-right: 5px;
}
/* video */
#video_form{
  text-align: center;
}
/* contact */

#contact_form{
  margin-bottom: 0px;
}
#contact_form div{
  display: flex;
  margin-bottom: 10px;
}
#contact_form p{
  margin-top: 20px;
  margin-left: 10px;
  font-size: 20px;
}

.swg_images{
  width: 50px;
  float: right;
}
/* game */
#min_and_max_score{
  margin-left: 35%;
  margin-right: 35%;
  height: 50px;
}
#score{
  float: left;
}

#max_score{
  float: right;
}
#game_div{
  text-align: center;
  margin-top: 10%;
}
/* eshop */
.eshop_card_price{
  color: #87cefa;
  margin-left: 5%;
  float: left;
}
.eshop_card_buy{
  text-decoration: none;
  margin-right: 5%;
  float: right;
}
.eshop_card .eshop_card_img{
  width: 300px;

}
.eshop_card .eshop_card_img:hover{
  transition: transform .5s;
  transform: scale(1.5);

}
.eshop_card{
  float: left;
  width: 300px  ;
  margin-right: 2.5%;
  margin-left: 2.5%;
  margin-bottom: 5%;
}
.eshop_card_title{
  text-align: center;
}
/* email */

#email_form input{
  margin-bottom: 20px;
}
/* custom */
#special{
  margin-top: 10px;
}
.special_buttons{
  display: none;
}
#text_elem .color_bunons{
  margin-top: 20px;
}
#color_picker{
  text-align: center;
  z-index: -100;
}
.color_container .only_this{
  top: 5px;
  right: 10px;
}
#textInput1{
  width: 28px;
}
#color_box{
  margin-right: 10%;
  margin-left: 10%;
  width: 90%;

}
.color_bunons {
  border-radius: 7px;
  position: relative;
  bottom: 3px;
  left: 3px;

}
.color_container p{
  margin-top: 8px;
  margin-bottom: 0px;
}

.color_container{
  float: left;
  z-index: -100;
  text-align: center;
  width: 200px;
  height: 200px;
  //background-color: #35424a;
  //color: #ffffff;
  border-radius: 15px;
  margin-bottom: 20px;
  margin-right: 2%;
  margin-left: 2%;

}
input[type="color"] {
  -webkit-appearance: none;
  width: 55%;
  height: 55%;
  position:relative;
  border-radius: 50%;
  transform: rotate(45deg);
  margin: 0px;
  padding: 0px;
  border-style: none;
}
input[type="color"]::-webkit-color-swatch {
  position:absolute;
  top:-1px;
  left:-1px;
  right:-1px;
  bottom:-1px;
  margin: 0px;
  padding: 0px;

  box-sizing: border-box;
  border:5px solid #cccccc;
  border-radius: 50%;
  transform: rotate(45deg);
}
/* Header **/
header{
  position: fixed;
  width: 100%;
  padding-top:10px;
  min-height:70px;
  border-bottom:#bf15e5 3px solid;
  z-index: 100;
}
#logo{
  width: 100px;
  margin-left: 20px;
  float: left;
}
#main_title_content{
  position: relative;
  bottom: 20px;
}
#main_title_content,.parts_of_main_title {
  display: flex;
}
#main_title_content2{
  display: inline-flex;
}
/* nav mobile*/
.hidden_links_mobile{
  display: none;
}
.displayed_links_mobile{
  display: block;
}
.nav_button{
  //background-color: white;
  display: none;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 30%;
  left: 5%;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.nav_button p {
  position: relative;
  margin: 0;
  line-height: 0.8;
  bottom: 10px;
}
.mobile_nav{
  display: none;
}
.mobile_nav p{
  margin: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  background: rgba(53, 66, 74 , 0.6);
}
/* nav normal*/
.hidden_nav{
  display:none;
}
.displayed_nav{
  display:inline;
}
header .mobile_nav p:hover{
  background: #dbd9d9;
}

header nav{
  float:right;
}

header a:hover{
  font-weight:bold;
}
header a{
  text-decoration:none;
  text-transform: uppercase;
  font-size:16px;
}
ul{
  margin:0;
  padding:0;
}
header li{
  float:left;
  display:inline;
  padding: 0 20px 0 20px;
}
header #branding{
  float:left;
}

#brend_nav{
  margin: 30px;
  margin-left: 130px;
}
header #branding h1{
  margin:0;
}



/* Showcase */
#showcase{
  min-height:500px;
  background:url('../img/1077184466.jpg') no-repeat;
  background-size: cover;
  transition : all 2s ;
  text-align:center;
}

#showcase h1{
  padding-top:100px;
  margin-top:100px;
  font-size:55px;
  margin-bottom:10px;
}

#showcase p{
  font-size:20px;
}
/* footer */
footer{
  padding:7px;
  float: bottom;
  text-align: center;
}






/* Media Queries */
@media(max-width: 907px){
  /* header */
  header #branding,
  header nav{
    float:none;
    text-align:center;
    width:98%;
  }
  /* boxes of list_of_pages */
  .boxes .box{
    float:none;
    text-align: center;
    width:100%;
    height: 100%;
    padding: 0px;
    margin-left: 0px;

  }
  .box_in h3{
    font-size: 20px;
  }
  .box_in{
    display: inline-block;
    min-width: 70%;
    height: 100%;
  }
  .box {
    display: flex;
  }

  .box  .button_list_of_pages{
    padding: 0px;
    text-align: center;
    border-radius: 25px;
  }
  /*  Showcase */

  #showcase .container h1 .highlight{
    //color: #bf15e5;
    font-weight:bold;
  }
  #showcase .container h1{
    font-size: 45px;
    padding-top:200px
  }
  #showcase #title_content{
    margin-top:500px;
  }
  /* contact */
  .container img{
    margin-top: 10px;
    margin-left: 20px;
  }
  /* list_of_pages */
  #list_of_pages button, .quote button{
    padding-left: 5px;
    padding-right: 5px;
  }
  #list_of_pages form input[type="email"], .quote input, .quote textarea{
    width:100%;
    margin-bottom:5px;
  }
  /* boxes of list_of_pages */
  .button_box{
    flex-flow: wrap;
  }
  .box{
    //color: #35424a;
    //background-color :#f4f4f4;
    margin-bottom:20px;
    border-radius: 25px;
  }
  .box p{
    text-align: justify;
    margin: 10px;
  }
  .button_box .button_list_of_pages{
    height: 30px;
    margin-top: 20%;
    margin-right: 10px;
    margin-bottom: 5px;
  }
  /* about */
  #image_section img{
    margin: 10px;
    float: none;
    width: 425px;
  }
  /* game */
  #min_and_max_score{
    margin-left: 25%;
    margin-right: 25%;
    height: 50px;
  }


}
@media(max-width: 600px){
  /* header */
  header #branding h1 {
    right: 11%;
    top: 11px;
    position: relative;
  }
  /* boxes of list_of_pages */
  .box{
    display: block;
  }
  .button_box {
    display: inline-flex;
  }
  .button_box .button_list_of_pages {
    height: 30px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 5px;
  }
  /* nav mobile */
  .nav_button{
    display: block;
    top: 50px;
    position: fixed;
    top: 28px;
  }
  /* nav normal */
  nav ul{
    display: none;
  }
  /* main_title */
  #logo {
    width: 100px;
    float: right;
    margin-right: 15px;
  }
  .container {
    width: 100%;
  }
  .container #main_content{
    width: 80%;
  }
  /* about */
  #image_section img{
    margin: 10px;
    float: none;
    width: 325px;
  }
  /* game */
  #min_and_max_score{
    margin-left: 5%;
    margin-right: 5%;
    height: 50px;
  }
}
@media(max-width: 510px){
  /* header */
  header #branding h1 {
    top: -11px;
  }
  /* main_title */
  #main_title_content ,.parts_of_main_title{
    display: grid;
  }
  #main_title_content2 {
    display: grid;
  }
  #main_title_content2 #second{
    padding: 0px;
    margin: 0px;
  }
  /* showcase */
  #showcase .container h1 {
    font-size: 35px;
    padding-top: 163px;
  }
  .main_content img{
    width: 100px;
    float: right;
  }
  /* about */
  #image_section img{
    margin: 10px;
    float: none;
    width: 250px;
  }

}