@font-face {
    font-family: RobotoCondensed;
    src: url(/src/styles/font/RobotoCondensed-VariableFont_wght.ttf);
}

@font-face {
    font-family: Vegur;
    src: url(/src/styles/font/Vegur-Yg1a.otf);
}

@font-face {
    font-family: Vegur;
    src: url(/src/styles/font/VegurBold-rYOp.otf);
    font-weight: bold;
}

@font-face {
    font-family: VegurLight;
    src: url(/src/styles/font/VegurLight-My4w.otf);
    font-weight: light;
}

html{
    scroll-behavior: smooth;
}

p, a, h1{
    font-family: VegurLight, Arial, Helvetica, sans-serif;
}


h2{
    font-family: RobotoCondensed, VegurLight, Arial, Helvetica, sans-serif;
    font-weight: 500;
}

i{
    font-size:48px;
}

html, body{
    margin: 0px
}

main{
    min-height: 80vh;
}

main, footer{
    margin-left: 24px;
    margin-right: 24px;
}

header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: sticky;
    top: 0px;
    margin: 0;
    background-color: rgba(210, 210, 210, 0.3);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-bottom: 1px rgba(210, 210, 210, 0.3) solid;
}

header>menu>a>img {
    border-radius: 50%;
  }



header{
    display: flex;
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
}

header>menu{
    display: flex;
    top: 12px;
    flex-direction: row;
    align-items: center;
    margin-left: 12px;
    margin-right: 12px;
}

menu>a{
    text-decoration: none;
    color: black;
    margin-left: 12px;
    text-transform: uppercase;
    font-size: 15px;
    transition: color 0.2s;
    font-family: RobotoCondensed, arial;
}

menu>a:hover{
    color: gray;
    transition: color 0.2s;
}

menu>a.active{
    text-decoration: underline;
    text-underline-offset: 5px;
}

section.center{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90%;
}

section.fullcenter{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80vh;
}




#fullScreenMenu{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.421);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.animateThis>div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.animateThis>div>a, #fullScreenMenu>button{
    background-color: white;
    border-radius: 12px;
    padding: 12px;
    margin: 12px;
    text-decoration: none;
    color: black;
    margin-left: 12px;
    text-transform: uppercase;
    font-size: 15px;
    transition: color 0.2s;
    font-family: RobotoCondensed, arial;
    border: none;
    transition: background-color 0.2s;
    width: 55vw;
    text-align: center;
}

.animateThis>div>a.active{
    background-color: rgb(227, 227, 227);
    border: rgb(167, 167, 167) 2px solid;
}

.animateThis>div>div>a{
    background-color: white;
    border-radius: 12px;
    padding: 12px;
    margin: 12px;
    text-decoration: none;
    color: black;
    margin-left: 12px;
    text-transform: uppercase;
    font-size: 15px;
    transition: color 0.2s;
    font-family: RobotoCondensed, arial;
    border: none;
    transition: background-color 0.2s;
    text-align: center;
}

button, .button{
    background-color: rgb(234, 234, 234);
    border-radius: 12px;
    padding: 12px;
    margin: 12px;
    text-decoration: none;
    color: black;
    margin-left: 12px;
    text-transform: uppercase;
    font-size: 15px;
    transition: color 0.2s;
    font-family: RobotoCondensed, arial;
    border: none;
    transition: background-color 0.2s;
}

.animateThis>div>a:hover, #fullScreenMenu>button:hover, .animateThis>div>div>a:hover, button:hover, .button:hover{
    background-color: rgb(175, 175, 175);
    transition: background-color 0.2s;
    cursor: pointer;
}

.animateThis>div{
    background-color: lightgray;
    padding: 24px;
    margin: 12px;
    border-radius: 12px;
}

.animateThis>div>div{
    background-color: rgb(156, 156, 156);
    padding: 12px;
    margin: 12px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 55vw;
}

#menuDisplayMobile, #menuIcon{
    display: none;
}

.showMenu{
    display: flex !important;
}

.animateThis{
    animation: slideDown 0.4s ease-in-out forwards;
}

#menuExternal{
    padding-inline-end: 40px;
    padding-inline-start: 0px;
}

.feed{
    padding-top: 42px;
    margin: auto;
}

div.centerFeed{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

div.centerFeed>article{
    width: 40%;
    margin: 24px;
}

article>img{
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

div.centerFeed>article>p{
    word-wrap: break-word;
}

article>a{
    color: black;
    transition: color 0.2s;
    text-underline-offset: 4px;
}

article>a:hover{
    color: gray;
    transition: color 0.2s;
}


footer>p{
    text-align: center;
}

div.twitter-tweet{
    margin: auto;
}

main#articleMain{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

article#article{
    width: 50vw;
}

article#article>h1{
    text-align: center;
}


.lds-spinner,
.lds-spinner div,
.lds-spinner div:after {
  box-sizing: border-box;
}
.lds-spinner {
  color: currentColor;
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
  scale: 50%;
}
.lds-spinner div {
  transform-origin: 40px 40px;
  animation: lds-spinner 1.2s linear infinite;
}
.lds-spinner div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 3.2px;
  left: 36.8px;
  width: 6.4px;
  height: 17.6px;
  border-radius: 20%;
  background: currentColor;
}
.lds-spinner div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.1s;
}
.lds-spinner div:nth-child(2) {
  transform: rotate(30deg);
  animation-delay: -1s;
}
.lds-spinner div:nth-child(3) {
  transform: rotate(60deg);
  animation-delay: -0.9s;
}
.lds-spinner div:nth-child(4) {
  transform: rotate(90deg);
  animation-delay: -0.8s;
}
.lds-spinner div:nth-child(5) {
  transform: rotate(120deg);
  animation-delay: -0.7s;
}
.lds-spinner div:nth-child(6) {
  transform: rotate(150deg);
  animation-delay: -0.6s;
}
.lds-spinner div:nth-child(7) {
  transform: rotate(180deg);
  animation-delay: -0.5s;
}
.lds-spinner div:nth-child(8) {
  transform: rotate(210deg);
  animation-delay: -0.4s;
}
.lds-spinner div:nth-child(9) {
  transform: rotate(240deg);
  animation-delay: -0.3s;
}
.lds-spinner div:nth-child(10) {
  transform: rotate(270deg);
  animation-delay: -0.2s;
}
.lds-spinner div:nth-child(11) {
  transform: rotate(300deg);
  animation-delay: -0.1s;
}
.lds-spinner div:nth-child(12) {
  transform: rotate(330deg);
  animation-delay: 0s;
}
@keyframes lds-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}


@keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-100%); /* Slide down from top */
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


@media only screen and (min-width: 760px) {
    #fullScreenMenu{
        display: none !important;
    }
}

@media only screen and (max-width: 760px) {
    #menuDisplayMobile{
        display: flex;
        padding-inline-end: 40px;
        padding-inline-start: 0px;
        margin: 0px;
    }
    #menuPages{
        display: none;
    }
    #menuExternal{
        display: none;
    }
    #menuIcon{
        display: flex;
        padding-inline-start: 40px;
        padding-inline-end: 0px;
    }
    

    .feed{
        padding-top: 42px;
        margin: auto;
    }
    
    div.centerFeed{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    div.centerFeed>article{
        width: 80%;
        margin: 24px;
    }

    article#article{
        width: 80vw;
    }
    
}