@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Lexend+Deca:wght@500;700;900&family=Lexend:wght@100;200;300;400;500;600;700;900&family=Voltaire&display=swap');

/*
font-family: 'Dela Gothic One', cursive;
font-family: 'Lexend', sans-serif;
font-family: 'Lexend Deca', sans-serif;
font-family: 'Voltaire', sans-serif;
*/
:root {
    --dgray:  rgb(13, 13, 13);
    --gray:   rgb(30, 30, 30);
    --orange: rgb(125, 123, 123);
}


html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: transparent;
    font-family: 'Courier New', sans-serif;
    font-size: 16px;
    font-weight: 300;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Courier New', sans-serif;
    font-weight: 900;
    width: 100%;
    line-height: 100%;
}

p {
    line-height: 150%;
    width: 100%;
    text-align: left;
}

h1 {
    font-size: 5em; 
    transform: skew(-0deg, -0deg);
}

h2 {font-size: 2em;}

a {
    transition: all .25s ease-in-out;
}









/*   X  X  XXXX  XX  XXX   XXXX XXX    */
/*   X  X  X    X  X X  X  X    X  X   */
/*   XXXX  XXXX XXXX X  X  XXXX XXX    */
/*   X  X  X    X  X X  X  X    X X    */
/*   X  X  XXXX X  X XXX   XXXX X  X   */

header {
    background-color: var(--gray);
    background-image: url(bilder/grunge.png);
    background-size: cover;
    background-position: center;
    background-blend-mode: color-burn;
    background-repeat: no-repeat;
    padding: 0;
    height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -10000;
}

header h1 {
    font-size: 5em;
    margin: 0;
    padding: 0;
    color: var(--orange);
    text-align: center;
}

header img {
    height: 100%;
    width: auto;
    transform: skew(0deg, 0deg);
    animation: logo 2s 1;
}

@keyframes logo {
    from {opacity: 0%; 
        transform: skew(0deg, 10deg);}

    to {opacity: 100%; 
        transform: skew(0deg, 0deg);}
    
}









/*   X  X   XX  X  X   X   */
/*   XX X  X  X X  X  XX   */
/*   X XX  XXXX X  X   X   */
/*   X  X  X  X X  X   X   */
/*   X  X  X  X  XX  XXXX  */

.sticky {
    position: fixed;
    top: 0;
}

.sticky + #inline {
    background-position: 5vw center;
}
  
.sticky + section {
    padding-top: 60px;
}

#inline {
    background-color: var(--dgray);
    width: 100%;
    z-index: 10000;
}

#inline ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 5px 0;
}

#inline ul li {
    display: inline-block;
    color: rgb(255, 255, 255);
    padding: 10px 0px 5px;
    margin: 0px 30px;
    transition: all 0.2s ease-in-out;
    font-weight: 400;
}

#inline ul li:after {
    display:block;
    content: '';
    border-bottom: solid 2px var(--orange);  
    transform: scaleX(0);  
    transform-origin: 100% 50%;
    transition: transform 250ms ease-in-out;
}

#inline ul li:hover:after { 
    transform: scaleX(1); 
    transform-origin:  0% 100%;}


#inline ul li a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

#inline ul li:hover a {
    color: var(--orange);
}









/*   X  X   XX  X  X  XXX   */
/*   XX X  X  X X  X X  X   */
/*   X XX  XXXX X  X   X    */
/*   X  X  X  X X  X  X     */
/*   X  X  X  X  XX  XXXX   */

.toggler {
    z-index: 999;
    height: 50px;
    width: 50px;
    position: fixed;
    top: 10px;
    left: 10px;
    cursor: pointer;
    opacity: 0;
    display: none;
}

.hamburger {
    z-index: 666;
    position: fixed;
    top: 10px;
    left: 10px;
    height: 40px;
    width: 40px;
    padding: 3px;
    margin: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color:  rgb(0, 0, 0);
    border-radius: 100%;
}

