/* desktop */

.logo {height: 50px; 
    width: 272px;
    background-image: url("pictures/arrowslogo.png");
    position: absolute;
    left: 58px;
    top: 15.5px;}

.logo a {display: none;}

header {box-sizing: border-box;
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
     align-items: center;
     padding: 28px 32px 28px 250px;
     gap: 48px;
     position: absolute;
     width: 100%;
     height: 80px;
     left: 0px;
     top: 0px;
     background: #FFFFFF;
     border-bottom: 1px solid #21D0B3;}

nav a {width: 56px;
 height: 24px;
 font-family: 'Inter', sans-serif;
 font-style: normal;
 font-weight: 400;
 font-size: 20px;
 line-height: 24px;
 color: #181818;
 text-decoration: none;
 padding-left: 40px;}

.gradient1 {position: absolute;
            width: 100%;
            height: 480px;
            left: 0px;
            top: 80px;
            background: linear-gradient(180deg, #5985F0 0%, rgba(255, 255, 255, 0) 100%);}

/* .white-background {position:absolute;
                   width: 100%;
                   height: 1600px;
                   left: 0px;
                   top: 560px;
                   ;} */


            .articlestitle {    position:absolute;
                                left: 680px;
                                top: 60px;
                                font-family: 'Inter';
                                font-style: normal;
                                font-weight: 700;
                                font-size: 48px;
                                line-height: 58px;
                                color: #260E0E;}

figcaption p { font-family: 'Inter';
               font-style: normal;
               font-weight: 500;
               font-size: 16px;
               line-height: 130%;
               color: #1D9F8A;}

/* .articlescard p {text-decoration: none;} */



        .articlescard { 
                width: 30%;}
            
            .articlescards {                   
                    display: flex;
                    flex-wrap: wrap;
                    width: 100%;
                    justify-content: center;
                    margin-top: 270px;}    

          
    
p {text-decoration: none;}

.gradient2 {position: absolute;
            width: 100%;
            height: 70px;
            left: 0px;
            top: 0px;
            background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);}

.clouds {position: absolute;
        width: 100%;
        height: 1300px;
        left: 0px;
        top: 1519px;
        background-image: url("pictures/clouds2.png");
        background-size: cover;
        display: flex;}

.booklist p {   font-family: 'Inter';
                font-style: normal;
                font-weight: 300;
                font-size: 20px;
                line-height: 100%;
                color: #000000;}

.booklist span {font-family: 'Inter';
                font-style: italic;
                font-weight: 600;
                font-size: 20px;
                line-height: 140%;
                color: #000000;}

.booklist h1 {  font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: 28px;
                line-height: 180%;
                color: #000000;
                margin-bottom: 50px;}

.booklist {margin-top: 70px;
           margin-left: auto;
           margin-right: auto;}


        footer { position: absolute;
            width: 100%;
            height: 120px;
            top: 2800px;
            background-color: #D7FFF8;
            display: flex;
            justify-content: space-around;}
    
    .footertext1, .footertext2 {    font-family: 'Inter';
                                    font-style: normal;
                                    font-weight: 400;
                                    font-size: 14px;
                                    line-height: 10px;
                                    color: #3D3D3D;}
    
    .footertext1 span {font-size: 24px;
                       font-style: normal;
                       font-weight: 100;}
    
    .footertext2 span {  font-weight: 700;
                         font-family: 'Inter';
                         font-style: normal;} 
                         
        .mobile {display: none;}



/* mobile phone */


@media (max-width: 390px) {

.mobile {display: contents;}

body {width: 390px;}

.logo { height: 37px; 
        width: 170px;
        background-image: url("pictures-mobile/logo-mobile3.png");
        background-repeat: no-repeat;
        position: absolute;
        left: 15px;
        top: 13px;}
  
 header { position: absolute;
          width: 390px;
          height: 55px;
          left: 0px;
          top: 0px;
          box-sizing: border-box;
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
         align-items: center;
         padding: 18px 22px 18px 22px;
         background-color: #FFFFFF;
         border-bottom: 1px solid #21D0B3;}
           

/* mobile hamburger menu */

#myMobileLinks {display:none;}

.icon {position: absolute;
      width: 31px;
      height: 52px;
      left: 319px;
      top: 3px;}

.icon img {margin-left: -20px;}

.topnav { 
       position: absolute;
       background-color: #c65353;
      top: 0px;
      right: 15px;}
    
.topnav a {color: rgb(255, 255, 255);
      padding: 14px 16px;
      text-decoration: none;
      text-align: center;
      font-size: 20px;
      display: block;}

 /* nav a {position: absolute;
        width: 31px;
        height: 52px;
        left: 325px;
        top: 3px;} */

        .back {width:70px;}

        #back {font-family: 'Inter';
                font-style: normal;
                font-weight: 500;
                font-size: 16px;
                line-height: 24px;
                color: black;
                margin-bottom: 70px;
                margin-left: 15px;
                width: 70px;}

        #title {margin-left: 150px;
                text-decoration: none;
                font-family: 'Inter';
                  font-style: normal;
                 font-weight: 700;
                 font-size: 24px;
                 line-height: 29px;
                color: #000000;}

    
    .gradient1 {position: absolute;
                width: 390px;
                height: 2500px;
                left: 0px;
                top: 55px;
                background: linear-gradient(180deg, #5985F0 0%, rgba(255, 255, 255, 0) 50%);}
    
    /* .white-background {position:absolute;
                       width: 390px;
                       height: 0px;
                       left: 0px;
                       top: 300px;
                       background-color: white;
                       display: block;} */
                      
    
       
    figcaption p { font-family: 'Inter';
                   font-style: normal;
                   font-weight: 500;
                   font-size: 10px;
                   line-height: 13px;
                   color: black;}
    
    
    

.articlescard a {text-decoration: none;}



.twoarticles {display: flex;
                justify-content: center;
                justify-content: space-around;
                margin-bottom: 30px;}

.articlescard { width:165px;
                display: flex;
                justify-content: center;}

.articlescard a {
                width:180px;
                display: flex;
                justify-content: center;}

figure {width: 155px;}

figure img {width:155px}


#article-invisible {display: none;}
                 
     
              
        
figcaption h2 {
               font-family: 'Inter';
               font-style: normal;
               font-weight: 600;
               font-size: 12px;
               line-height: 15px;
               color: #000000;}
    
    .gradient2 {position: absolute;
                width: 390px;
                height: 100px;
                left: 0px;
                top: 0px;
                background-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 80%);}
    
    .clouds {position: absolute;
            width: 390px;
            height: 1800px;
            left: 0px;
            top: 1300px;
            display: flex;}
    
    .booklist p {   font-family: 'Inter';
                    font-style: normal;
                    font-weight: 300;
                    font-size: 16px;
                    line-height: 29px;
                    color: #000000;}
    
    .booklist span {font-family: 'Inter';
                    font-style: italic;
                    font-weight: 600;
                    font-size: 16px;
                    line-height: 29px;
                    color: #000000;}
    
    .booklist h1 {  font-family: 'Inter';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 16px;
                    line-height: 29px;
                    color: #000000;
                    margin-bottom: 50px;}
    
    .booklist {margin-top: 80px;
               margin-left: auto;
               margin-right: auto;
               width: 300px;
                height: 1000px;}
    
    
        footer { position: absolute;
                width: 390px;
                height: 120px;
                top: 3190px;
                background-color: #D7FFF8;
                display: flex;
                justify-content: space-around;
                left: 0px;}
       
       .backtotop {position: absolute;
               background-color: #21D0B3;
               width: 390px;
               height: 50px;
               left: 0px;
               top: -50px;
               color: white;
               font-family: 'Inter';
               font-style: normal;
               font-weight: 400;
               font-size: 16px;
               line-height: 19px;
               text-align: center;
               display: flex;}
       
       .backtotop p {padding-bottom: 30px;
                     margin-left: 120px;}
       
       .backtotop span {font-weight: 600;
                       font-size: 30px;
                       margin-right: 20px;}
        
        .footertext1, .footertext2 {    font-family: 'Inter';
                                        font-style: normal;
                                        font-weight: 400;
                                        font-size: 12px;
                                        line-height: 10px;
                                        color: #3D3D3D;
                                        width: 180px;}
        
        .footertext1 span {font-size: 11px;
                           font-style: normal;
                           font-weight: 100;}
        
        .footertext2 span {  font-weight: 700;
                             font-family: 'Inter';
                             font-style: normal;}
       
       #email1 {font-size: 10px;
                margin-top: 20px;}
       #email2 {font-size: 11px;
                margin-top: 20px;}

                .desktop {display: none;}}