styles.css

@font-face{
    font-family: Gobold;
    src: url(./assets/fonts/Gobold_Regular.otf);
}
@font-face{
    font-family: ProductSans;
    src : url(./assets/fonts/Product_Sans.ttf);
}
html, body {
    height :100%;
    width : 100%;
}

.website-logo {
    width : 1.8rem;
    height : 1.8rem;
}
div i {
    font-size: 1.3rem;
} 
.profile-link{
    color : #0d0d0d
}
.profile-link i {
    font-size: 1rem;
    padding-right: 0.3rem;
}
.profile-link:hover{
    color : #0d0d0d;
    text-decoration: none;
}
.navbar {
    padding : 2% 10% 1% 10%;
    margin-bottom :1%;
}
.rest-page {
    height :90vh;
}
.navbar-padding {
    padding : 0 10%;
} 
.navbar-margin {
    margin : 0 10%;
}
.mx-auto {
    padding-left : 20%;
}
@media screen and (max-width : 768px) {
    .mx-auto {
        padding-left : 0;
    }
}
.bg-img {
    width:100%;
    height :auto;
    z-index: -1;
}
#grass-bg {
    background-image: url("./assets/grasspic.jpg");
    background-size: cover;
    height : 60vh;
    display :flex;
    justify-content: center;
    align-items: center;
    word-wrap: break-word;
}
#grass-bg h1 {
    position : absolute;
    font-family: Gobold;
    z-index : 2;
    color : white;
    font-size: 4rem;
    letter-spacing: 0.3rem;
}
@media screen and (max-width: 520px) {
    #grass-bg h1 {
        font-size : 3rem;
    }
}
@media screen and (max-width: 420px) {
    #grass-bg h1 {
        font-size : 2rem;
    }
}
#journey-text-field {
    background-color: #0d0d0d;
    color : white;
    padding : 3% 5% 1% 5%;
}
#journey-text-field h2 {
    font-family: Gobold;
    font-size : 2rem;
    letter-spacing: 0.3rem;
}
#journey-text-field p {
    font-family: ProductSans;
    font-weight: lighter;
    font-size: 1rem;
    margin-bottom: 4%;
}
@media screen and (max-width: 420px) {
    #journey-text-field h2 {
        font-size:1.5rem;
    }
    #journey-text-field p {
        font-size: 0.95rem;
    }
}
#contact-box {
    display: inline-block;
    margin-top : 3%;
    padding: 3% 4%;
    box-shadow: 0 0 1.25rem 0 rgba(0, 0, 0, 0.16);
}

#contact-box h2 {
 font-family: Gobold;
 font-size : 1.5rem;
 letter-spacing : 0.3rem;
 text-align: center;
 margin-bottom: 1.5rem;
}

#contact-box h3 {
    font-family : ProductSans;
    font-size : 1.38rem;
}

