body {
    margin: 0;

    font-family: Arial;
    background-image: url('tausta-indexfi-mobile-2.jpg');
    background-size: cover;

    background-repeat: no-repeat;
    /* Make the background image cover the entire area */
    background-position: top center;
    /* Center the background image */
}


/*CONTENTFI.HTML_STARTS*/
.notice-icons-paivitys {
    padding-left: 7px;
    max-width: 70px;
    max-height: 30px;
}

.notice-icons-uusi {
    padding-left: 5px;
    max-width: 50px;
    max-height: 26px;
}

h1 {
    text-align: center;
    color: white;
    font-family: "Yrsa", serif;
    font-weight: 600;
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-size: 3em;
}

.content-logo .material-symbols-outlined {
    font-size: 0.8em;
    font-weight: 800;
    rotate: 80deg;

}

.hr-style {
    color: rgb(51, 95, 160);
}

hr {
    border-top: 1px solid rgb(51, 95, 160);

}

h2 {
    margin-block-start: 0.9em;
    margin-block-end: 0.4em;

    color: rgb(15, 92, 159);
    font-family: "Yrsa", serif;
}

.title-h2 {

    margin-block-start: 0.9em;
    margin-block-end: 0.2em;

    font-size: 2em;
}

.after-h2 {
    margin-top: 0;
    font-size: 1em;

}

.container {
    margin-bottom: 15vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container-content {
    width: 100%;
    max-width: 68%;
    background-color: white;
    border-radius: 30px;
    padding: 25px, 51px;
    padding-left: 5%;
    padding-right: 5%;
    box-shadow: 0 5px 10px rgba(14, 47, 88, 0.348);
    margin-right: 5%;
    margin-left: 5%;
    padding-bottom: 3vh;
}

a {
    color: rgb(22, 96, 208);
    font-family: "Yrsa", serif;
    font-size: 1.25em;
    font-weight: 600;
    text-decoration-thickness: 1px;
}

.container a:visited {

    color: rgb(34, 47, 114);
}

footer a:visited {
    color: rgb(15, 92, 159) !important;
}

.container-text-box {

    margin-bottom: 3vh;
}

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

    h1{
        text-shadow: 2px 2px 10px rgba(58, 81, 141, 0.5);
       }

    body {
        background-image: url('tausta-indexfi-mobile-2.jpg');
        background-size: cover;
    }

    .notice-icons-paivitys {
        padding-left: 2px;

    }

    .notice-icons-uusi {
        padding-left: 2px;

    }

    .container {
        padding-top: 10vh;
        padding-bottom: 10vh;
    }

    .container-content {
        padding-left: 10%;
        padding-right: 10%;
    }

    .container-text-box {

        margin-bottom: 4vh;
    }
}

/*CONTENTFI.HTML ENDS*/



/*********CONTENT_ARC_FI.HTML STARTS*********/




.arc-text-box-small {
    margin-left: 9vw;
}

.arc-text-box {
    margin-left: 9vw;
}

.container-arc-texts {
    display: flex;

    flex-direction: column;
    padding-bottom: 3vh;


}

.container-content-arc h2 {
    padding-bottom: 1vh;
}



.table-box-arc {
    display: flex;

    align-items: center;
    justify-content: center;
    flex-direction: column;
}

table {
    width: 50vw;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {

    text-align: left;
}

tr:hover {
    background-color: #f1f1f1;
}


.container-content-arc h2 {

    margin-bottom: 1vh;
}



.h1-ARC {

    padding: 2vh;
}

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


    table {
        width: 100%;
    }

    .arc-text-box-small .title-h2{
        text-align: center;
    }

    .arc-text-box .title-h2 .arc-text-box-small {
        text-align: center;
    }

    .arc-text-box .arc-text-box-small {
        width: 100%;
    }

    .arc-text-box-small {

        text-align: center;
    }


    .arc-text-box-small {
        margin-left: 0;
    }

    .arc-text-box {
        margin-left: 0;
    }

    .arc-text-box .title-h2{
        text-align: center;
    }
}

/********CONTENT_ARC_FI.HTML ENDS*********/



/*CONTENT_CSS_FI.HTML STARTS*/

