.underline:hover{
    text-decoration: underline;
}

.big:hover {
    transform: scale(1.03);
    transition: transform 0.8s;
}

.opac{
    opacity: 0.5;
}

.opac2{
    opacity: 0.7;
}

.block{
    animation: appear 2s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
}

.block2{
    animation: appear 2s linear;
    animation-timeline: view();
    animation-range: entry 0% cover 10%;
}

@keyframes appear{
    from{
        opacity: 0;
        /* clip-path: inset(100% 100% 0 0); */
        scale: 0.5;
        /* transform: translateX(-100px); */
    }
    to{
        opacity: 1;
        /* clip-path: inset(0 0 0 0); */
        scale: 1;
        /* transform: translateX(0px); */
    }
}

@media screen and (min-width : 600px) {
    .photo{
        width: 200px;
        height: 200px;
    }
    .text{
        font-size: small;
    }
}

@media screen and (max-width : 600px) {
    .short {
        font-size: 20px;
    }
    .shorter {
        font-size: 28px;
    }
    .photo1{
        width: 150px;
        height: 150px;
    }
    .text1{
        font-size: x-small;
    }
  
  }