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

body {
    display: flex;
    justify-content: center;
    background-image: url("wallpaperBg.png");
    max-height: 100vh;
}

img {
    width: 200px;
}

a:focus-visible {
    outline-offset: 0px;
}

div {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    /* border: 2px solid red; */
    padding: 5px;
}

.topbg {
    position: relative;
    height: 35vh;
}

@media (min-height: 20rem) {
    .circle {
        top: -21% !important
    }

    .logo {
        top: -71% !important;
    }
}

/* Minimum height */
@media (min-height: 35rem) {
    .circle {
        top: -41% !important
    }

    .logo {
        top: -91% !important;
    }
}

@media (min-height: 50rem) {
    .circle {
        top: -44% !important
    }

    .logo {
        top: -94% !important;
    }
}

@media screen and (min-width: 900px) {
    .circle {
        top: -24% !important
    }

    .logo {
        top: -74% !important;
    }
}

.circle {
    position: relative;
    top: -44%;
}

.logo {
    object-fit: contain;
    position: relative;
    z-index: 2;
    top: -94%;
    width: 35%;
    height: 85px;
}

.subSection2 {
    position: relative;
    top: -24%;
}

    .subSection2 div {
        margin: 3px 0;
    }

.squareBtn {
    flex-direction: row;
}

    .squareBtn img {
        width: 100px;
        ;
    }

.subSection3 {
    position: relative;
    top: -20%;
}