@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

/* Resetter default browser margin og padding og giver default text style */

*{
    margin: 0;
    padding: 0;
    color: hsla(49, 100%, 88%, 1);
    font-family: 'Ubuntu', sans-serif;
}
/* Gøre så bodyen er mindst lige så stor som browser winduet og gøre scroll baren mørk */
body{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: hsl(306, 41%, 10%);
}
/* Gøre Menuen Sticky både på mobil og Desktop */
div.topBar{
    position: sticky;
    width: 100%;
    top: 0px;
    left: 0px;
    right: 0px;
}
/* Centre texten i headeren og giver den en fast højde */
header{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
    line-height: 2.5rem;
    height: 5rem;  
}
/* Laver de nævnte ting have en backgrounds farve og gøre så der ikke er side scrolling */
header, nav, footer, div.topBar{
    background-color: #530000;
    max-width: 100%;
}
/* Giver Logoet i headeren in størelse */
header>img{
    width: 2rem;
}
/* Gøre så billeder ikke fylder mere end 90% af vindues bredde */
img{
    max-width:90vw;
}
/* Gøre Menu indholdet usyndligt */
nav{
    display: none;
}
/* Gøre undermenu Mulighederne fylde hele breden af vinduet */
li>a{
    display: block;
    text-align: center;
    width: 100%;
}
/* Gøre så Checkboxen til hamburgermenuen kan bruges til Mobil Menu trick */
div.topBar>input{
    position: absolute;
    top: 0rem;
    right: 0rem;
    opacity: 0%;
    width: 3rem;
    height: 3rem;
    z-index: 7;
}
/* Gøre så Checkbox iconerne til hamburgermenuen kan bruges til Mobil Menu trick */
div.topBar>img{
    position: absolute;
    top: 0rem;
    right: 0rem;
    height: 3rem;
    
}
/* Gøre så de igtige iconer viser i hamburgermenuen og at menuen viser når den skal */
div.topBar>input ~ .closeicon{
    display: none;
}
div.topBar>input ~ .menuicon{
    display: block;
}
div.topBar>input:checked ~ .closeicon{
    display: block;
}
div.topBar>input:checked ~ .menuicon{
    display: none;
}
div.topBar>input:checked ~ nav{
    display: flex;
}
/* Centrer alt i main og giver den en baggrunds farve og at den kan vokse hvis den skal */
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    padding: 3rem 0rem;
    background-color: hsl(250, 40%, 10%);
}
/* Giver footeren en højde */
footer{
    height: 5rem;
}
/* Gøre så menuen fylder hele breden og ikke har list iconer */
ul{
    list-style: none;
    width: 100%;
}
/* Gøre så texten i menu valgmulighederne er i midten */
nav>ul>li>a{
    line-height: 3rem;
}
/* Giver noget normalt styleing til menu valgmulighederne */
nav>ul>li{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 3rem;
    position: relative;
    top: 0px;
    right: 0px;
}
/* Gøre så undermenuen står lige under den valgete valgmulighed */
input.undermenu{
    position: absolute;
    top: 0px;
    width: 100vw;
    height: 100%;
    opacity: 0%;
    z-index: 7;
}
input.undermenu ~ ul{
    display: none;
    flex-direction: column;
    position: absolute;
    top:3rem;
    left:0px;
    background-color: hsla(0, 100%, 16%,0.97);
    width: 100vw;
}
input.undermenu:checked ~ ul{
    display: flex;
}
a{
    text-decoration: none;
}
input.undermenu ~ ul>li{
    height: 4rem;
}
input.undermenu ~ ul>li>a{
    line-height: 4rem;
    font-size: 2rem;
}
main>div{
    width: 80%;
}
main>div>img{
    width: 100%;
}
main>article{
    max-width: 80vw;
}