.hamburger > div {
    position: relative;
    top: 0;
    left: 0;
    background: var(--orange);
    height: 4px;
    width: 60%;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.hamburger > div::before,
.hamburger > div::after {
    content: '';
    position: absolute;
    top: -8px;
    background: var(--orange);
    width: 100%;
    height: 4px;
    border-radius: 6px;
    transition: all 0.4s ease;
}

.hamburger > div::after {
    top: 8px;
}

.toggler:checked + .hamburger > div {
    background: rgba(0,0,0,0);
}

.toggler:checked + .hamburger > div::before {
    top: 0;
    transform: rotate(45deg);
    background: var(--orange);
}

.toggler:checked + .hamburger > div::after {
    top: 0;
    transform: rotate(135deg);
    background: var(--orange);
}

.menu {
    position: fixed;
    top: 0;
    left: -100%;
    z-index: 0;
    background: rgba(15, 15, 15, .96);
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: left;
    transition: all 0.3s ease;
}

.toggler:checked ~ .menu {
    left: 0;
    z-index: 333;
}

.menu ul {
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: all 2s ease;
  width: 100%;
}

.toggler:checked ~ .menu ul {
    opacity: 1;
}

.menu ul li {
  margin: 0px;
  padding: .5em 2em;
  font-size: 1.5em;
  font-weight: 500;
  background: rgba(230, 134, 57, 0);
  width: 100%;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.menu ul a {
  color: #fff;
  text-decoration: none;
}

.menu ul li:hover {
  color: var(--gray);
  background: rgb(129, 129, 129);
  padding-left: 4em;
}

.menu a .menu {
    left: -100%;
}









/*    XXX  XXXX  XX  XXXXX X  XX  X  X   */
/*   X     X    X  X   X   X X  X XX X   */
/*    XX   XXXX X      X   X X  X X XX   */
/*      X  X    X  X   X   X X  X X  X   */
/*   XXX   XXXX  XX    X   X  XX  X  X   */

section {
    padding: 0 5vw 5em;
    color: rgb(255, 255, 255);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

section h1, footer h1 {
    text-align: center;
    color: var(--orange);
}

section h2 {
    color: var(--orange);   
}









/*   XXX    XX  X  X XXX    */
/*   X  X  X  X XX X X  X   */
/*   XXX   XXXX X XX X  X   */
/*   X  X  X  X X  X X  X   */
/*   XXX   X  X X  X XXX    */

#bandpic1 {
    height: 60vh;
    width: 100vw;
    background-image: url(media/stadsfest2023.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    filter: saturate(.4) contrast(95%);
}

#bandpic2 {
    height: 60vh;
    width: 100vw;
    background-image: url(media/skelleton.png);
    background-size: 70%;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 50px;
}









/*   X  X  XXXX X   X   XXX    */
/*   XX X  X    X   X  X       */
/*   X XX  XXXX X X X   XX     */
/*   X  X  X    X X X     X    */
/*   X  X  XXXX  X X   XXX     */

#news {
    min-height: auto;
    gap: 40px;
    background-color: var(--dgray);
    align-items: normal;
}

#news h2 {
    color: rgb(34, 34, 34);
    text-align: center;
}


.news {
    width: 400px;
    min-height: 200px;
    background-color: var(--orange);
    color: var(--gray);
    text-align: justify;
    padding: 0px 40px 20px;
    font-weight: 300;
    box-sizing: border-box;
    border-radius: 10px;
    margin: auto;
    flex-grow: 1;
}

#news a {
    color: rgb(249, 249, 249);
    text-decoration: none;
    }

#news a:hover {
    color: rgb(0, 0, 0);
}

.news img {
    height: 300px;
    object-fit: cover;
    float: left;
    margin-right: 20px;
}

.up {display: block;}
.down {display: none;}









/*    XX   XXX  X   X X   X   */
/*   X  X  X  X XX XX X   X   */
/*   XXXX  XXX  X X X  X X    */
/*   X  X  X  X X   X   X     */
/*   X  X  X  X X   X   X     */

#army {
    align-items: center;
    gap: 0;
    background-color: var(--gray);
    background-image: url(bilder/grunge.png);
    background-size: contain;
    background-position: fixed;
    background-blend-mode: color-burn;
    background-repeat: no-repeat;
    color: rgb(255, 255, 255);
}

.members {
    height: 60vh;
    width: 12.4vw;
    overflow: hidden;
    display: flex;
    justify-content: center;
    position: relative;
    color: white;
    transition: all .4s ease-in-out;
}

.members img {
    height: 100%;
    width: auto;
    margin: auto;
    transform: scale(100%);
    object-fit: cover;
    filter: grayscale(100%) contrast(150%);
    transition: all .4s ease-in-out;
}

