/*mobile version*/

.page {
    display: flex;
    flex-direction: column;
    font-family: Arial;
}

.personalia {
    /* background-color: #45AA99; */
    /* background-image: url("images/background.jpg"); */
    background-image: url('../images/background5.jpg');
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5%;
    background-size: cover;
    background-repeat:  no-repeat;
    background-position: center;

}

.profile {
    background-color: #faf8f8;
    width: 100%;
    border-radius: 5%;
}

/* .person-logo {
    border: 4px solid black;
    border-radius: 50%;
    margin: 15px 0px 15px 0px;
    width: 20%;
    animation: glow 3s ease alternate;
}
*/
/* https://www.cssscript.com/circular-image-slider-css/ */
.slider  {
    --s: 280px; /* slider size */
    display: grid;
    width: 20%;
    aspect-ratio: 1;
    overflow: hidden;
    padding: calc(var(--s)/80);
    border-radius: 50%;
    position: relative;
    margin-top: 20px;
  }
  .slider::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: inherit;
    border-radius: inherit;
    background: repeating-conic-gradient(#7ad3da 0 30deg,#7ad3da 0 30deg);
    -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .slider > img {
    grid-area: 1/1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    transform-origin: 50% 120.7%;
  }
.slider::after,
.slider > img {
  animation: m 16s infinite cubic-bezier(.5,-0.2,.5,1.2);
}
.slider > img:nth-child(2) {animation-delay: -4s}
.slider > img:nth-child(3) {animation-delay: -8s}
.slider > img:nth-child(4) {animation-delay: -12s}
@keyframes m {
  0%,3%    {transform: rotate(0)}
  22%,27%  {transform: rotate(-90deg)}
  47%,52%  {transform: rotate(-180deg)}
  72%,77%  {transform: rotate(-270deg)}
  98%,100% {transform: rotate(-360deg)}
}
.profile-content {
    padding: 15px;
    font-size: 20px;
}

.profile-content__category-title {
    color: rgba(77, 189, 170, 0.96);
}

.profile-content__category--hidden-mobile {
    display: none;
}
.profile-content__element-header{
    display: flex;
    flex-direction: column;
    flex-grow: 2;
}

.profile-content__element {
    display: flex;
    flex-direction: column;
}
.profile-content__element_educationAndWork {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    column-gap: 20px;
}



.profile-content__element--hidden-mobile {
    display: flex;
    flex-direction: column;
    display: none;
}

.profile-content__title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 2px;
    margin-top: 20px;
}

.profile-content__period {
    display: none;
    margin-top: 20px; 
    margin-left: auto;
    min-width: 120px;
    
}

.profile-content__institute {
    margin-top: 0px;
    font-size: 14px;
    flex-grow: 3;
}
.profile-content__data{
    color: rgba(0, 0, 0, 0.96);
    margin-top: 0px;
    font-size: 14px;
    flex-grow: 1;
}
.listPersonlia{
    list-style-position: inside;
    list-style-type: square;
}


.profile-content__description{
    font-size: 18px;
    margin-bottom: 2px;
    margin-top: 6px;
}
.profile-content_personalia_extra_text{
    color: rgba(0, 0, 0, 0.96);
    margin-top: 0px;
    margin-left: 20px;
    font-size: 14px;

}
a:link {
    color: black;
  }
  

a:visited {
    color: black;
}

.images_logo {
    border: 1px solid black;
    border-radius: 50%;
    height: 10%;
    margin: 15px 0px 15px 0px;
    width: 10%;
}

a:hover {
    color: rgba(77, 189, 170, 0.96);
}
  
  /* selected link */
  a:active {
    color: #45AA99;
  }

  a:link {
    text-decoration: none;
  }
  
  a:visited {
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  a:active {
    text-decoration: underline;
  }
  .profile-content__links{
    font-size: 18px;
    margin-bottom: 2px;
    margin-top: 6px;
  }

@media only screen and (min-width: 800px) {

    .page {
        flex-direction: row;
    }

    .person-name{
        order: -1;
    }

    .profile-content__category--hidden-mobile{
        display: flex;
        flex-direction: column;
    }

    /*fix: anders als stipje zichtbaar*/
    .profile-content__category--hidden-mobile hr{
        width: 100%;
    }

    .profile-content__element--hidden-mobile {
        display: flex;
    }

    .profile-content__element-header{
        display: flex;
        justify-content: space-between;
    }

    .profile-content__period {
        font-size: 12px;
        color: #5c6166;
        display: flex;
        margin-left: auto;

    }

}


/*student uitwerking*/