/* Footer Links */
footer{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Cryptozoology */

main.cryptozoology>div{
    margin: 2rem 0rem;
    width: 60vw;
}
main.cryptozoology>div img{
    width: 100%;
}
main>h3{
    font-size: 1.1rem;
    margin: 0.5rem 0rem;
    text-align: center;
    max-width: 85vw;
}
section>article{
    margin: 1.5rem 0rem;
    width: 75vw;
}
main.cryptozoology section article div{
    float: left;
    margin-right: 1rem;
    max-height: 100%;
}
main.cryptozoology section article:nth-of-type(2n) div{
    float: right;
    margin-right: 0rem;
    margin-left: 1rem;
}
main.cryptozoology section div>img{
    height: 100%;
}

a.one{
    display: none;
}

section.x-margin>article{
    height: 15rem;
}
main.cryptozoology section article div{
    height: 8rem;
}

/* Blog Overside */

article.blog{
    width: 100vw;
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
article.blog a:not(article.blog p a){
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 5rem;
    float: left;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
article.blog>div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem 0rem;
    width: 100%;
    height: 10rem;
}
article.blog img{
    max-height: 100%;
    max-width: 100%;
}
article.blog p{
    font-size: 0.5rem;
}


/* Fancy Text */



:root {  
    --purple: rgb(123, 31, 162);
    --violet: rgb(103, 58, 183);
    --pink: rgb(244, 143, 177);
}
  
@keyframes background-pan {
    from {
      background-position: 0% center;
    }
    
    to {
      background-position: -200% center;
    }
}
  
@keyframes scale {
    from, to {
      transform: scale(0);
    }
    
    50% {
      transform: scale(1);
    }
}
  
@keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    
    to {
      transform: rotate(180deg);
    }
}

article.blog .magic {
    display: inline-block;
    position: relative;
  }
  
article.blog .magic > .magic-star {
    --size: clamp(20px, 1.5vw, 30px);
    
    animation: scale 700ms ease forwards;
    display: block;
    height: var(--size);
    left: var(--star-left);
    position: absolute;
    top: var(--star-top);
    width: var(--size);
  }
  
article.blog .magic > .magic-star > svg {
    animation: rotate 1000ms linear infinite;
    display: block;
    opacity: 0.7;
  }
  
article.blog .magic > .magic-star > svg > path {
    fill: var(--violet);
  }
  
article.blog .magic > .magic-text {
    animation: background-pan 3s linear infinite;
    background: linear-gradient(
      to right,
      var(--purple),
      var(--violet),
      var(--pink),
      var(--purple)
    );
    background-size: 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
  }



@media screen and (min-width: 310px){
    p{
        font-size: 1rem;
    }
    article.blog p{
        font-size: 1.2rem;
    }
    article.blog .magic > .magic-text{
        font-size: 1.5rem;
    }
    article.blog a:not(article.blog p a){
        width: 7rem;
        height: 7rem;
    }
}

@media screen and (min-width: 460px){
    p{
        font-size: 1.2rem;
    }
}

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

    input.undermenu ~ ul>li{
        height: 2rem;
    }
    input.undermenu ~ ul>li>a{
        line-height: 2rem;
        font-size: 1rem;
    }

    article.blog p{
        font-size: 1.4rem;
    }
    article.blog .magic > .magic-text{
        font-size: 2rem;
    }

    /* Cryptozoology */

    h3{
        font-size: 2rem;
    }
    main>h3{
        font-size: 1.5rem;
    }
    main.cryptozoology>div{
        margin: 2rem 0rem;
        width: 30vw;
    }
    main.cryptozoology>div img{
        width: 100%;
    }
    section>article{
        width: 60vw;
    }

    a.one{
        display: block;
    }
    a.two{
        display: none;
    }
    div.topBar>img.menuicon,div.topBar>input{
        display: none;
    }
    ul{
        display: flex;
        flex-direction: row;
        position: relative;
        background-color: hsla(0, 100%, 16%,0.97);
        width: 100%;
    }
    div.topBar>input ~ nav{
        display: flex;
    }
    ul li input{
        display: none;
    }
    li:hover>ul.undermenu{
        display: flex;
        flex-direction: column;
        position: absolute;
        top:3rem;
        left:0px;
        background-color: hsla(0, 100%, 16%,0.97);
        width: 100%;
    }
    nav>ul>li:hover{
        background-color: hsla(49, 100%, 88%, 0.1);
    }
    ul.undermenu>li:hover{
        background-color: hsla(0, 100%, 25%,1);
    }
    ul.undermenu>li{
        text-align: center;
        width: 100%;
    }
    h2{
        font-size: 3rem;
    }
    p{
        width: 60vw;
    }
    main>div{
        width: 60%;
    }
    header>img{
        width: 3rem;
    }
}
@media screen and (min-width: 1000px){
    p{
        font-size: 1.5rem;
    }
}