/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;1,300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital@1&display=swap');

.light {
 font-family:'Open Sans Light'; 
}

.center {
  text-align:center;
}

strong {
  font-family:'Open Sans SemiBold';
}

.material-icons {
  font-family:'Material Icons';
}

h2, h3, h4 {
  font-family:'Open Sans SemiBold';
}

h1 {
 font-family:'Open Sans Light';
 font-weight:normal;
}

p a {
  color:#005AA8;
}

p a:hover {
  color:red;
}

p a:focus {
  background-color:#005AA8;
  color:white;
  text-decoration:underline;
}

.p-smaller {
  font-size:14px; 
}

.footer-column h3, .u-heading {
  padding-bottom:5px;
  border-bottom:1px solid #c7c7c7;
}

hr {
  margin-top:30px;
  margin-bottom:30px;
}

.page-h1 {
  font-size:35px;
  font-family:'Open Sans Light';
  font-weight:bolder;
}

p.intro {
  font-size:20px;
  font-family:'Open Sans Light';
}

body {
      margin: 0;
      font-family: 'Open Sans Regular', sans-serif;
      background-color: #f4f3f1;
    }

    header {
      background-color: white; /* Dark navy */
      padding: 23px 0 20px 0;
      height:70px;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 270px;
    }

    .logo {
      width: 188px;
      height: 74px;
    }
    
    .logo:focus {
      border:3px solid #005AA8;
    }

    .search-box {
      width: 400px;
      height: 32px;
      border:1px solid black;
      background-color: white;
      vertical-align:middle;
      padding-top:8px;
      padding-left:10px;
    }
    
    nav {
      background-color: #193050;
      height: 50px;
    }

    .main {
      padding: 30px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .content-box {
      background-color: white;
      width: 75%;
      padding: 8px 15px 30px 30px;
      margin-bottom: 20px;
    }

    .footer-blue {
      background-color: #193050;
      color: white;
      display: flex;
      justify-content: space-around;
      padding: 20px 20px;
      width:75%;
    }

    .footer-column {
      width: 30%;
    }

    .footer-white {
      background-color: white;
      display: flex;
      align-items: center;
      padding: 20px;
      justify-content: space-between;
      width:75%;
    }

    .footer-white .logo {
      margin-left:70px;
    }

    .footer-text {
      flex: 1;
      text-align:left;
      margin-left:330px;
      font-size:14px;
    }
    
    .footer-text p:not(:last-child) {
      margin-bottom:10px;
    }

/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #193050;
  height:49px;
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;
}

.row {
  width:100%;
  margin:0 50px;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
  cursor: pointer;
}

.dropbtn:after {
  font-family:'Material Icons';
  content:"keyboard_arrow_down";
  font-size: 20px;
  margin-left: 1px;
  vertical-align: middle;
}

/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color:white;
  color:black;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #193050;
  width: 80%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  color:white;
  margin:0 160px;
  height:300px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display:flex;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 30%;
  padding: 10px;
  background-color: #193050;
  height: 250px;
}

/* Style links inside the columns */

.column a.list, a.list {
  float: none;
  color: white;
  padding: 3px 3px 3px 0;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:14px;
}

.column a:before, a.list:before {
  font-family: 'Material Icons';
  content: 'chevron_right';
  font-size: 20px;
  margin-right: 1px;
  vertical-align: middle;
}

.column a:hover, a.list:hover {
  text-decoration:underline;
  background-color:#193050;
  color:white;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

.main-column {
  float:left;
  width:70%;
  padding:1px;
}

.right-column {
  float:right;
  width:25%;
  padding:1px;
}

.content-columns:after {
  content:"";
  display:table;
  clear:both;
}

.menu-column {
  float:left;
  width:30%;
  padding:1px 0 0 20px;
}

.main-column-right {
  float:left;
  width:65%;
  padding:1px;
}

.blue-button {
  padding:9px;
  margin:2px;
  text-align:center;
  color:white;
  font-size:15.5px;
  background-color:#193050;
  cursor:pointer;
  border:2px solid #193050;
  border-radius:2px;
}

.blue-button:hover {
  background-color:white;
  color:#193050;
}

.button-group {
  display:flex;
  gap:10px;
  justify-content:center;
}

.grey-box {
  background-color:#f4f3f1;
  padding:15px;
  margin:12px 12px 25px 12px;
}

.grey-box h3 {
  margin:0 0 10px 0;
}

.blue-link {
  color:#005AA8;
}

.blue-link:hover {
  text-decoration:underline;
}

.reglist {
  float: none;
  color: #005AA8;
  padding: 3px 3px 3px 0;
  text-decoration: none;
  display: block;
  text-align: left;
  font-size:16px;
  font-family:'Open Sans SemiBold';
}

.reglist:before {
  font-family: 'Material Icons';
  content: 'chevron_right';
  font-size: 20px;
  margin-right: 1px;
  vertical-align: middle;
}

.reglist:hover {
  text-decoration:underline;
  color:#c42020;
}

.reglist:focus {
  background-color:#005AA8;
  color:white;
  text-decoration:underline;
}

.vertical-menu {
  width:300px;
  list-style-type:none;
  padding-left:0;
}

.vertical-menu li {
  padding:10px 9px;
  border-bottom:1px solid #c7c7c7;
  font-family:'Open Sans SemiBold';
}

.vertical-menu li:first-child {
  border-top:1px solid #c7c7c7;
}

.vertical-menu li a {
  color:#005AA8;
  text-decoration:none;
}

.vertical-menu li a:hover {
  color:red;
  text-decoration:underline;
}

.vertical-menu li a:focus {
  background-color:#005AA8;
  color:white;
  text-decoration:underline;
}

.vertical-menu .current {
  background-color:#f2f1ef;
}

.vertical-menu .current:before {
  content:"• "
}

.menu-column h1 {
  font-size:25px;
}

.blue-heading {
  background-color:#193050;
  padding:5px 5px 5px 10px;
  color:white;
  font-size:18px;
  font-family:'Open Sans SemiBold';
  margin:15px 15px 10px 0;
}

.three-columns {
  display: flex;
  padding: 10px 0;
  width: 98%;
  gap:20px;
}

.col {
  width:30%;
}

.welcome-text {
  display: inline-block;
  animation: changeText 4s infinite;
  color: black;
  font-size:2em;
  font-family:'Open Sans Light';
}

@keyframes changeText {
  0% { content: "Welcome to the e-Government of Bengen"; }
  50% { content: "Dobrí pribina a Bengénske Gormanja"; }
  100% { content: "Bun venit în Guvernul Benghenului"; }
}