@media all and (orientation:portrait){ 

.storyitem{
    width: 60px;
    height: 60px;
    border-color: white;
    border-radius: 15px;
    border-style: solid;
    border-width: 1px;
}
.storyitemme{
    width: 60px;
    height: 60px;
    text-align: center;
    justify-content: center;
    border-color: #A385E1;
    border-radius: 30px;
    border-style: solid;
    border-width: 1px;
}

}

@media all and (orientation:landscape){ 
    .storyitem{
        width: 100px;
        height: 75px;
 
        font-size: 8px;
        text-align: center;
    }
    .storyitemme{
        width: 100px;
        height: 100px;
       display: flex;
       flex-direction: column;
        align-items:  center;
        font-size: 12px;
        border-style: solid;
  

    }
    .storyitemziek{
        width: 100px;
        height: 75px;
       display: flex;
       flex-direction: column;
        align-items:  center;
        justify-content: center;
        align-content: center;
        background-color: black;
        border-radius: 15px;
        border-style: solid;
        border-color: gray;
        border-width: 2;
  

    }
    .storyxitem{
        width: 14px;
        height: 12px;
        border-color: grey;
        background-color: 'blue';
        text-align: center;
        font-size: 8px;

    }
}
.storyrow{
    flex: 1;
    width: '100%';
    display: flex;
    flex-direction: row;
    text-align: center;
 
    justify-content: center;
   

}
.story2row{
 

    display: flex;
  
    align-self: center;
    flex-direction: row;
    text-align: center; 
    justify-content: center;
   

}
.storycolom{

    width: 16px;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
 
}
.pointer{
    width: 5px;
    background-color: transparent;
    height: 5px;
    margin: 5px;
    text-align: center;
    color: transparent;
}