/* Colors and Font Setup */
:root{
    --primary: rgb(48, 137, 255);
    --secondary: rgb(0, 166, 251);
    --tertiary: rgb(248, 130, 71);
    --background: dimgray;
    --easyWhite: #FFF;
    --success: rgb(0, 211, 18);
    --failure: rgb(211, 0, 0);
    --text: rgb(5, 25, 18);
    
    background-color:var(--easyWhite);
    font-size:20px;
    font-family: "Anta", sans-serif;
}

figcaption, p{
    font-family: "Open Sans", sans-serif;
}

.wht{
    color: var(--easyWhite);
}
t
/* navigation bar setup */
nav{
    height:10%;
    width:100%;
    
}
.navul{
    display: flex;
    justify-content: center;
    gap:20px;
}
.navli{
    border-bottom: 3px solid lightgray;
    float:left;
    list-style-type:none;
    padding: calc(10px + .2vw);
    font-size:20px;
    margin-top:2%;
    margin-bottom:2%;
    background-color: var(--easyWhite);

}

/* show which page the user is on */
.selLink{
    border-bottom: 3px solid var(--primary);
}
.navli > a{
    text-decoration:none;
    color:var(--text);
}
.navli:hover{
    border-bottom: 3px solid var(--primary);
}

.navli:hover a{
    color: var(--primary); 
}
.navli:not(.selLink):hover .selLink {
    border-bottom: 3px solid lightgray;
}
.inactive a {
    text-decoration: line-through;
    color: gray;
    pointer-events: none;
}

header{
    max-height:16%;
    margin-left:2%;
    display:flex;
    align-items:flex-end;
    border-bottom:1px solid gainsboro;
    background-color: var(--easyWhite);
    color:var(--text);
}
header p{
    margin:0;
    font-weight:bold;
    font-size: calc(45px + 0.3vw);
    align-self:center;
}

/* allocate space for a profile picture */
#pfp{
    display:flex;
    width:100%;
    border-radius: 50%;
}
.pfp{
    max-width:140px;
    margin:auto;
}
.rounded-top{
    border-top-left-radius: 10px!important;
    border-top-right-radius: 10px!important;
}
.sticky{
    position: sticky;
    top: 0;
    z-index: 100;
}

/* define boundaries and spacing for main content */
body{
    background-color:var(--easyWhite);
    margin:0;
    color: var(--text);
    padding-bottom:40px;
}
section{
    padding-left:2.5%;
    padding-right:2.5%;
    color:var(--text);
}
section img{
    width:100%;
    height:60%;
}
.CNTR{
    text-align:center;
}
#kat{
    margin-top:auto;
    margin-bottom:auto;
}
figcaption{
    /* background-color:var(--easyWhite); */
    padding:8px;
    border-radius: 0 0 0 0;
}
figure{
    border:1px solid rgba(0,0,0,0.2);
    /* border-radius: 15px 15px 0 0; */
}
.subsec{
    height:100%;
    width:100%;
}
.subsec2{
    width:50%;
    min-width:400px;
}
.maincontent{
    display:flex;
    background-color:var(--background);
    width:100%;
}

/* define styles for forms and buttons */
form{
    background-color:var(--secondary);
    max-width:50%;
    margin:auto;
    padding:0.67rem;
    border-radius:5px;
}
.forms{
    text-align:center;
    justify-content:center;
    max-width:100%;
    min-width:300px;
    margin-left:auto;
    margin-right:auto;
    padding:0.67rem;
    color:var(--text);
}
.txtArea{
    font-size:18px;
    height:200px;
    width:80%;
    margin:10px;
}
.submButton{
    padding: calc(10px + 0.2vw);
    background-color: var(--easyWhite);
    border-style:solid;
    font-size:18px;
    width:25%;
}
button:active{
    background-color: var(--tertiary);
    color:var(--easyWhite);
}

.tSpc{
    margin-top:10px;
}
footer{
    background-color: rgba(39, 76, 119, 0.75);
    padding-top:10px;
    padding-bottom:10px;
    text-align:center;
    position:fixed;
    bottom:0;
    width:100%;
    font-weight:bold;
    font-size:18px;
}


/* common classes */
.ma{
    margin:auto;
}

.profile{
    max-width:400px;
}




.card-effect {
    position: relative;
    color: #fff;
    background-color: rgba(0,0,0,.3);
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.3), 0 0 5px rgba(255, 255, 255, 0.2);
    border-radius: 0px;
}

.card-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(255, 255, 255, 0.3);
    z-index:-1;
}




/* Resize window to be approprimaryate for many devices */

@media screen and (max-width:850px){
    /* Centering the header content */
    header {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center-aligns h1 and nav */
        text-align: center;
    }
    nav{
        height:25%;
        min-width:inherit;
        margin:auto;
    }
    .navul {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .navli {
        width: 100%;
    }
    .maincontent{
        display:inline-block
    }
    .subsec{
        width:98%;
        margin:auto;
    }
    section{
        padding:0;
    }
    form{
        max-width:100%;
    }
    .forms{
        max-width:100%;
        justify-content:center;
    }
    .pfp{
        padding-bottom:10px;
    }
    .ma{
        padding-bottom: 15px;
    }
}
@media screen and (max-width:550px){
    header > h1{
        font-size:36px;
    }
    header{
        height:inherit;
        max-height:inherit;
        margin-bottom:10px;
    }
    .subsec{
        width:100%;
    }
}