/* MAIN CSS FOR STATIC PAGES */

/* TYPOGRAPHY */
h1{
    text-align: center; 
    font-family: "courier"; 
    padding-top: 15px;
    text-transform: uppercase;
    font-size: 28px;
}

h2{
    text-align: center; 
    font-family: "courier"; 
    padding-top: 5px; 
    font-size: 26px;
}

h3{
    text-align: center;
    font-family: "courier";
    font-size: 24px; 
    padding-bottom: 5px;
    font-weight: 800;
}

h4{
    text-align: center;
    font-family: "courier";
    font-size: 22px; 
    padding-bottom: 5px;
    font-weight: 800;
}

h5 {
    text-align: left;
    font-family: "courier";
}

    .caption{
    font-style:italic;
    font-family:"courier";
    text-align:center;
    margin-top: 10px;
}

.title h1 {
    margin-bottom: -10px;
    text-decoration: underline;
    font-size: 35px;
}
.title h2{
    padding-top:0px;
    text-transform: uppercase;
}



a{color:#4e008b!important;}
a:hover{color:#3a2479!important;}

/* DESIGN */

mark{
    background:#4e008b;
    color:white;
    padding-left: 2px;
}

.center {
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  
body {
    background:#fff;
    margin-top: 50px;
}

::selection {
  background: #6445bb;
  color: white;
}

.dashed-line {
  border: 2px dashed #6445bb;
  width: 15%;
}

    .punktlista {
        margin-top:-25px;
        font-family: courier;
        font-size: 18px;
        justify-content: center;
        display:flex;
    }

/* INTERVJU SECTION */
.intervju {
        background: #000;
        padding: 15px;
}
.intervju p{
    font-style: italic; 
    font-family: courier; 
    color:#fff;
}
.intervju h2{
    font-family: courier; 
    color: white;
}
.intervju h3{
    font-family: courier; 
    color: white;
}
.intervju h4{
    font-family: courier; 
    color: white;text-align: 
    center;font-size: 18px;
}

/* MEDIA + SOME */
.instagram {
    display: flex;
    justify-content: center;
  }

.facebook {
    display: flex;
    justify-content: center;
}

.facebook-video {
    display: flex;
    justify-content: center;
}
  
    .anim-isoga {
        display:flex;
        justify-content:center;
        padding-bottom: 3%;
}
    .anim-isoga-bottom{
        margin-bottom: 10%;
}
    .anim-isoga img {
        position:absolute; 
        width: 20%;
}
   .isoga1 {
       animation-name: switch;
       animation-timing-function: steps;
       animation-iteration-count: infinite;
       animation-duration: 1s;
       animation-direction: alternate;
}
    @keyframes switch {
        0% {
            opacity: 1;
    }
        50% {
            opacity: 1;
    }   100% {
        opacity: 0;
    }
}
    .isoga2 {
        animation-name: switch2;
        animation-timing-function: steps;
        animation-iteration-count: infinite;
        animation-duration: 1s;
        animation-direction: alternate;
}
    @keyframes switch2 {
            100% {
                opacity: 1;
        }
            50% {
                opacity: 0;
        }
            0% {
                opacity: 0;
        }
}
    @keyframes blinker {
        50% {
          opacity: 0;
        }
     }
/* DESKTOP */

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

/* TYPOGRAPHY */
    p{
        font-size: 18px;
        font-family: "courier",sans-serif; 
        margin-right: 18%;
        margin-left: 18%;
}
    .intervju h4{
        font-family: courier; 
        color: white;text-align: 
        center;font-size: 18px;
        margin-right: 18%;
        margin-left: 18%;
}
    .ingress p {
        font-size: 20px; 
        font-weight: 600; 
        text-align: justify; 
        margin-left: 18%; 
        margin-right: 18%;
}
    .latlista p{
        font-weight: 600;
}
      
      .texter-startsidan{
        text-align: center;}

      .ny-skiva-ute-nu {font-style: italic;text-align: center; padding-bottom: 15px;}
      .ny-skiva-ute-nu p {font-family: courier;}
      .ny-skiva-ute-nu {animation: blinker 1s step-start infinite;}
      .ny-skiva-ute-nu a{color:red;
      }

  /* MEDIA + SOME */
  
 .center_logo {
     text-align: center; 
     width:50%; 
     padding-left: 25%;
 }
    .youtube {
        background: black;
        text-align: center;
        aspect-ratio: 16 / 9;
        margin: 0 auto;
        width: 60%;
        margin-left: 19%;
        padding-top: 25px;
        padding-bottom: 25px;
}
    .spotify {
        text-align: center; 
        padding: 0% 20%
}
    img{
        width: 50%;
        text-align: center;
}
    .isoga-doodle{
        display: flex;
        justify-content: center;
        width:60%;
        margin: 0 auto;
}
    .album-cover {
        text-align: center;
}
    .Profilbild01 {
        padding-left: 30%; 
        width:80%;
}
    .piska {
        text-align: center; 
        width:20%; 
        padding-left: 40%;
}
    .cyklop {
        padding-left: 41%; 
        width:40%;
}
    .textblad{
        display:flex;
        justify-content:center;
        margin: 0 auto;
        width:80%;
    }

}

/*MOBIL VERSION */

@media screen and (max-width: 719px)
{
    p{font-size: 18px;font-family: "courier",sans-serif;}
    h5 {text-align: left;font-family: "courier";}
    img{width: 99% ;}
      .piska {text-align: center; width:50%; padding-left: 25%;}
    .wrap {padding-bottom: 0%;}
    a{color:#4e008b;}
    a:hover{color:#3a2479;}
    
     .center_logo {
    display: flex;
    justify-content: center;
    width: 100%!important;
  }

    /* YOUTUBE */
      .youtube {background: black;
      aspect-ratio: 16 / 9;
      width: 100%;}

    .ingress p {
      font-size: 18px; font-weight: 600; text-align: center; margin-left: 1%; margin-right: 1%;
    }

      .texter-startsidan{
        text-align: center;}
      .ny-skiva-ute-nu {font-style: italic;text-align: center;color:red;}
      .ny-skiva-ute-nu p {font-family: courier;}
      .ny-skiva-ute-nu {animation: blinker 1s step-start infinite;
      }
      
          figure {
        width: 100%;
        display: inline;
        justify-content: center;
    }
    .cyklop {
        display: flex;
        justify-content: center;
        width:60%;
        margin: 0 auto;
}
     .anim-isoga {
         padding-left: 12%; 
         width:80%;
         position: relative;
     }
    .anim-isoga-bottom{
        margin-bottom: 55%;
    }
    .anim-isoga img {
        position:absolute; 
        width: 80%;}
                .isoga1 {
                      animation-name: switch;
                        animation-timing-function: steps;
                         animation-iteration-count: infinite;
                          animation-duration: 1s;
                           animation-direction: alternate;
                  }
                  @keyframes switch {
                        0% {
                          opacity: 1;
                        }
                        50% {
                          opacity: 1;
                        }
                        100% {
                          opacity: 0;
                        }
                      }
                      .isoga2 {
                            animation-name: switch2;
                              animation-timing-function: steps;
                               animation-iteration-count: infinite;
                                animation-duration: 1s;
                                 animation-direction: alternate;
                        }
                        @keyframes switch2 {
                              100% {
                                opacity: 1;
                              }
                              50%{
                                opacity: 0;
                              }
                              0% {
                                opacity: 0;
                              }
                            }
 }