:root{ color-scheme: light !important}

body, html{
    background-image: url("../img/img_BG3.png") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    font-size: 16px;
   
    min-height: 100vh !important;
    
    display: flex;
    flex-direction: column;


    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: 100%;

    background-color: white;
    color-scheme: light !important;
}



/*Vines*/
.vineUp {
    background-image: url("../img/img_leaves_top.png");
    background-repeat: no-repeat;
    position: fixed;
    width: 392px;
    height: 497px;
    top:0%;
    left: 0%;

    max-width: 392px;
    max-height: 497px;

    width: 35%;
    height: 35%;
    background-size: contain;
}

.vineDown {
    background-image: url("../img/img_leaves_bot.png");
    background-repeat: no-repeat;
    position: fixed;
    width: 362px;
    height: 473px;
    bottom: 0px;
    right: auto; 
    margin-bottom: 0;
    align-self: flex-end;

    
    max-width: 392px;
    max-height: 497px;

    width: 35%;
    height: 35%;
    background-size: contain;
    background-position: bottom right;
    
}


/*Language*/
.flag{
position: fixed;
top: 16.58% !important;
left: 9%;
z-index: 1000 !important;
width: 100px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 14.49px;
color: #b2b2b2;


}

.flag img{
    border: 4px solid #b2b2b2;
    padding: 0;
    margin: 0;

}

.langText{
    top: 2px;
    left: -25px;
    position: absolute;
}

.dropdown-menu {
    display: none; /* Hide dropdown by default */
    
    
}

.dropdown:hover .dropdown-menu {
    display: block; /* Show dropdown on hover */
    margin-top: -10px; /* Adjust positioning if needed */
    margin-left: -2px;
    
    border: none;

position: absolute;

}


.dropdown button:focus, 
.dropdown button:hover,
.dropdown button:active{

    background-color: transparent; /* Remove blue and grey backgrounds */
    box-shadow: none; /* Remove any shadow */
    
}

/*jap flag hidden for now*/
.dropdown-item img{
    visibility: hidden;
}



/* Nav */
.nav{
    position: relative;

}

.navImg{
    /*margin-top: 12.4vh; alkuperäinen*/
    margin-top: 8.94vh; /*muutos 8.10*/


}

.navi{
    height: 500px;
    height: 35vh;
    
}

.navbar{
    width: 100%;

    
    
}

.navbar-nav{
    /*margin-top: calc(8.1vh * 0.67); alkuperäinen*/
    margin-top: calc(8.1vh * 0.67 + 0.7vh); /*muutos 8.10*/

    background-color: #ffffff;
    opacity: .77;

    
    width: 650px;
   

 /*   padding-right: 16px;
    padding-left: -5px;
*/

    
}



.nav-item  a{
 

    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #dfdedd;
    font-size: 28.98px;
    margin-left: 10px;
    

    
}

.nav-item .active{
    color: #cbcbcb !important;
}

.nav-item a:hover{
    color: #cbcbcb !important;
    
}



nav li a::before {
    content: url('../img/dots2.png');

    color: #dfdedd;
    margin-right: 10px;
    

   top: 3px;
   

   display: inline-block; 
   position: relative;
   
 
}

.newsB:first-child::before {


    content: '';
    display: none;
}

/*links in post*/
.onePost a{
    color: #b7b7b7;
    text-decoration: none;
}
.onePost a:hover{
    color: #cbcbcb;
    text-decoration: none;
}


/* News */
.container-fluid{
    max-width: 100vw;
}

