* {
    margin:0 ;
    padding: 0;
}

body {
    font-family: 'Roboto Condensed', Courier, monospace;
    background-color: #cd62b5;
    width: 100%;
    }
/*
.nav-wrapper {
    display: flex;
    justify-content: space-between;

}

.left , .right{
    font-weight: 20;
    font-size: 20px;
    padding-left: 12px;
    padding-right: 12px;
} */
.intro-text {
    font-size: 1.2em;
    font-weight: 900;
    color:#000000;
    /* letter-spacing: 1px; */
}

.block-wrapper {
    height: 60vh;
    max-width: 100%;
    /* border: 2px solid black; */
    position: relative;

}
.main-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: 5px -5px   #c444a6 ,4px -4px   #c444a6 , 3px -3px  #c444a6 , 2px -2px #c444a6 ;
    -moz-box-shadow: 5px -5px   #c444a6 ,4px -4px   #c444a6 , 3px -3px  #c444a6 , 2px -2px #c444a6;
    box-shadow: 5px -5px   #c444a6 ,4px -4px   #c444a6 , 3px -3px  #c444a6 , 2px -2px #c444a6;
    height: 44vh;
    width: 55vw;
    background-color:#c852ad;
    transition: all .5s ease-in-out;
    cursor: pointer;

}

.main-block-press {
    box-shadow: none;
    top: 49%;
    left: 51%;
    transform: translate(-50% , -50%);
    background-color:  #cd62b5;
    cursor: pointer;

}

.small-block-wrapper {
    width: 100%;
    height: 10vh;
    position: relative;
    /* border: 2px solid green ; */
}

.small-block{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 5vh;
    width: 130px;
    top: 15%;
    left: 50%;
     /* border:2px dashed red;   */
    transform: translate(-50% , -50%);
    transition: all .5s ease-in-out;
    pointer-events: none;
}

.info {
    color: transparent;
    font-size: 1em;
    transition: all .5s ease-in-out;
    font-weight: 800;
    letter-spacing: 0.6px;

}

.small-block-out {

    top: 16%;
    left: 49%;
    background-color: #59CA73;
    -webkit-box-shadow: 5px -5px  #4fb367 ,4px -4px   #4fb367 , 3px -3px  #4fb367 , 2px -2px  #4fb367  , 1px -1px  #4fb367;
    -moz-box-shadow: 5px -5px  #4fb367 ,4px -4px  #4fb367 , 3px -3px  #4fb367 , 2px -2px   #4fb367 , 1px -1px  #4fb367;
    box-shadow: 5px -5px  #4fb367 ,4px -4px  #4fb367 , 3px -3px  #4fb367 , 2px -2px  #4fb367 , 1px -1px  #4fb367;
    position: relative;
    pointer-events: all;
    cursor: pointer;
    /* border: violet solid 2px; */
}

.small-block-out>.info {
    color: black;
}

/* .small-block-out>.info {
    color:rgb(0, 0, 0);
    
} */
.info-out {
    color:rgb(255, 255, 255);
    
}