@media screen and (max-width:799px) {
    .container-css-text .title-h2 {
        text-align: center;
    }

    .container-css-text h2 {
        text-align: center;
    }

    .img-license {
        display: flex;
        justify-content: center;
        margin-top: 2vh;
        margin-bottom: 3vh;
    }
}

/*CONTENT_CSS_FI.HTML ENDS*/

/******CONTENT_HO_FI.HTML STARTS*******/



.table-box-ho {
    overflow-x: auto;
    border-collapse: collapse;
    margin-top: 20px;
    }

    .table-box-ho {
        display: flex;
    
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    

.table-box-ho th,
.table-box-ho td {
    border: 1px solid #ddd;
    padding: 8px;
   }

@media screen and (max-width:799px) {
    .table-box-ho {
        display: block;
    
        align-items: none;
        justify-content: none;
        flex-direction: column;
    }
    

    .container-ho-text .title-h2 {
        text-align: center;
    }

    .container-ho-text h2 {
        text-align: center;
    }

    .table-box-ho table {
       width: 100%;
    }

}


/*****CONTENT_HO_FI.HTML ENDS*******/

/*CONTENT_MIP_FI.HTML STARTS*/
@media screen and (max-width:799px) {
    .container-mip-text .title-h2 {
        text-align: center;
    }

    .container-mip-text h2 {
        text-align: center;
    }

}
/*CONTENT_MIP_FI.HTML ENDS*/

/*****CONTENT_MPK_FI.HTML STARTS*******/

.container-mpk-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 10vh;
}

.mpk-text, .mpk-text-image {
    
    max-width: 45%;

}

.mpk-text-image {
    align-content: center;
}

.mpk-image img {
    width: 100%;
    height: auto;
}



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


    .mpk-text, .mpk-text-image {
        max-width: 100%;
    }


    .container-mpk-text .title-h2 {
        text-align: center;
    }

    .container-mpk-box .title-h2 {
        text-align: center;
    }

    .container-mpk-text h2 {
        text-align: center;
    }

    .mpk-text-image .title-h2 {
        text-align: center;
    }

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

    .container-mpk-box {
        flex-direction: column;
        gap: 3vh;
    }
    .mpk-text, .mpk-text-image {
        max-width: 100%;
    }
}


/*****CONTENT_MPK_FI.HTML ENDS*******/

/*CONTENT_SW_FI.HTML STARTS*/

@media screen and (max-width:799px) {
    .container-sw-text .title-h2 {
        text-align: center;
    }

    .container-sw-text h2 {
        text-align: center;
    }

}

/*CONTENT_SW_FI.HTML ENDS*/

/*****CONTENT_TF_FI.HTML STARTS*******/

@media screen and (max-width:799px) {
    .container-tf-text .title-h2 {
        text-align: center;
    }

    .container-tf-text h2 {
        text-align: center;
    }

}


/*****CONTENT_TF_FI.HTML ENDS*******/

/*CONTENT_WB_FI.HTML STARTS*/

.spaced-links a {
    margin-right: 20px; 
}

@media screen and (max-width:799px) {
    .container-wb-text .title-h2 {
        text-align: center;
    }

    .container-wb-text h2 {
        text-align: center;
    }

    .spaced-links{
        text-align: center;
    }

}

/*CONTENT_WB_FI.HTML ENDS*/

/***CONTENT_WB_SV.HTML STARTS*/

@media screen and (max-width:799px) {
    .container-wb-sv-text .title-h2 {
        text-align: center;
    }

    .container-wb-sv-text h2 {
        text-align: center;
    }

    .spaced-links{
        text-align: center;
    }

}


/****CONTENT_WB_SV.HTML ENDS*/


/*****INDEXADFI.HTML STARTS*******/

.container-indexadfi-text {
    padding-top: 2vh;
}

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

    .indexadfi-h1 {
        font-size: 0.6em;
    }

    .container-indexadfi-text .title-h2 {
        text-align: center;
    }

    .container-indexadfi-text h2 {
        text-align: center;
    }

    .spaced-links{
        text-align: center;
    }

}

/*****INDEXADFI.HTML ENDS*******/