#contact-box p {
    font-family: ProductSans;
    font-size : 0.9rem;
    margin-top:-0.3rem;
}
.connect-logo-left {
    margin: 0 4% 0 0;
}
.connect-logo-right {
    margin: 0 0 0 4%;
}
.connect-logo-center {
    margin: 0 4% 0 4%;
}
.team-div {
    overflow:auto;
}
.team-div h2 {
    font-family : ProductSans;
    font-size: 1.2rem;
    text-align: center;
}
.person-card-row {
    padding : 5vh 5rem;
}
.person-card-bootstrap-row {
    margin: 5vh 5vw;
}
.person-card-bootstrap {
    width : 224px;
    box-shadow: 0 0 1.3rem 0 rgba(0, 0, 0, 0.16);
}
.person-card-bootstrap img {
    width :100%;
    height :11rem;
}
.person-card-bootstrap h5 {
    font-family: Gobold;
    text-align : center;
    font-size : 1.3rem;
    letter-spacing: 0.3rem;
    margin-top: 1rem;
    margin-left : 0;
}
.person-card-bootstrap h6 {
    font-family: ProductSans;
    text-align : center;
    font-size : 0.86rem;
    margin-top : -0.5rem;
    margin-left : 0;
}
.person-card {
    width : 30px;
    height : auto;
    box-shadow: 0 0 1.3rem 0 rgba(0, 0, 0, 0.16);
    padding : 0;
}
.person-card img {
    width : 100%;
    height : 11rem;
}
.person-card h3 {
    font-family: Gobold;
    text-align : center;
    font-size : 1.2rem;
    letter-spacing: 0.3rem;
    margin-top: 1rem;
}
.person-card p {
    font-family: ProductSans;
    text-align : center;
    font-size : 0.86rem;
    margin-top : -0.5rem;
}
.person-card-contact {
    width :100%;
    padding: 1rem 2rem 2rem 2rem;
}
.person-card-contact img {
    height : 1.6rem;
    width : 1.6rem;
}
.store-comp-container {
    padding: 1rem 3rem;
}
.store-comp1 {
    height: 100%;
    padding-right: 2rem !important;
    padding-left: 0 !important;
}
.store-comp2{
    height :100%;
    padding-right: 0rem !important;
    padding-left: 0rem !important;
}
.store-comp2b{
    height: 100%;
    box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 23%)
}
#comp1-view {
    height:100%;
    width :100%;
}
#comp1-prod-view {
    height : 75%;
    margin : 1rem 3rem;
}
.fa-star {
    color : #ffc94d ;
    font-size: 1rem ;
}
#review-star i {
    color : #ffc94d ;
    font-size: 0.8rem ;
}
@media screen and (max-width : 1200px) {
    .store-comp1 {
        height : 98vh;
        margin-bottom: 6vh;
        padding-right: 0 !important; 
    }
    .store-comp2 {
        height: 50vh;
    }
}
@media screen and (max-width : 1230px) {
    #rate-prod-view  {
        margin-bottom : 2vh !important;
    }
}
@media screen and (max-width : 500px) {
    #rate-prod-view {
        text-align: center !important;
        margin-left : -10vw !important;
    }
}
@media screen and (max-width : 1200px){
    .store-comp2 , .store-comp2 .store-comp2b{
        height : auto;
        padding-bottom: 2vh;
    }
    .cart-shoe {
        width : 30% !important;
        height: auto;
        margin-bottom:2vh !important;
    }
}
@media screen and (max-width : 768px) {
    .store-comp1 , .store-comp1 .store-comp2b{
        height : auto;
        padding-bottom: 2vh;
    }
    #sub-imgs {
        margin-top : 4vh !important;
        flex-direction : row !important;
        justify-content: space-between !important;
    }
    #comp1-prod-view {
        text-align: center;
    }
    .prod-choices {
        margin-bottom: 2vh !important;
    }
    #comp1-img2, #comp1-img3 , #comp1-img4  {
        width :30% !important;
    }
    #prod-buy {
        margin-bottom: 2vh !important;
    }

}
.newteam-card-view {
    ;   
}
@media screen and (max-width :1620px) {
    .newteam-card-view {
        padding-left: 10vw !important;
        padding-right : 10vw !important;   
    }
}
@media screen and (max-width :1459px) {
    .newteam-card-view {
        padding-left: 5vw !important;
        padding-right : 5vw !important;   
    }
}
@media screen and (max-width :1267px) {
    .newteam-card-view {
        padding-left: 3vw !important;
        padding-right : 3vw !important;   
    }
}
#newteam-div {
    height:90vh;
}
@media screen and (max-width :1141px) {
    #newteam-div {
        height:auto;
    }

}
@media screen and (max-width :1060px) {
    .newteam-h2 {
        font-size : 1.15rem !important;
    }
}
@media screen and (max-width :880px) {
    .newteam-h2 {
        padding-right: 2vw;
    }
}
@media screen and (max-width :540px) {
    .newteam-h2 {
        font-size : 1rem !important;

    }
}