body{
    background-image: url("Images/UTAsite_achtergrond2_klein.jpg");
    
    /* background-repeat:space; */

    /* height = "100%"; */
}

:root{
    --videoSizeX: 400;
    --videoSizeY: 225;
}

/* Alle lettertypes */

button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 1.5rem; 
}

button:hover{
    color: #39b270;
}

font_main {
    color: darkgrey;
    font-size: 30px;
    text-align: center;
    box-sizing: 40px;
}

.titel{
    color: #39b270;
    font-size: clamp(80px,2vh,110px);text-align: center; padding:0;
    font-family: mijnFont;
    margin-top:3%;margin-bottom: 0;
}

.ondertitel{
    color: #39b270;
    font-size: 50px;text-align: right; padding:0;
    width: fit-content;
    height: fit-content;
    margin-right: 10%;
    font-family: mijnFont;
    margin-top:0;margin-bottom: 10px;
}

.font_bio {
    color: darkgrey;
    font-size: clamp(15px, 10vw, 25px);
    text-align: left;
    font-family:Helvetica;
        width: fit-content;
        padding-right: 3em;
        height: fit-content;                /* Set a fixed width for the bio box */
        overflow: hidden;      
}   

.font_blog {
    color: darkgrey;
    font-size: clamp(10px, 8vw,20px);

    /* box-sizing: 40px; */
    font-family:Helvetica;
        height: fit-content;                /* Set a fixed width for the bio box */
        margin-top: 0 auto;                /* This will center it horizontally */
        padding:0;                 /* Add some padding inside the box */
        box-sizing: border-box;        /* Include padding and borders in width */        
        text-align: center;   
        display: block;  

}

.font_Vrienden {
    color: darkgrey;
    font-size: clamp(12px, 2vw,23px);
    text-align: left;
    border-right: 0;
    box-sizing:border-box;
    font-family:Helvetica;
    width: 30%;  
        height: fit-content; 
}

figcaption{
    font-size: clamp(10px, 4vw,15px);
    max-width: 100%;
    color: darkgrey;
    text-align: left;
    border-right: 0;
    box-sizing:border-box;
    font-family:Helvetica;
    min-width: 25%;
        height: fit-content;               
        margin-top: 4px;
        display: flexbox;  

}

   


.vriendbox_Container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0%;
}

.vriendbox {
    width: 90vw;
    border-width: 0;
    border: 2px solid #ccc;
    padding: 20px;
    padding-top: 15px; padding-bottom: 15px;
    margin:40px;
    margin-bottom: 10px;
   
}


.home_Container {
    /* float: left; */

display: flex;
padding-left: 1em;
padding-right: 1em;
flex-wrap: wrap
}

.artistbio {
    flex: 1.5;
    color: darkgrey;

    /* min-width: 300px; */
    font-size: clamp(20px, 1.7vw, 40px);
    font-family: Helvetica;

  /* margin-left: 100px; */


}

.home_Img{
    flex:2;
    min-width: 600px;
  padding-right: 3em;
}

.home_Img img{
    object-fit: contain;

}

.box_fit {
    width: 40vw;
    border-width: 0;
    border: 2px solid #ccc;
    padding: 20px;
    padding-top: 15px; padding-bottom: 0;
    margin:0 auto;
    margin-bottom: 30px;
}

.vriendVideo{
    width: clamp(200px, 30%, 800px);
    height: auto;

    /* aspect-ratio: 16/9; */
    margin-right:auto ;
    margin-left: 0 auto;
    padding-left: 3%;
    overflow: auto;
    margin-bottom: 10px;
    overflow-x: hidden;
    
}

.vriendFoto {
    width: clamp(150px, 300px, 400px);
    height: auto;
    max-width: 100%;
    overflow: hidden;
    padding: 10px;
    margin-bottom: 10px;
    object-fit: contain;
      align-self: center;

}

.vriendFoto img {
    width: 100%;                         /* Make sure the image fills the width of its container */
    height: auto;    
    object-fit: contain;     
    border-radius: 2px;
    margin-top: 10px;          
}

.vriend_Foto{
    max-height: fit-content;
}

.vriend_Foto .flexFoto {
display: flex;
flex-flow: column wrap;
}

.vriend_Foto .flexFoto img {
    flex:1 ;
    height: 900px;
}

.vriendVideo iframe {
    width: clamp(30vw, 40vw, 60vh);
    height: clamp(20vh, 30vh, 50vh);
    max-width: 100%; 
    border-radius: 12px;

}

.vriendVideo2 {
    width: clamp(30vw, 40vw, 60vh);
    height: clamp(20vh, 30vh, 50vh);
    max-width: 100%; 
    border-radius: 12px;  
}

.vriendVideo spotify {
    max-width: 100%; 
    height:100%;
    border-radius: 12px;
}

@font-face {
    font-family: mijnfont;
    src: url("ayuthaya-regular.ttf");
}


/* einde lettertypes */

.footer{
    /* position:static; */
    bottom: 5vh;
    width: 100%;
    font-family: sans-serif;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    /* padding: 20px 0; */

    /* margin: auto 0; */
    
    
}

/* Links editen */
a{
color: #39b270 ;
font-style:normal;
text-decoration: none;


}

a:hover{
    color:#229555

}

.iconLink{
    display: flex;

    /* margin-left: auto; */

    /* margin: auto; */
    margin: 3vh auto; 
    flex-direction: row;
}

.iconLink img {
    width: 4vw;
    mix-blend-mode:soft-light;
    opacity: 0.8;

    /* aspect-ratio: 100/70; */

    /* padding: 0.3vw; */
    padding-right: 3vw;
    
}

.iconLink img:hover{
    mix-blend-mode:multiply;
}

.container{
    /* min-height: 80vh;     */
    display: flex;
    flex-direction: column;
    padding: 0;

    /* padding-bottom: 0px; */

    /* border-bottom: 0px; */

    /* padding-top: 0px; */

    /* margin-bottom: 0%; */
    justify-content: space-around;
   

}

.container_home{
    display: flex;
    flex-direction: column;
    padding: 40px;
    padding-top: 0;
    justify-content: space-around;
    
}

.container_hele {
    max-height: 85vh;
}

.flexCont {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1rem;
}

.flexPart {
flex: 1;
    display: flex;
    margin: 2rem;
flex-flow: row wrap;
justify-content:center;
align-items: center;
padding: 1rem;
min-width: min(300px, 40vw);
border: 2px solid #ccc;
    gap: 1rem;
}

.f_flexTekst {
    flex:1;
    text-align: left;
    font-family: Helvetica;
    color: darkgrey;
}

.f_flexTitel{
    font-size: clamp(20px,4vw,30px);
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: center;
}

.f_flexMain {
    font-size: clamp(15px, 3vw, 25px);
   
}  

.flexMedia {
    width: auto;
    min-width: min(300px, 60vw);
    align-items: center;
    flex: 1.5;    
} 

 .flexMedia iframe {
    aspect-ratio: 16/9;
    display: block;
        margin: 0 auto; 
    }