.bandtext {
    width: 100%;
    position: absolute;
    margin: 0 0 .5em;
    padding: 10px 30px;
    bottom: -1%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    transition: all .2s linear;
    box-sizing: border-box;
    opacity: 0;
    font-size: 16px;
}

.bandtext h2, .bandtext p {
    margin: 0;
    padding: 0;
}

.members:hover img {
    transform: scale(150%);
    object-fit: cover;
    filter: grayscale(100%) contrast(100%);
    transition: all 16s linear;
}

.members:hover .bandtext {
    bottom: 0;
    opacity: 1;
}

.bandtext h2 {
    color: rgb(255, 255, 255);
}

#read {
    scroll-margin-top: 20vh;
    margin: 10vh auto 0;
    padding-top: 1em;
    border-top: 1px dashed rgb(71, 70, 70);
}

#story {
    display: none;
    opacity: 0;
    column-count: 3;
    column-gap: 30px;
    column-fill: balance;
    line-height: 150%;
    text-align: justify;
    overflow: hidden;  
}

label {
    cursor: pointer;
    width: 100%;
    margin-bottom: 1em;
}
  
input[type=checkbox]:checked ~ label {
  .placeholder::after {
    content: 'Läs mindre';
  }
}

input[type=checkbox]:checked ~ #story {
    display: block;
    opacity: 1;
    animation: fullstory 2s 1;
}

@keyframes fullstory {
    from {opacity: 0%;}
    to {opacity: 100%;}
    
}

.placeholder::before {
    content: '>';
}

.placeholder::after {
    content: 'Läs mer';
    font-weight: 700;
    font-size: .8em;
    animation: pulse 3s infinite;
}

@keyframes pulse {
    50% {color: var(--orange)}
}





.pic1 {
    width: 300px;
    filter: saturate(20%);
    float: left;
    margin: 0 20px 10px 0;
    border: 2px solid white;
    box-sizing: border-box;
}

.pic2 {
    width: 100%;
    margin: 0 20px 10px 0;
    border: 2px solid white;
    box-sizing: border-box;
}

#army a {
    background-color: var(--orange);
    padding: 2px 10px;
    color: var(--gray);
    font-weight: 700;
    font-size: .8em;
    border-radius: 20px;
    text-align: center;
    text-decoration: none;
}

.skell {
    height: 60vh;
    width: auto;
}

hr {
    width: 100%;
    margin: 100px 0 0;
    border: none;
    border-top: 1px dashed white;
}









/*   XXX   X  X  XX  XXXXX  XX   XXX    */
/*   X  X  X  X X  X   X   X  X X      */
/*   XXX   XXXX X  X   X   X  X  XX    */
/*   X     X  X X  X   X   X  X    X   */
/*   X     X  X  XX    X    XX  XXX    */

#photos {
    background-color: rgb(208, 193, 149);
}

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 60px;
}
  
.box {
    width: 20vw;  /* Or whatever */
    height: 33vh; /* Or whatever */
    margin: auto;  /* Magic! */
    background: #000;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
}
  
.box img {
    min-height: 100%;
    min-width: 100%;
    transform: scale(100%);
    margin: auto;
    object-fit: cover;
    transition: all 2s ease-in-out;
}
  
.lightbox {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2%;
    background: rgba(0, 0, 0, 0.8);
    text-decoration: none;
}
 
.box img:hover{
    transform: scale(120%);
}

.lightbox:target {
    display: block;
}
  
.lightbox span {
    display: flex;
    justify-content: center;
    align-items: end;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.lightbox p {
    color: rgb(0, 0, 0);
    font-weight: 400;
    background: rgba(255, 255, 255, 0.7);
    padding: 2px 10px;
    width: auto;
    text-align: center;
}

.bw, #img6 {
    filter: grayscale(1);
}









/*   X   X  XXXX XXX  X   XX    */
/*   XX XX  X    X  X X  X  X   */
/*   X X X  XXXX X  X X  XXXX   */
/*   X   X  X    X  X X  X  X   */
/*   X   X  XXXX XXX  X  X  X   */

#media {
    background-color: var(--gray);
    color: rgb(255, 255, 255);
    gap: 0 10px;
}

#spotify {
    width: 30%;
    height: 60vh;
    border-radius: 10px;
}

#youtube {
    height: 60vh;
    aspect-ratio: 16 / 9;
    border-radius: 10px;
}









/*   X   X  XXXX XXX   XXX  X  X   */
/*   XX XX  X    X  X X     X  X   */
/*   X X X  XXXX XXX  X     XXXX   */
/*   X   X  X    X  X X     X  X   */
/*   X   X  XXXX X  X  XXX  X  X   */

