@font-face {
    font-family: "Futura";
    src: url('../fonts/futuramaxicg.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url('../fonts/Inter.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://mdn.github.io/shared-assets/fonts/VeraSeBd.ttf");
  }

@media (max-width: 575px) {
    #imageCard {
        width: 100%;
        height: 488px;
    }

    #logoNavbar {
        transform: rotate(90deg);
    }

    footer{
        position: relative;
    }
}

@media (min-width: 576px) {
    .container {
        max-width:540px
    }

    #imageCard {
        width: 100%;
        height: 488px;
    }

    #logoNavbar {
        transform: rotate(90deg);
    }

    footer{
        position: relative;
    }
}

@media (min-width: 768px) {
    .container {
        max-width:720px
    }

    #dataRow1{
        height:600px;
    }

    #imageCard {
        width: 348px;
        height: 428px;
    }

    #logoNavbar {
        transform: rotate(90deg);
    }

    footer{
        position: relative;
    }
}

@media (min-width: 992px) {
    .container {
        max-width:960px
    }

    #dataRow1{
        height:550px;
    }

    #imageCard {
        width: 456px;
        height: 388px;
    }

    #logoNavbar {
        transform: rotate(90deg) translateX(20px);
    }

    footer{
        position: relative;
    }
}

@media (min-width: 1200px) {
    .container-itemvisualisation {
        max-width:1140px
    }

    #dataRow1{
        height:550px;
    }

    #imageCard {
        width: 558px;
        height: 388px;
    }

    #logoNavbar {
        transform: rotate(90deg) translateX(20px);
    }

    footer{
        position: relative;
    }
}

@media (min-width: 1400px) {
    .container-itemvisualisation {
        max-width:1320px
    }

    #dataRow1{
        height:550px;
    }

    #imageCard {
        width: 648px;
        height: 428px;
    }

    #logoNavbar {
        transform: rotate(90deg) translateX(20px);
    }

    footer{
        position: relative;
        bottom: 0px;
    }
}

@media (min-width: 2000px) {
    .container-itemvisualisation {
        max-width:1620px
    }

    #dataRow1{
        height:550px;
    }

    #imageCard {
        width: 648px;
        height: 428px;
    }

    #logoNavbar {
        transform: rotate(90deg) translateX(20px);
    }

    footer{
        position: relative;
        bottom: 0px;
    }
}

.navbar-nav a {
    color: #d02e02;
    font-family: 'Inter', sans-serif;
}

.navbar-nav a.nav-link.active {
    color: #d02e02;
    font-weight: bold;
    font-family: 'Inter', sans-serif;
}

main {
    color:#d02e02;
    font-family: 'Inter', sans-serif;
}

.card-img{
    width: 100%;
    height: 100%;
}

.btn-group {
    padding:5px !important;
}

#dataRow1 {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-bottom: 4rem;
    border-bottom-width: 2px; 
    border-bottom-style: solid; 
    border-bottom-color: #d02e02;
}

#infoTable *{
    color:#d02e02;
    font-family: "Inter", sans-serif;
}

#infoTable a{
    padding-top: 0rem;
}

#disclaimer-container {
    padding-top: 2rem;
}

#about {
    padding-bottom: 4rem;
    border-bottom-width: 2px; 
    border-bottom-style: solid; 
    border-bottom-color: #d02e02;
}

#disclaimer {
    padding-top: 2rem;
}

#disclaimer p {
    text-align: justify;
}

.btn-group-lg .btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    padding: 0;
  }

#copyrightBox{
    display: inline-block;
    position: absolute; 
    bottom: 0px; 
    right: 0px; 
    background-color: #d02e02; 
    color: white;
    font-family: "Inter", sans-serif;

}

p {
    font-family: "Inter", serif;
}

.text-start {
    width: 100px;
}

#logoNavbar{
    width: 75px;
    height: 75px;
}

.nav-link {
    margin-left: 1rem;
}

#numberedButtons {
    margin-top: 1rem;
}

.btn-danger {
    --bs-btn-bg: #d02e02 !important;
    --bs-btn-border-color: #d02e02 !important; 
}

.card-header {
    background-color: var(--bs-body-bg) !important;
}

#longInfo {
    --bs-card-border-color: var(--bs-body-bg) !important;
    --bs-card-border-width: 0px !important;
}

.card-footer {
    background-color: var(--bs-body-bg) !important;
}

.center {
    display: block;
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.site-footer {
    background-color: white;
    color: #d02d00;
    text-align: center;
    padding: 20px 0;
    border-top: 2px solid #d02d00;
    font-size: 14px;
    margin-top: 40px;
} 

/*******************
FOOTER (Alice style)
********************/

footer {
    margin-top: 0;  /* Force no gap above the footer */
    padding: 0;
    width: 100%;
    background-color: #D02E02;
    color: white;
    text-align: center;
}

.github-logo {
    width: 65px; /* Adjust size as needed */
    height: auto;
    display: block;
    margin: 10px auto 0;
}