@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);

@font-face {
    font-family: test;
    src: url(../fonts/din-light/DIN2014-Light/DIN2014-Light.ttf);
}

body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: 0;
}

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

.home-image {
        width: 100vw;
        height: 100vh;
        background: url(../photos/contact_1.jpg);
        /* background-size: 100% 100%; */
        background-size: cover;
        background-repeat:no-repeat;
        /* background-size:contain; */
        background-position:center;
    /* position: absolute; */
    /* padding-bottom: 5%; */
}

.contact-container {
        width: 50vw;
        min-width: 700px;
        height: 50vh;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 50px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        /* border: solid 2px yellow; */
}

.contact-image {
        /* height: 350px;
        width: 500px; */
        height: 400px;
        width: 300px;
        background: url(../photos/mydp.jpg) no-repeat;
        background-size: cover;
        object-fit: cover;
        z-index: 99;
        /* position: absolute;
        top: 50%;
        left: 75%;
        transform: translate(-50%,-50%); */
}

.info {
        /* height: 350px;
        width: 500px; */
        height: 200px;
        width: 300px;
        /* background: url(photos/mydp.jpg) no-repeat; */
        /* background-size: cover; */
        /* object-fit: cover; */
        z-index: 99;
        /* position: absolute;
        top: 50%;
        right: 5%;
        left: 50%;
        transform: translate(-50%,-50%); */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        /* border: solid 1px red; */
}
.line {
        color: #f5f5f5;
        font-family: poppins;
        font-size: 0.8rem;
        font-weight: 300;
}

.two {
        margin-top: 10px;
}

.three {
        margin-top: 6px;
}

.c {
        font-size: 0.6rem;
}

.grid {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    height: 100vh;
    width: 100vw;
}

.grid > * {
    background-color: transparent;
    /* border: solid 1px BLACK; */
    /* padding-bottom: 20%; */
    aspect-ratio: 1/1;
}




@media only screen and (max-width: 700px) {
        .contact-container {
                width: 50vw;
                min-width: 400px;
                height: 80vh;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column-reverse;
                align-items: center;
                justify-content: flex-start;
                /* gap: 50px; */
                position: absolute;
                top: 40%;
                left: 50%;
                transform: translate(-50%,-50%);
                padding-top: 160px;
                /* border: solid 2px pink; */
        }
        .info {
                height: 150px;
                width: 300px;
                z-index: 99;
                /* position: absolute;
                top: 50%;
                right: 5%;
                left: 50%;
                transform: translate(-50%,-50%); */
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-top: -50px;
                /* border: solid 1px red; */
        }
}