index.css

@font-face{
    font-family:regular;
    src:url(Rubik/Rubik-VariableFont_wght.ttf);
}

@font-face{
    font-family:Bold;
    src:url(Rubik/static/Rubik-Bold.ttf);
}



body, html{
    font-family:regular;
    height: 100%; width: 100%; margin: 0;
    background-image: url(images/pattern-bg.png);
    
}

h1{
    width:max-content;
    margin:auto;
    margin-top:5%;
    margin-bottom:3%;
    color:white;
    font-size:22px;
}

.main-content{
    height:100%;
    position:relative;
    width:100%;
}

.search{
    width:350px;
    height:50px;
    margin:auto;
}

.search-bar{
    width:80%;
    height:50px;
    float:left;
    padding:0;
    margin:0;
    padding-left:20px;
    border:none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    font-family:regular;
    font-size:18px;
    cursor:pointer;
}

.search-arrow{
    width:13%;
    background-color:black;
    height:50px;
    float:left;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.search-arrow:hover{
    background-color:hsl(0, 0%, 17%);
    cursor:pointer;
}

.search-arrow img{
    width:30%;
    margin:35% 35%;
    
}

.map{
    position:absolute;
    top:30%;
    bottom:0;
    right:0;
    left:0;
}

.position-icon{
    position:absolute;
    left:50%;
    right:50%;
    bottom:50%;
    z-index:1000;
}

.options{
    display:flex;
    justify-content: space-evenly;
    background-color:white;
    position:absolute;
    height:200px;
    margin-top:5%;
    left:10%;
    right:10%;
    z-index:10000;
    display:flex;
    border-radius:15px;
    background-color:white;
}

.options h3{
    font-size:16px;
    color:hsl(0, 0%, 59%);
    font-weight:700;
}

.displayer{
    padding:1rem;
    width:24%;
    height:80%;
    position:relative;
}

.displayer div{
    font-size:22px;
    font-weight:700;
}

.ip::after, .location::after, .time-zone::after{
    position:absolute;
    content:'';
    top:20%;
    bottom:20%;
    right:0.5rem;
    width:1px;
    background-color:hsl(0, 0%, 82%);
}


#mapid{
    height:100%;
}

@media screen and (max-width : 980px){
    .options{
        height:500px;
        flex-direction: column;
        left:3%;
        right:3%;
        text-align: center;
    }

    .ip::after, .location::after, .time-zone::after{
        display:none;
    }

    .displayer{
        height:125px;
        width:100%;
        padding:0;
        text-align: center;
    }
    h3{
        text-align: center;
        
    }
    .displayer div{
        text-align: center;

    }

    .search{
        width:300px;
        height:50px;
        margin:auto;
    }
}