*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}
html{
font-family: rubik, sans-serif;
scroll-behavior: smooth;
}

body {
color: #444;
}
li{
    list-style: none;
}
li:hover{
    font-size: 20px;
    font-weight: bold;
    transform: scale(1.2);
transition-duration: 0.4s;
}

/*  Navbar  */

#scroll-up{
    display: none;
    position: fixed;
    margin-left: 90%;
    cursor: pointer;
    z-index: 99;
    color: 475edf;
    font-size: 1.7rem;
    margin-right: 3%;
    bottom: 0;
  }

a {
    text-decoration: none;
  }
  
  .navbar {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  .navbar .nav-list ul,
.social-icons ul {
  display: flex;
}
  
  .nav-list ul li, .social-icons ul li {
    margin: 0px 20px;
    color: #55527c;
    font-size: 20px;
  }
  
  .social-icons ul i {
    color: #475edf;
    font-size: 1.3em;
  }
  
  .social-icons ul li:hover {
    transform: scale(1.2);
  }
  
  .toggle-btn i {
    font-size: 30px;
    color: #55527c;
    position: absolute;
    top: 20px;
    right: 20px;
    display: none;
  }
  
  .nav__link:link,
.nav__link:visited {
  font-weight: 400;
  color: #475edf;
  text-decoration: none;
  display: block;
  transition: all 0.3s;
}

  .logo {
    width: 11em;
    height: 3.5em;
    margin-top: 2px;
  }
  
  
  
  

/*  Main Section  */
.row-profile{
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin:15px;

}
.col{
    display: flex;
    justify-content: center;
}
.col-1{
    width: 100%;
    display: flex;
    flex-direction: column;  
}
.col-2 img{
    max-width:90%;
    height: 85%;
    padding: 10px;
}


/* Add padding to containers */
  form{
      margin: 5em;
      width: 50vw;
  }
  h1{
      font-size: 2em;
  }

  .err {
    color: red;
    font-size: 0.7em;
}

#pw1_check{
margin:0 0 10px 0;
}

  /* Full-width input fields */
  input[type=text]{
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
  }
  input[type=checkbox]{
  padding: 2px;
  margin: 3px;
  }

  input[type=password]{
    width: 100%;
    padding: 15px;
    margin: 10px 0 5px 0;
    display: inline-block;
    border: none;
    background: #f1f1f1;
  }

  input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
  }
  
  /* Overwrite default styles of hr */
  .col hr {
    margin-bottom: 25px;
  }
  
  /* Set a style for the submit button */
  .registerbtn {
    background-color: #475edf;
    color: white;
    padding: 16px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
  }
  
  .registerbtn:hover {
    opacity: 1;
  }
  
  /* Add a blue text color to links */
  a {
    color: dodgerblue;
  }
  



/*  Footer Navbar */
.footer {
    background-color: #0b0b1d;
    color: #fefefe;
    font-size: 1.7em;
    padding: 1.5em;
  }
  
  .container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 1.1em;
  }
    .footer  hr {
margin-bottom: 16px;

}
  .footer .col {
    display: flex;
    flex-direction: column;
    font-size: 20px;
    align-items: center;
    text-align: center;
  }
  .col > ul {
    line-height: 1.5;
    margin: 0;
  }
  .col > ul > li {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 15px;
  }
  .col > ul > li:hover {
    list-style: none;
    color: white;
  }
  
  .col > ul > li > a {
    color: #9fa8c3;
  }
  #lastp {
    text-align: center;
    font-weight: 100;
    font-size: 15px;
    color: #9fa8c3;
  }
  
  .footer_form,
  .social_footer {
    display: flex;
  }
  
  .social_footer h2,
  label[for="stayupdated"] {
    margin-right: 0.7em;
  }
  
  
  .col > p {
    margin-bottom: 0.3em;
    font-size: 1em;
    font-weight: 600;
  }
  
  .social_footer ul > a {
    color: #9fa8c3;
    margin-right: 0.1em;
  }
  
  .col ul li > a:hover,
  .social_footer ul > a:hover {
    color: #fefefe;
  }






@media all and (max-width: 1024px) {
    .toggle-btn i {
      display: block;
    }
  
    .navbar {
      background: #eaeef0;
      flex-direction: column;
      display: flex;
    }
  
    .hidden {
      display: none;
    }
  
    .nav-list ul {
      flex-direction: column;
    }
  
    .nav-list {
      margin-top: 1.5em;
      text-align: center;
    }
  
    .nav-list ul li {
      margin-top: 30px;
    }
  
    .social-icons {
      margin: 2em 0 0 0;
    }
  
    .logo {
      position: absolute;
      top: 0;
      left: 5px;
    }
    .row-profile{
        display: flex;
        flex-direction: column-reverse;
        
    }
  }

  /*Footer */
  @media screen and (max-width: 480px) {
  .footer .col {
    margin: 0 0 1.3em 0;
  }
}

@media screen and (max-width: 480px) {
    .footer .container {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      font-size: 20px;
    }
  }