.newsContainer span h4{
    background-image: url('../img/img_section_contact.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 108px;
    height: 30px;
    
    text-align: center;
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 24.84px;
    font-weight: 400;

    
    position: absolute;
    top:-30px;
    right: 1%;
    margin: 0%;

   

    

}

/*section test*/
.newsSection{
    /*height: 100%;*/
    position: relative;


    height:calc(100vh - 35vh); /* Full height of the viewport */
    display: flex;
    flex-direction: column;

   
}


.newsContainer .row{
    background-color: #ffffff !important;
    margin-bottom: 20px ;
   /* padding-right: 30px !important;*/


}


.newsContainer{
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 18.63px;
    color: #b7b7b7;

   /* background-color: #ffffff;*/
    opacity: 0.77;

    position: relative;

   
    margin-top: 3.9vh;
   

   
}

.newsContainer h5{
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #bbbbbb;
    font-weight: 600;
    text-align: right;
    font-size: 14.49px;

    
}

.newsContainer h3{
    font-size: 20.7px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-decoration: underline;

}

.dateContainer{
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    margin: 0;
    

    /*test*/
    min-width: 60px;

    /*test */
 

    margin-right: 5px;
  
}

.date{
    padding-top: 17px;
    text-align: right;
   
   
}

.month, .year{
    white-space: nowrap;
    margin: 1px;
}

.year{
    display: block;

}


.onePost p {
    margin-bottom: 15px;
    margin-top: 15px;


    
}

.onePost h3{
    margin-top: 5px;
}

.IndividualPostRow p{
    margin-bottom: 15px; /*not sure if needed, this is just for the google api postaukset*/

    
}

.fetchingNews{
    color: #cbcbcb;
    
}

.space{
     
     white-space: pre-line;
   
}


/*Tree*/

.tree {

    
    width: 100%;
 

    /*maybe min-height: 180px;*/
    
    min-height: 180px;
    flex: 1;
    

 

      
}

.treeIn{
    background-image:url('../img/img_footer_tree.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;

    height: 100%;
   

}

#spinner{
   
margin-bottom: -15px;
display: none;
}


/**********Privacy*********/

    /*in form*/
    .privacyContainer{
        max-width: calc(100% - 7%);
        margin-top: 10px;
       
        display: flex;
        justify-content: flex-end;
        align-items: center;
       
        
    } 
    .privacyContainer a{
        color: #999898;
    }


    .privacyMessage{
        font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 18.63px;
    color: #b7b7b7;
    width: 75%;

    background-color: #ffffff;
    opacity: .77;
    padding: 5%;
    }

    .privacyMessage a{

    color: #999898;
    }


    /**********misc**********/
.dev{
        position: absolute ;
        bottom: 4px;
        right: 18%;
        z-index: 10;
        /*background-image:url('../img/credits_nobg.png');
                background-size: contain;
        background-repeat: no-repeat;
        */

        width: 150px;
        height: 30px;
        

}


.screenMessage{
    z-index: 1000;
    position: relative;
    top: -40px;

    color: #b7b7b7;
    font-size:12px;

    background-color: #f0eeee;
    height: 43px;
    padding: 3px;
    padding-bottom: 4px;
    
    text-align: center;
    display: none;
}


@media screen and (max-width: 359px){
    .screenMessage{
        display: block;
    }

    .fetchingNews {
        

    }


}




/*dev special*/
@media screen and (min-width: 320px) and (max-width: 1499px){ /*1100px*/


    .dev{
        left: 3%;

    }

}




/*flag special*/
@media screen and (min-width: 320px) and (max-width: 1100px){ /*1100px*/

    .flag{
        position: relative;
        
       /* top: 12vw!important;*/
       top: 12vw !important;
        z-index: 10;
        width: 140px; 
        left: 12%;
        
    }

.langText{
   /* top: -3px;
    left: -30px;
    top: -1.5vw;
    
    position: absolute;
    font-size: 13px;*/
    opacity: 0;
}

    .dev a img{
        height: 25px !important;
        
    }


}




/*Media queries */
@media screen and (min-width: 320px) and (max-width: 420px){
    .nav-item a{
        font-size: 18px !important;


    }
    body, html{
        background-image: none !important;
        background-color: white;
    }

}


/*was before max-width: 562px*/

@media screen and (min-width: 320px) and (max-width: 626px) {
   /*
    .flag{
        width: 45px !important; 
        top: 4% !important;
        left: 13%;
        position: absolute;
    }*/


    
    .nav-item{

        margin: auto;
 
    }
    .navbar-nav{

 
      /*  width: 100%;*/

      
    }

    nav li a:before{
       display: none;
       
    }

    .nav-item a{
        

        font-size: 1.3em;
        padding: -15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    

    .newsContainer h5{

        text-align: left;

    }
    .dateContainer{
        width: 30px;
        align-items: flex-start;
       
    }

    .newsContainer{
     
        padding: 0px !important;
        

    }

    .onePost{
      
        width: 100% !important;
        font-size: smaller;
        line-height: 1.6;
        
        margin-left: 5%;
      
    }



    body, html{
        background-image: none !important;
        background-color: white !important;
    }

    .firstCol p{
        font-size: 16px !important;
        
        
    }

    .form-label{
        font-size: 16px !important;
    }
}


/*643*/
@media  screen and (max-width: 627px) {
    nav li a:before{

        display: none;

    margin-left: 0px !important;
    margin-right: 0px !important;


     }

     .nav-item a{
        margin: 15px;

     }

     .navbar-nav{

        width: 100%;
    }


    .newsContainer .row{

        padding-right: 35px !important;
       
        
        }

}

/*BS breakpoint under 767px*/
@media screen and (max-width:  645px){
    .dropdown{

        margin-left: -15px !important;
        margin-top: -7px;
    }

    .dropdown img{
        width: 45px !important;
        border: 2px solid #b2b2b2;
    }


}

@media screen and (max-width: 688px) {
    .dropdown{

        margin-left: -15px !important;
        margin-top: -7px;
    }

    .dropdown-menu{
        margin-left: -px !important;
    }


}

/*test*/
@media screen and (min-width: 765px) and (max-width: 992px){
    .newsContainer .row{

    padding-right: 43px !important;
   
    
    }
  /*  .flag{
        position: relative !important;
        left: 12%;

    }
        .flag p{
       display: none;
    }*/
}

/*BS breakpoint under*/
@media  screen and (max-width: 1199px) {

    .navbar-nav {

        opacity: 1;
    }


    .dropdown{
        margin-left: -5px;
    }

    .newsContainer{

        opacity: 1 !important;
    }

    .bioContainer{

        opacity: 1 !important;
    }
    .contactContainer{

        opacity: 1 !important;
    }


    .vineUp{
     /*   width: 300px;
        height: 405px;

        width: 50%;
        height: 50%;
        background-size: contain;*/
    }    
    /*width: 392px;
    height: 497px;
    
*/
    .vineDown{
     /*   width: 50%;
        height: 50%;
        background-size: contain;
 
     
     background-position: right bottom; */
 
    }


}







/*BIO*/
.bioSection{
   
    height:calc(100vh - 35vh); /* Full height of the viewport */
    display: flex;
    flex-direction: column;

}


.bioContainer{
    margin-top: 3.9vh; 
    background-color: #ffffff;
    opacity: .7;
    min-height: 35vh;


    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #a19e9f;

    font-size: 14.49px;

    line-height: 1.5;

    position: relative;

    
    
}

.bioContainer span h4{
    font-size: 24.84px;
    font-weight: 400;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #ffffff;
    text-align: center;
    width: 122px;
    height: 30px;
    padding: 0%;


    background-image: url("../img/img_section_contact.png");
    background-size: cover;
    background-repeat: no-repeat;

    top: -30px;
    right: 0%;
    z-index: 1;
    position: absolute;
    margin: 0%;
}

.firstCol p{
    margin-left: 25px;
    margin-top: 18px;
    font-size: 18.63px;
}

.secondCol img{
    margin-top: 18px;
}

.thirdColText p {


   
   /* margin-top: 15vh;*/
   margin-top: 18px;

}

.Credits{
    font-size: 18.63px;
    text-align: left;
}







/*CONTACT*/

.contactSection{
    color: #b7b7b7;
    height: calc(100vh - 35vh);
    display: flex;
    flex-direction: column;

}


.contactContainer{
    margin-top: 3.9vh;

    color: #b7b7b7;
    background-color: #ffffff;
    opacity: .77;

    min-height: 650px;
    padding-bottom: 25px;
   
    position: relative;

}

.contactContainer span h4{
    background-image: url('../img/img_section_contact.png');
    background-repeat: no-repeat;
    background-size: cover;
    width: 108px;
    height: 30px;
    
    text-align: center;
    color: #ffffff;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 24.84px;
    font-weight: 400;

    
    position: absolute;
    top:-30px;
    right: 1%;
    margin: 0%;
}


.contactContainer .onePost{ /*was just post*/
    font-size: 18.63px;
    line-height: 1.3;
    color: #b7b7b7;
   /* padding-top: 35px;
   /* margin-left: 70px;
    margin-right: 70px; 
    margin-bottom: 35px; */

    font-family: Georgia, 'Times New Roman', Times, serif;
}



.form-label{
    color: #c1c1c1;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-size: 17.63px;
   
   
    white-space: nowrap;

    display: flex;
    justify-content: right; 
    flex-direction: row;
    
    padding-top: 10px;
    margin-left: 8%;
   height: auto;

  
}
.form-control {


    height: 40px;
    
    margin-left: 9px;
    margin-right: 8%;
    margin-bottom: 9px;
    
  
    font-size: 16.56px;
    color: #929090 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    
    
    border-radius: 3px;
    border: 1px solid #b7b7b7;
    /*background-color: pink;*/
}



#question{
    resize: vertical;
    min-height: 200px ;
    max-height: 700px; 
}

form button {
   /* 
    display: block;
    margin-top: 17.5px;
    margin-right: 2.44%;
    margin-bottom: 17.5px;
    margin-left: auto;

    */
    height: 35px;
    width: 110px;
    background-image: url("../img/img_send.png");
    background-repeat: no-repeat;
    background-size: contain;

    margin-top: 25px;
}

form button:hover {
    background-image: url("../img/img_send_hower.png");
}
form button:focus {
    outline: none;
    /*outline: 0; try*/
    box-shadow: none;
}


#charCount{
    max-width: calc(100% - 7%);
    text-align: end;

}



@media screen and (max-width: 575px) {
    .form-label{
        justify-content: left;

        margin-left: 0px;
    }

    .form-control{
 
        max-width: 95% !important;
        
    }


}


/*in case dark mode menee päälle jollain sivulla*/

@media (prefers-color-scheme: dark) and (min-width: 320px) and (max-width: 626px) {
  body, html {
    /*background-image: url("../img/img_BG3.png") !important;*/
    background-color: white !important;
  }
}
/*
@media (prefers-color-scheme: dark){
  body, html {
    background-image: url("../img/img_BG3.png") !important;
    background-color: white !important;
  }
}*/