@media(max-width: 768px) {
    
    *{
        /* outline: 1px solid green; */
    }
    
    h4
    {
        font-size: 10px;
        transform: translateY(2500%);
    }

    h6
    {
        display : none;
    }

    .triangle-goto-contact {
        top: 80%;
    }
    
    .label-goto-contact {
        top: 75.5%;
    }

    .triangle-goto-left {
        top: 80%;
    }

    .label-goto-contact {
        top: 75.5%;
    }
    
    .label-goto-join {
        top: 75.5%;
    }

    .label-goto-home-from-contact {
        top: 78%;
    }

    .centered-message {
        transform: translateY(50vh);
        font-size: 18px;
        font-weight: 600;
        height: 20vh;
    }

    .label-goto-welcome-right {
        top: 78%;
    }

    .label-goto-welcome {
        top : 93vh;
    }
    
    .triangle-goto-welcome {
        top : 83vh;
    }
    
    .triangle-goto-welcome:hover {
        top : 84vh;
        transition: 0.5s;
    }

    .card{
        top: 16px;
        height: 33%;
        width: 90vw;
        display: grid;
        gap: 4px;
        grid-template-columns: 40% 60%;
        grid-template-rows: 20% 60% 20%;
    }

    .card-container{
        height: 80vh;
        padding-top: 4px;
        padding-bottom: 64px;
        margin-top: 16px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .btn {
        grid-row-start: 3;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 2;
        margin: auto;
        padding: 0px;
        font-size: 20px;
        transform: translateY(-16px);
    }

    h3 {
        margin-top: 8px;
        font-size: 1em;
        grid-row-start: 1;
        grid-row-end: 1;
        grid-column-start: 2;
        grid-column-end: 2;
    }

    p {
        grid-row-start: 2;
        grid-row-end: 2;
        grid-column-start: 2;
        grid-column-end: 2;
        font-size: 0.8em;
        margin: 4px;
        padding: 4px;
    }

    .screenShot {
        width: 100%;
        height: 100%;
        grid-row-start: 1;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 1;
        margin: 0px;
        padding: 0px;
        border-radius: 0px;
    }

    .contact-container {
        width: 64px;
        height: 64px;
    }

    .triangle-goto-creations {
        bottom: 32px;
    }
    
    .triangle-goto-creations:hover {
        bottom: 24px;
    }

    .label-goto-creations {
        bottom: 96px;
    }
}