#merch {
    background-color: var(--orange);
    height: auto;
    gap: 20px;
    color: var(--gray);
}

#merch h1, #merch h2 {
    color: var(--gray);
}

#merch ul {
    width: 100%;
}

.merch {
    height: 350px;
    width: 200px;
    margin: auto;
    overflow: hidden;
    display: flex;
    flex-grow: 1;
}

.merch img {
    min-height: 100%;
    min-width: 100%;
    object-fit: cover;
}









/*   XXXX   XX   XX  XXXXX XXXX XXX    */
/*   X     X  X X  X   X   X    X  X   */
/*   XXXX  X  X X  X   X   XXXX XXX    */
/*   X     X  X X  X   X   X    X X    */
/*   X      XX   XX    X   XXXX X  X   */

footer {
    background-color: var(--orange);
    color: white;
    height: auto;
    padding: 0px 5vw 40px;
    color: rgb(227, 227, 227);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4%;
    text-align: center;
}

footer h1 {
    margin-bottom: 0;
}

footer h2 {
    width: 100%;
}

footer img {
    height: 60px;
    filter: opacity(.8);
    transition: all .2s ease-in-out;
    margin-right: 20px;
}

footer img:hover {
    filter: opacity(1);
}

.colleft {
    width: 25%;
    height: 385px;
    text-align: left;
    overflow: hidden;
    border-radius: 20px;
    margin: 4em 0 0 23%;
}

.colright {
    width: 48%;
    height: 385px;
    text-align: left;
}

footer iframe {
    width: 100%;
    height: 539px;
    border: none;
}

form {
    width: 30vw;
    height: 400px;
    text-align: left;
}

form input, form textarea {
    width: 100%;
    background-color: rgb(58, 58, 58);
    border: 1px solid rgb(138, 138, 138);
    padding: .5em;
    margin-bottom: 10px;
    color: rgb(227, 227, 227);
    font-family: 'Lexend', sans-serif;
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--orange);
}

form textarea {
    height: 6em;
    resize: none;
    color: var(--orange);
}

#submit {
    width: 30%;
    border-radius: 30px;
    background-color: var(--orange);
    color: var(--gray);
    font-weight: 700;
    border-color: black;
    transition: all .2s ease-in-out;
}

#submit:hover {
    background-color: rgb(168, 112, 35);
    color: rgb(0, 0, 0);
}









/*   XXX   XXXX  XXX XXX   XX  X  X  XXX X X  X XXXX  */
/*   X  X  X    X    X  X X  X XX X X    X X  X X     */
/*   XXX   XXXX  XX  XXX  X  X X XX  XX  X X  X XXXX  */
/*   X  X  X       X X    X  X X  X    X X X  X X     */
/*   X  X  XXXX XXX  X     XX  X  X XXX  X  XX  XXXX  */

@media all and (max-width: 980px) {

    h1 {
        font-size: 4em;
    }

    header {
        height: auto;
    }

    header img {
        height: auto;
        width: 90%;
    }
    
    .toggler, .hamburger {
        display: flex;
    }

    #inline, .sticky {
        display: none;
    }

    .news {
        width: 100%;
    }
    
    .news img {
        width: 100%;
        height: auto;
        margin-bottom: 1em;
    }

    .up {display: none;}
    .down {display: block;}

    #normal {
      display: none;
    }
    
    #open {
      display: block;
    }

    .members {
        display:none;
        height: 30vh;
        width: 100vw;
        overflow: hidden;
    }
    
    .members img {
        display: block;
        height: auto;
        width: 40%;
        margin: auto;
    }

    .palm {
        position: absolute;
        top: -60%;
    }

    #story {
        column-count: 1;
    }

    .skell {
        height: auto;
        width: 90%;
    }

    #spotify {
        width: 100%;
        height: 70vh;
        margin-bottom: 50px;
    }
    
    #youtube {
        height: auto;
        width: 100%;
    }

    .box {
      width: 90vw;
      height: 300px;
    }

    .colleft {
        width: 100%;
        margin: 2em 0;
        text-align: center;
    }

    .colright {
        width: 100%;
        height: auto;
        text-align: center;
    }
    
    form {
        width: 80vw;
        height: auto;
        text-align: center;
        margin: 40px auto;
    }
    

}