/* Utility tools*/
   * {
       margin: 0%;
       padding: 0%;
       box-sizing: border-box;
   }

   body {
       overflow-x: hidden;
   }

   .flex {
       display: flex;
   }

   .row {
       flex-direction: row;
   }

   .column {
       flex-direction: column;
   }

   .center {
       align-items: center;
   }

   .link {
       text-decoration: none;
   }

   .list {
       list-style: none;
   }


   /* HEADER */
   #header {
       display: grid;
       grid-template-columns: 250px auto;
       align-items: center;
       position: sticky;
       top: 0%;
       background-color: #fff;
   }

   /* Logo */
   .logo {
       padding-top: 5px;
       cursor: pointer;
       z-index: 1000;
       object-fit: cover;
       margin-left: 10px;
   }

   /* Navigation menu */
   #navbar {
       display: flex;
       flex-direction: column;
       align-items: end;
       padding: .5rem;
   }

   /* Hamburger Menu */
   #hamburger {
       display: none;
   }

   .box {
       height: 2px;
       width: 30px;
       background-color: #888;
       margin-top: 5px;
   }

   /* Search */
   .search-input form {
       border: 1px solid #ccc;
       border-radius: 40px;
       background-color: #fff;
       display: flex;
       align-items: center;
       justify-content: space-between;
       overflow: hidden;
       z-index: 1000;
       min-width: 120px;
   }

   .search-input #search {
       border: none;
       outline: none;
       width: 100%;
       text-align: center;
       color: #555;
       padding: .5rem;
   }

   .search-input input[type="submit"] {
       border: none;
       outline: none;
       padding: .5rem;
       height: 100% !important;
       cursor: pointer;
       width: 20%;
       cursor: pointer;
       color: #555;
   }

   .search-input input[type="submit"]:hover {
       background-color: #ddd;
       color: crimson;
       font-weight: bold;
   }

   .search-input:hover #search::placeholder {
       letter-spacing: 2px;
       transition: 1s;
   }

   /* Menu */
   #menu {
       display: flex;
       gap: 10px;
       font-family: sans-serif;
       padding: .5rem 0;
   }

   #menu .list {
       background-color: skyblue;
       padding: .5rem;
       border-radius: 5px;
   }

   #menu .link {
       color: #f4f4f4;
       text-transform: uppercase;
   }

   #menu .link:hover {
       color: crimson;
       transition: 1s;
       letter-spacing: 1px;
       font-weight: bold;
       text-decoration: underline;
   }

   /* News Headline */
   #headline {
       grid-column-start: 1;
       grid-column-end: 3;
       display: flex;
       flex-direction: row;
       align-items: center;
       overflow: hidden;
       margin-top: 5px;
   }

   #headline h2 {
       background: linear-gradient(to right, crimson 80%, goldenrod 20%);
       color: #f4f4f4;
       padding: .3rem;
       border-top-right-radius: 20px 10px;
       border-bottom-right-radius: 20px 10px;
       cursor: pointer;
       z-index: 1;
       width: 130px;
       font-size: large;
   }

   .headline {
       overflow-x: hidden;
       width: 100%;
   }

   .newlines {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
       align-items: center;
       gap: 10px;
       transform: translateX(100%);
       animation: translateHeadline 90s infinite 5s;
   }

   #headline .newlines .link {
       white-space: nowrap;
       color: crimson;
   }

   @keyframes translateHeadline {
       0% {
           transform: translateX(100%);
       }

       100% {
           transform: translateX(-200%);
       }
   }


   .headline .link {
       padding: 0 10px;
       cursor: pointer;
       color: #555;
       white-space: nowrap;
   }

   .headline .link:hover {
       text-decoration: underline;
       color: crimson;
       transition: .5s ease-in-out;
   }

   @media(max-width: 780px) {
       #headline h2{
           font-size: medium;
       }

       #hamburger {
           display: flex;
           flex-direction: column;
           align-items: center;
           color: #888;
           font-family: sans-serif;
           z-index: 1000;
           margin-top: 5px;
       }

       #menu {
           flex-direction: column;
           position: absolute;
           top: 100%;
           right: 0%;
           width: 200px;
           align-items: end;
           transform: translateX(100%);
           animation: menu 3s both;
           display: none;
           z-index: 2;
       }

       #menu.active {
           display: block;
       }

       @keyframes menu {
           from {
               transform: translateX(100%);
           }

           to {
               transform: translateX(-5%);
           }
       }

       #menu .list {
           width: 100%;
           text-align: center;
           margin-top: 5px;
           border-radius: 5px;
       }
   }