body{
    background-color: #593e70;
    font-family: 'DM Sans';

}

a{
    text-decoration:none;
    color: #204346;
}


#Left_text{
    position: absolute;

    left: 50px;
    width: 20%;

    top: 50%;
    transform: translateY(-50%);
}

@media screen and (max-width: 992px) {
    #Left_text{
        position: absolute;
    
        left: 50px;
        width: 80%;
    
        top: 80%;
        transform: translateY(-50%);
    }     
}

.rainbow{
    font-size: larger;
    background-image: repeating-linear-gradient(45deg, #610461, rgb(62, 0, 107));
    background-size: 80%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

#name::before {
    animation: animate 8s  infinite;
    content: "";
    
    
}
@keyframes animate {
    0% {
        content: "Princesītes !";
        opacity: 0;
    }

    10% {
        content: "Princesītes !";
        opacity: 1;
    }

    24% {
        content:  "Princesītes !";
        opacity: 0;
    }
    25% {
        content:  "Ash !";
        opacity: 0;
    }

    33% {
        content: "Ash !";
        opacity: 1;
    }

    49%{
        content: "Ash !";
        opacity: 0;
    }
    50%{
        content: "Patrīcijas !";
        opacity: 0;
    }

    66% {
        content: "Patrīcijas !";
        opacity: 1;
    }
    78% {
        opacity: 0;
    }
    
}

.button{
    color: #dddddd;
    background-color: #204346;
    border: none;
    font-size: larger;
    padding: 5px;
}

#theImage {
    overflow: hidden; 
    position:absolute; 
    right: 0;
    margin-right: 2%;
    display: flex;

    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    
    justify-content: center;
    align-items: center;

    object-fit: contain;
    max-width: 70%;
    max-height: 80%;
   

    border: 5px solid #ffacac;
}
@media screen and (max-width: 992px) {
    #theImage {
        overflow: hidden; 
        position:absolute; 
        display: flex;
        left: 15%;
    
        top: 30%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);

        -ms-transform: translateZ(-50%);
        transform: translateZ(-50%);
        
        justify-content: center;
        align-items: center;
    
        object-fit: contain;
        max-width: 70%;
        max-height: 80%;
       
    
        border: 5px solid #ffacac;
    }

}