*, *::before, *::after {
  box-sizing: border-box;
}

html{
  font-family: 'Inter', sans-serif;
}

body {
  height: 94dvh;
  padding: 24px;
  margin: 0;
  color: #232827;
  display: grid;
  grid-template-columns: auto 1226px auto;
  grid-template-rows: 56px 56px fit-content(100px) 56px;
  gap: 8px;
}

a{
    color: #232827;
    text-decoration: none;
}

#page-title{
    font-size: 1.5rem;
    font-weight: bold;
    grid-row: 2;
    grid-column: 2;
    width: fit-content;
    justify-self: left;
}

#lgs{
    grid-row:1;
    grid-column:2;
    display: flex;
    justify-content: space-between;
}

 #lang-select:focus {
    outline: none;
   }

#lang-select{
    width:100px;
    font-size: 1rem;
    border: none;
  background: url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI4Ij48cGF0aCBkPSJNMSAxLjVsNSA1IDUtNSIgIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==") no-repeat right 0.6em center;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}


#logo{
        max-height:64px;
    }

#mobile-header-nav{
    display: none;
}

#navigation-menu{
    display: flex;
    width: fit-content;
    font-size: 1rem;
    grid-row: 4;
    grid-column: 2;
    gap: 16px;
    justify-self: right;
    align-items: center;
}

#copyright{
    display: flex;
    grid-row: 4;
    grid-column: 2;
    justify-self: left;
}

@media (max-width: 767px) {
    body{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 56px repeat(6, 1fr);
    }

    #page-title{
        text-align: center;
        justify-self: center;
        margin: auto;
        grid-column: 1;
        grid-row: 2;
    }
    #mobile-header-nav{
        display: block;
    }

    #navigation-menu{
        grid-column: 1;
        grid-row: 6;
        display: inline-grid;
        gap: 16px;
        line-height: 16px;
        justify-self: left;
        height: fit-content;
    }

    #copyright{
        display: flex;
        grid-row: 7;
        grid-column: 1;
        justify-self: left;
        padding-bottom: 16px;
    }

    #lgs{
        grid-row:1;
        grid-column:1;
        display: flex;
        justify-content: space-between;
    }
    #lang-select{
        width:100px;
        font-size: 1rem;
        border: none;
        background-color:transparent;
    }

     #lang-select:focus {
        outline: none;
       }
    #logo{
        max-height:48px;
    }
}