body > nav {
    box-shadow: 0 1px 0 rgba(115, 130, 140, 0.2);
    position: fixed;
    background-color: var(background-color);
    backdrop-filter: saturate(100%) blur(40px);
    -webkit-backdrop-filter: saturate(100%) blur(40px);
}

body > main {
    padding-top: 1rem * 3;
    padding-bottom: 0px;
}

body > footer {
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(115, 130, 140, 0.2);
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 600px) {

    .grid-style {
        grid-template-columns: 1fr;
        padding-top: 10vh;
        padding-bottom: 4vh;
        row-gap: 30px;
        padding-left: 6vw;
        padding-right: 6vw;
    }

    article {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-width: 0px !important;
    }

    .title {
        display: inline-block;
        vertical-align: middle;
        margin-right: 8px;
        font-size:x-large;
        font-weight: bolder;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        padding-right: 0 !important;
    }

    .title-image {
        width: 32px;
        height: 32px;
    }
}

@media only screen and (min-width: 600px) {

    .grid-style {
        padding-top: 8vh;
        padding-bottom: 4vh;
        grid-template-columns: 1fr 1fr;
        row-gap: 20px;
        margin-left: 9vw;
        margin-right: 9vw;
    }

    article {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-width: 0px !important;
     }

     .title {
        display: inline-block;
        vertical-align: middle;
        padding-right: 8px;
        font-size:xx-large;font-weight: bolder; border-bottom-width: 1px;border-bottom-style: solid; padding-right: 0 !important;
    }

    .title-image {
        width: 48px;
        height: 48px;
    }
}

@media screen and (min-width: 1300px){
    
    .grid-style {
        padding-top: 5vh;
        padding-bottom: 4vh;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 30px;
        margin-left: 10vw;
        margin-right: 10vw;
    }

    article {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-width: 315px !important;
     }

     .title {
        display: inline-block;
        vertical-align: middle;
        padding-right: 8px;
        font-size:xx-large;font-weight: bolder; border-bottom-width: 1px;border-bottom-style: solid; padding-right: 0 !important;
    }

         .title-image {
        width: 48px;
        height: 48px;
    }
}

@media screen and (min-width: 1900px){
    
    .grid-style {
        padding-top: 5vh;
        padding-bottom: 4vh;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        row-gap: 30px;
        margin-left: 10vw;
        margin-right: 10vw;
    }

    article {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-width: 310px !important;
    }

    .title {
        display: inline-block;
        vertical-align: middle;
        padding-right: 8px;
        font-size:xx-large;font-weight: bolder; border-bottom-width: 1px;border-bottom-style: solid; padding-right: 0 !important;
    }

    .title-image {
        width: 48px;
        height: 48px;
    }
}

.author {
    margin-left: auto;
    margin-right: auto;
}

.authorText {
    margin: 15px 0 15px 0;
}

.icon {
    border-radius: 15%;
    background-color: whitesmoke;
}

article > header {
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

article > header > hgroup {
    margin-bottom: 0.5rem;
}

article > p {
    height: 15vh;
}

article > footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

article > footer > button {
    margin-bottom: 0;
}

#lang-selector{
    border: none;
}

.article-title {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.theme-switch {
    display: none;
}

.theme-switch + label:before {
    -webkit-filter: invert(0%); /* safari 6.0 - 9.0 */
    filter: invert(0%);
}

.theme-switch:checked + label:before{

    -webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
    filter: invert(100%);
}

.linkButton {
  --background-color: var(--primary);
  --border-color: var(--primary);
  --color: var(--primary-inverse);
  --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-weight: var(--font-weight);
  font-size: 1rem;
  line-height: var(--line-height);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}