@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Sofia+Sans+Condensed:ital,wght@0,1..1000;1,1..1000&family=Sofia+Sans:ital,wght@0,1..1000;1,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

/*background: rgb(188,150,65);
background: linear-gradient(90deg, rgba(188,150,65,1) 0%, rgba(239,230,151,1) 19%, rgba(188,150,65,1) 38%, rgba(217,194,124,1) 61%, rgba(239,230,151,1) 75%, rgba(217,193,124,1) 92%, rgba(188,150,65,1) 100%);*/

:root {
 
    --primary: #efe697;
    --secondary: #1effc3;
    
    --card-size: 300px;
 }
 
body {
    font-family: "Sofia Sans", sans-serif;
    background-color: #F1F1F1;
}

/*Extra extra Large Screen*/
@media (max-width: 1400px) {}

/*Large Screen*/
@media (max-width: 1200px) {}

/*Large Screen*/
@media (max-width: 992px) {}

/*Medium Screen*/
@media (max-width: 768px) {


}

/*Small Screen*/
@media (max-width: 576px) {

    .stsd-button {
        width: 130px !important;
        height: 38px !important;
        font-size: 12px !important;
    }

    .content-title {
        padding: 1rem !important;
        font-size: 40px !important;
    }

    .header-title {
        display: none !important;
    }

    .content-description {
        padding: 1rem !important;
        font-size: 14px !important;
    }


    .card-date {
        font-size: 46px !important;
    }

    .card-month {
        font-size: 24px !important;
    }

    .card-schedule .card-year {
        font-size: 16px !important;
    }

    .card-description {
        font-size: 8px !important;
    }

    .double-date {
        font-size: 46px !important;
    }

}


.navbar-head {
    font-family: Arial, Helvetica, sans-serif;
    color: #BEBEBE;
}

.navbar-title {
    font-weight: 800;
    color: #0083B2;
}

.patriot-logo {
    width: 40px;
}

.homepage-title {
    color: #00597A;
    font-family: "Great Vibes", cursive;
    font-size: 130px;
    line-height: 0.4;
}

.homepage-subtitle {
    color: transparent;
    background-clip: text;
    background-image: linear-gradient(90deg, rgba(188, 150, 65, 1) 0%, rgba(239, 230, 151, 1) 19%, rgba(188, 150, 65, 1) 38%, rgba(217, 194, 124, 1) 61%, rgba(239, 230, 151, 1) 75%, rgba(217, 193, 124, 1) 92%, rgba(188, 150, 65, 1) 100%);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 230px;
    line-height: 0.7;
}

.header-link {
    font-family: "Inter", sans-serif;
    color: #00597A;
    cursor: pointer;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.offcanvas-title {
    font-weight: 700;
    font-size: 32px;
    color: #0083B2;
}

.offcanvas {
    width: 250px !important;
}

.offcanvas.show .nav-item:hover {
    background-color: #f4f4f4;
}

.bi-arrow-left, .bi-arrow-right {
    font-size: 38px;
    color: #00597A !important;
}

.content-title {
    color: #00597A;
    font-family: "Sofia Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 65px;
    line-height: 1;
}

.content-description {
    font-style: normal;
    color: #A3A3A3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: justify !important;
    width: 100% !important;
    max-width: 480px !important;
    height: 290px;
    font-size: 18px;
}

.scholar-image {
    height: 500px !important;
}

.content-name {
    color: #00597A;
    font-family: "Sofia Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 65px;
    line-height: 1;
    width: 100% !important;
    max-width: 480px !important;
    text-align: right;
}

.name-desc {
    font-style: normal;
    color: #646464;
    line-height: 1;
    font-size: 18px;
    text-align: right;
    width: 100% !important;
    max-width: 480px !important;
}

.activity-button {
    background-color: #f4f4f4;
    border: 1px solid #00597A;
    border-radius: 12px;
    width: 300px;
    height: 60px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sofia Sans', sans-serif;
    font-size: 19px;
    color: #00597A;
    position: relative;
}

.activity-button.active {
    color: white;
    background: #00597A;
    transition: 0.3s;
}

.full-map {
    width: 100%;
    max-width: 450px;
}

.button {
    position: relative;
    width: 48px;
    bottom: 480px;
    right: 25px;
    
}

.magazine-name {
    color: #A3A3A3;
    font-family: "Sofia Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
}

.magazine-link {
    color: #A3A3A3;
    font-family: "Sofia Sans Condensed", sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 1;
}

.brand-text {
    color: #A3A3A3;
}

.npsc-logo {
    width: 180px;
}





.patriot-id { 
    font-family: 'Source Code Pro', monospace;
    width: calc(var(--card-size) * 1.586);
    height: var(--card-size);
    
    border-radius: 0.75rem;
    box-shadow:  0 22px 70px 4px rgba(0,0,0,0.56), 0 0 0 1px rgba(0, 0, 0, 0.3);

    
    display: grid;
    grid-template-columns: 40% auto;
    color: white;
    
    align-items: center;
    
    will-change: transform;
    transition: transform 0.25s cubic-bezier(0.4, 0.0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    
    &:hover {
       transform: scale(1.1);
       box-shadow:  0 32px 80px 14px rgba(0,0,0,0.36), 0 0 0 1px rgba(0, 0, 0, 0.3);
    }
 }