/*CSS FÖR NYHETSAVDELNINGEN */

/*Button – fler artiklar */
#content {
    display:none;
}

#toggleButton{
    background-color: #4e008b;
    color: #fff;
    font-size: 18px;
    border: none;
    text-align: center;
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
}

#toggleButton:hover{
    background-color:#3a2479;
    Color:#fff;
}
#ButtonContainer {
    text-align: center;
}

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

p{
    font-size: 18px;
font-family: "courier",sans-serif;
}

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: 15px; 
    font-size: 24px;
}

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

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

.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:#6445bb!important;}

/* DESIGN */


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

body {
    background:#fff;
    margin-top: 50px;
}

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

/* MEDIA + SOME */
.center {
    display: flex;
    justify-content: center;
  }
  
.youtube {
    background: black;
    aspect-ratio: 16 / 9;
    margin: 0 auto;
    width: 60%;
    margin-left: 19%;
 }

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

::selection {
  background: #a25f5d;
  color: white;
}

@media screen and (min-width: 720px)
{
    
p{
    font-family:"courier";
    margin-left:16%;
}
  
/* YOUTUBE */
    .youtube {background: black;
    aspect-ratio: 16 / 9;
  margin: 0 auto;
  width: 60%;
  margin-left: 19%;
  }

/*navbar horizontal*/

      
    /* NEWS SECTION DESKTOP */
    
    .news_feed a {
        color:#fff;
        text-decoration: none;
        }

    .news_feed{
        width: 50%;
        justify-content: center;
        margin: 0 auto;
    }

    /* News Thumbnail */

    .news_thumbnail {
      text-align:center;
    }
    
    .news_thumbnail img {
        max-width:85%;
        height: auto;
        border-radius: 7px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
        display: block;
        margin: 0 auto;
    }
    
    /* Add a card effect for articles */
    .card {
       background-color: #0d0d0d;
       padding: 20px;
       margin-top: 20px;
       color: white;
       position: relative;
       padding-bottom: 40px;
        border-radius: 10px;
    }
    .card:hover {
       background-color: #000;
    }
    
    .news_info {
        padding-left: 10%;
        padding-right: 10%;
    }
    
    .news_info H3,
    .news_info h5,
    .news_info p {
        text-align:left;
        font-family: courier;
    }
    .news_info p{
      font-size:17px;
      margin-left:-0%;
    }
    .news_info h3 {
      font-size:22px;
      color:#6b00bf;
    }
    .news_info h5 {
      color:white;
    }
}

/*MOBIL VERSION */

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

p{
    font-size: 16px;
    font-family: "courier",sans-serif;
}
    body {background:#fff;margin-top: 50px;}
    Mark {background:#4e008b; color:white;padding-left: 2px;}
    img{width: 99% ;}
    .wrap {padding-bottom: 0%;}
    a{color:#6445bb;}
    a:hover{color:#844;}

.center {
    display: flex;
    justify-content: center;
  }
  
/* News Thumbnail */
    
 .news_thumbnail img {
     padding-top:5%;
        max-width:85%;
        height: auto;
        border-radius: 7px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
        display: block;
        margin: 0 auto;
    }
    
        .news_feed a {
    color:#fff;
    text-decoration: none;
    }
    
    .news_feed a:hover {
        color: #fff;
    }

    /* Add a card effect for articles    */
    .card {
    float:right;
       background-color: #202020;
       padding-left: 15px;
       padding-right: 15px;
       margin-top: 5%;
       color: white;
       margin-bottom: 5%;
       border-radius: 7px;
    }
     
   .card h3 {
      text-align: left;
      color:#6b00bf;
      font-size: 22px;
      word-spacing: -4px;
    }
 }