/* Fonts */
@font-face {
    font-family: "card-text_font";
    src: url(fonts/Space_Mono/SpaceMono-Regular.ttf);
}

@font-face {
    font-family: "title_font";
    src: url(fonts/Space_Mono/SpaceMono-Bold.ttf);
}

@font-face {
    font-family: "default_font";
    src: url(fonts/Work_Sans/WorkSans-VariableFont_wght.ttf);
}

/* Elements */
body {
    background-color: #F0F1F3 !important;
}

a, a:visited {
  color: #4F4F4F;
  text-decoration: none;
}

hr {
    background-color: #4F4F4F;
    height: 2px;
    margin: 20px 0;
}

.iframe-container {
    max-width: 800px;
    width: 100%;
}


/* Classes */
.custom-navbar {
    background-color: #F0F1F3 !important;
    font-family: default_font;
    font-size: 20px;
}

.custom-navbar a:hover{
    color: #90D5FF;
    text-decoration: underline;
    text-decoration-thickness: 5%;
    text-underline-offset: 5px;
}

.logo {
    font-family: title_font;
    border: 2px solid #4F4F4F;   
    padding: 12px 16px;         
    display: inline-block;      
    border-radius: 5px;       
}

.current-link {
    color: #3D56D9;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 10%;
}

.navbar-toggler {
    border: none;
}

.card {
    background-color: #F0F1F3;
    border: none !important;
    gap: 16px;
}

.card img {
    width: 40rem;
    height: 30rem;
    transition: transform 0.3s ease;
}

.card:hover img {
    transform: scale(1.05);
}

.custom-navbar-2 {
    background-color: #F0F1F3 !important;
    font-family: default_font;
    font-size: 20px;
}

.custom-navbar-2 a:hover{
    color: #90D5FF;
}

.current-link-2 {
    color: #3D56D9;
    font-weight: bold;
}

.bg-white {
    background-color: #ffffff;
    margin: 20px 0;
}

.profile_pic {
    width: 40rem;
    height: auto;
}

/* Color */
.color-blue {
    color: #3D56D9;
}

.color-grey {
    color: #4F4F4F;
}

/* Text */
#title {
    font-size: 72px;
    font-family: title_font;
    color: #3D56D9;
}

.sub-text {
    font-size: 28px;
    font-family: default_font;
    color: #4F4F4F;
}

.card-text {
    font-size: 40px;
    font-family: title_font;
    font-weight: 600px;
    color: #3D56D9;
}

.sub-card-text {
    font-size: 24px;
    font-family: default_font;
    color: #4F4F4F;
}