@font-face {
    font-family: "roboto_regular";
    src:url("../fonts/Roboto-Regular.ttf");
}

.solarized_bg {
  /*background-color: #073642;*/
  background-color: #253443;
}

.bg {
  background-color: #19222B;
}

.white_text {
  color: white;
  font-family: roboto_regular;
  letter-spacing: 1px;
}

.yellow_text {
  color: #b58900;
}

.orange_text {
  color: #cb4b16;
}

.red_text {
  color: #dc322f;
}

.magenta_text {
  color: #d33682;
}

.violet_text {
  color: #6c71c4;
}

.blue_text {
  color: #268bd2;
}

.cyan_text {
  color: #2aa198;
}

.green_text {
  color: #859900;
}

.comments_text {
  color: #93a1a1;
}

.box {
  width:100%;
  display: flex;
}

.label {
  width:140px;
}

a {
    text-decoration:none;
}

body {
    margin:0;
}
button {
    border: 1px solid #268bd2;
    padding: 5px 10px;
}

input {
  border:0;
  width:100%;
}

.cursor {
    cursor: pointer;
}

.left_header_box, .right_header_box {
    width:130px;
    padding-top:10px;
    font-size: 30px;
}

.header {
    display:flex;
    height: 110px;
    justify-content:space-between;
    align-items: center;
    border-bottom: 1px solid white;
}

.header_home {
    display:flex;
    height: 100px;
    justify-content:space-between;
    align-items: center;
}

.header_title {
  font-size: 50px;
}

.home_wrapper {
  margin:0;
  padding:0;
  display: flex;
  justify-content: center;
}

.home_cont {
  display: flex;
  width:1350px;
  height: 660px;
  padding: 100px 0 0 0;
 
}

.img_col {
  width:450px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
 
}

.img_col_img {
  width:375px;
}

.name h1 {
  font-size: 45px;
  margin:0;
  font-family: roboto_regular;
  padding: 25px 0 0 0;
}

.name_decoration p {
  width: 145px;
  font-family: roboto_regular;
  margin: 0;
  font-size: 22px;
  padding: 0 0 17px 0;
}

.hype_col {
  width: 750px;
  padding: 0 0 0 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hype_title {
  font-family: roboto_regular;
  font-size: 45px;
  text-align: center;
}

.hype_text {
  font-family: roboto_regular;
  font-size: 25px;
}


.contact_item {
  padding: 20px 0 0 0;

}

.contact_img {
  width:25px;
  margin: 0 10px -5px 0;
}

.showoff_cont {
  display: flex;
  justify-content: center;
  align-items: center;
  margin:55px 0 0 0;
}

.showoff_img {
  width:350px;
}
.contact_item a {
  font-size: 22px;
  font-family: roboto_regular;
  color:white;
}

.home_footer {
  margin:calc(100vh - 940px) 0 0;
  height:70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer_text a {
  color:white;
  font-size: 25px;
  font-family: roboto_regular;
}

.sub_header {
    height:80px;
    display:flex;
    justify-content:center;
    align-items: center;
    /*border-bottom: 1px solid #268bd2;*/
}

.sub_header p {
  font-size: 20px;
}

.public_key_btn {
    background-color: #253443;
    border: 0;
    font-size: 1.5rem;
}

.public_key {
    width:1px;
    position:relative;
    top:-500px;
}
/*LOGIN*/

.login_screen {
  width:100%;
  display: flex;
  justify-content: center;
  padding-top: 100px;
}

.login_box {
  width: 300px;
  display: flex;
  flex-direction: column;
  height:300px;
}

.login_title {
  width: 300px;
  text-align: center;
  color: white;
  font-family: monospace;
  font-size: 1.5em;
}

.login_row {
  margin-bottom: 1em;
}

.login_row a {
  color: white;
  font-size: 1.5em;
  text-decoration: none;
}

.login_input {
  width: 290px;
  border-radius: 5px;
  font-size: 1em;
  background-color: #253443;
  color: white;
  border:1px solid #268bd2;
}

.login_button {
  width: 300px;
  background-color: #268bd2;
  border: 1px solid #268bd2;
  padding: 5px 10px;
  color:white;
  font-size: 1em;
  border-radius: 5px;
  margin:0;
}

.logout_btn {
  border:0;
  background-color: transparent;
  margin: 0;
  font-size: 30px;
}

.change_password {
  border: 1px solid #268bd2;
  text-align: center;
  font-size: 30px;
  padding:5px;
}

.code_box {
  width: 560px;
  display: flex;
}

.code_row {
  display: flex;
}

.code_col {
  background-color: #313443;
  padding:10px 15px;
  width:500px;
  border-radius: 5px;
}

.code_col p {
  margin: 0;
}

.copy_col {
  width:60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*Monthly Billing*/
.checkout_box {
  width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.pay_now {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.pay_now button, .submit_payment {
  background-color: #268bd2;
  color: white;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
}

.checkout_amount {
  width: 300px;
  text-align: center;
  color: white;
  font-family: monospace;
  font-size: 25px;
}

.submit_payment {
  background-color: #268bd2;
  color: white;
  font-size: 18px;
  border-radius: 5px;
  cursor: pointer;
  width: 390px;
  margin-top: 30px;
  padding: 10px 20px;  
}


@media only screen and (max-width: 1400px) {
  .home_cont {
    width:96%;
    padding:0 2%;

  }

  .hype_col {
    justify-content: flex-start;
  }
  .home_footer {
    margin:100px 0 0 0;
  }
} 

@media only screen and (max-width: 1000px) {
  .home_cont {
    flex-direction: column;
    height:auto;
    align-items: center;
    padding:0;
    
  }

  .hype_col {
    padding:0;
  }

}

@media only screen and (max-width: 800px) {
  .left_header_box {
    display: none;
  }
  .right_header_box, .logout_btn {
    width:80px;
    padding-top: 7px;
    font-size: 17px;
  }
  .header_title {
    padding-left:20px;
    font-size: 30px;
  }
  .sub_header p {
    font-size: 17px;
  }
  .public_key_btn, .change_password {
    font-size: 22px;
  }
  .code_box {
    width: 96%;
    margin: 0 2%;
    display: flex;
  }
  .code_col {
    margin-top: 10px;
    width: 100%;
  }
  .code_row {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hype_title {
    margin:60px 0 0 0;
  }
}

@media only screen and (max-width: 770px) {
  .hype_col {
    width:92%;
    margin:0 4%;
  }
}

@media only screen and (max-width: 470px) {
  .img_col {
    width:92%;
    margin:0 4%;
  }

  .img_col_img {
    width:92%;
    margin:0 4%;
  }

  .showoff_img {
    width:92%;
    margin:0 4%;
  }

  .hype_title {
    font-size: 35px;
    margin:70px 0 30px 0;
  }

  .hype_text {
    font-size: 21px;
  }
}