@font-face {
    font-family: "SegoeUI";
    src: url("assets/fonts/segoeui.ttf") format("truetype"), url("assets/fonts/segoeuib.ttf") format("truetype"),
        url("assets/fonts/seguibl.ttf") format("truetype"), url("assets/fonts/seguisb.ttf") format("truetype");
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    width: 30%;
    text-align: center;
    color: black;
    font-family: "SegoeUI";
}

.content .logo-img {
    text-align: center;
}

.content .logo-img img {
    height: 200px;
    width: 200px;
}

.content h1 {
    /*  
    following calc function changes the font-size dynamically as screen size changes
    calc([minimum font-size] + ([maximum font-size] - [minimum font-size]) * 
    ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); 
    */
    font-size: calc(24px + (33 - 24) * ((100vw - 300px) / (1400 - 300)));
    margin: 1.2rem;
}

.content p {
    /*  
    following calc function changes the font-size dynamically as screen size changes
    calc([minimum font-size] + ([maximum font-size] - [minimum font-size]) * 
    ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); 
    */
    font-size: calc(14px + (16 - 14) * ((100vw - 300px) / (1400 - 300)));
    margin: 0.5rem;
    line-height: calc(23px + (27 - 23) * ((100vw - 300px) / (1400 - 300)));
}

.content p a {
    color: rgb(241, 190, 113);
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .content {
        width: 80%;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .content {
        width: 60%;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .content {
        width: 48%;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .content {
        width: 40%;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .content {
        width: 34%;
    }
}