/* https://stackoverflow.com/questions/52682812/django-css-not-updating */
/* crtl+f5 or ctrl+shift+r to refresh css file  cache or if you have the setting turned on and dev tools open you can refresh the page */
/* * {
    outline: 1px red solid;
} */


body {
    font-family: Verdana, Geneva, Tahoma, sans-serif; /*Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;*/
    font-size: 1vw;
    margin: 0;
    padding: 0;
    background-image: url('img/darker_gradient_cornflower_blue2.png');
    background-size: cover;
}

.container {
    width: 90%;
    margin: 0 auto;
}

.head {
    display: flex;
    align-items: center;
}

.head-buttons{
    display: flex;
    align-items: center;
    justify-content: right;
    margin-left: auto;
}

h1 a{
    color:#000;
    text-decoration: none;
    font-size: 60px;
}

#loginLink{
    margin-left: 0.3vw;
    background: #fff;
    backface-visibility: hidden;
    border-radius: .375rem;
    border-style: solid;
    border-width: 0.125rem;
    box-sizing: border-box;
    color: #212121;
    cursor: pointer;
    display: inline-block;
    font-family: Circular,Helvetica,sans-serif;
    font-size: 1.3vw;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    padding: .875rem 1.125rem;
    position: relative;
    text-align: left;
    text-decoration: none;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

#loginLink:not(:disabled):hover {
transform: scale(1.05);
}

#loginLink:not(:disabled):hover:active {
transform: scale(1.05) translateY(.125rem);
}

#loginLink:focus:before {
    content: "";
    left: calc(-1*.375rem);
    pointer-events: none;
    position: absolute;
    top: calc(-1*.375rem);
    transition: border-radius;
    user-select: none;
}

#loginLink:not(:disabled):active {
    transform: translateY(.125rem);
}

.row {
    height: 50px;
    background-color: #fff;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.profile-link {
    margin-top: 5%;
    float: left;
    width: 50%;
}


.title a {
    font-size: 60px;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    color:black;
    text-decoration: none;
}

.table-head{
    display: flex;
    height: 7vh;
}

.table-head div{
    padding: 5px; 
    margin: 2px;
    background-color:black;
    color:#fff;
    font-weight: bold;
    box-sizing: border-box;
}

.table-head .elevator-pitch{
    flex: 10%;
    border-radius: 5px;
}

.table-head .status{
    flex: 14%;
    border-radius: 5px;
}

.table-head .name{
    flex: 20%;
    border-radius: 5px;
}

.table-head .location{
    flex: 20%;
    border-radius: 5px;
}

.table-head .current-projects{
    flex: 30%;
    border-radius: 5px;
}

.table-head .meeting-preferences{
    flex: 6%;
    border-radius: 5px;
}

.table-row {
    display: flex;
    align-items: flex-start;
}

.table-row:hover .status, /* .table-row:hover .status .name mean referrence descendant .name of descendant .status*/
.table-row:hover .name,
.table-row:hover .location,
.table-row:hover .current-projects-row,
.table-row:hover .meeting-preferences{
    outline: 0.3vh solid black;
}

.status, .name, .location, .current-projects-row, .meeting-preferences{
    padding: 5px;
    margin: 1.7px;;
    background-color: #fff;
    border-radius: 3px;
    box-sizing: border-box;
}

.elevator-pitch{
    flex: 10%;
    background-color: #fff;
    margin: 1.7px;;
    background-color: #fff;
    border-radius: 3px;
    height: 10vh;
}

.elevator-pitch img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

.status{
    flex: 14%;
    background-color: #fff;
    height: 10vh;
}

#online-status-notifier{
    font-size: 1.5vh;
    position: absolute;
    bottom: 0%;
}

.name{
    flex: 20%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    height: 10vh;
}

.location{
    flex: 20%;
    background-color: #fff;
    height: 10vh;
}

.current-projects-row{
    flex: 30%;
    scroll-behavior: smooth;
    background-color: #fff;
    height: 10vh;
    transition: all 0.3s ease;
}

.current-projects-row:hover{
    height: 20vh;
    position: relative;
}

.current-projects-row:hover .current-projects-row-inside{
    height: 20vh;
    overflow-y: scroll;
}

.profile-button{
    text-decoration: none;
    color: #000;
}

.current-projects-popup{
    display: none;
    position: fixed;
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    height: 40vh;
    width: 90vh;
    background-color: #fff;
    border: 0.5vh solid black;
    z-index: 999;
    overflow-y: auto;
}

.meeting-preferences{
    flex: 6%;
    background-color: #fff;
    height: 10vh;
}

.profile-header {
    position: relative
}

.bio-background {
    position: absolute;
    width: 1020px;
    height: 250px;
    background-color: #fff;
}

.profile-data{
    display: flex;
    height: auto;
    gap: 1rem;
}

.profile-page-container{
    display: flex;
    height: 70vh;
}

.profile-page-left-side{
    display: flex;
    flex-direction: column;
    flex-basis: 65%;
}

.profile-data-profile-page{
    display: flex;
    flex-basis: 40%;
    max-height: 40%;
}

.my-profile-left-side{
    display: flex;
    flex-direction: column;
    flex-basis: 65%;
}

.my-profile-left-side-top{
    display: flex;
    flex-basis: 40%;
    max-height: 40%;
}

.my-profile-right-side{
    display: flex;
    flex-direction: column;
    flex-basis: 35%;
    margin-left: 1%;
}

.profile-data2{
    width: 32.2%;
    height: 18%;
}

#elevator-pitch-video {
    height: 100%;
    width: 100%;
    background-color: black;
    flex-basis: 50%;
}

.video-placeholder{
    flex-basis: 50%;
    /* width: 32.2%;
    height: 18%; */
    background-color: black;
}

.video-upload-form-container{
    position: absolute;
}

.profile-info {
    flex-basis: 50%;
    background-color: #fff;
    border-right: 0.5vh solid black;
    border-top: 0.5vh solid black;
    position: relative;
}

#edit-personal-info{
    position: absolute;
    right: 0;
    top: 0;
}

#add-save-for-later{
    position: absolute;
    right: 0;
}

#submit-profile-info-edits{
    position: absolute;
    right: 0;
    top: 26vh;
}

#profile-info-container{
    display: flex;
    flex-wrap: wrap;
    gap: 1vh 1vw;
    padding-right: 4vw;
}

#profile-info-container p{
    margin: 0;
}

.spacer{
    flex: 1%;
}

.spacer2{
    width: 0.5%;
}

.upcoming-meetings-box{
    display: flex;
    flex-direction: column;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden;
    flex-basis: 85%;
}

.meetings-row{
    height: 5vh;
    border-top: 0.5vh solid black;
    border-bottom: 0.5vh solid black;
    padding: 0.5vh;
    text-align: center;
    font-size: 2vh;
}

.incoming-meetings-row{
    height: 5vh;
    border-top: 0.5vh solid black;
    border-bottom: 0.5vh solid black;
    padding: 0.5vh;
    text-align: center;
    font-size: 2vh;
}

.meeting-headers{
    font-weight: bold;
    font-size: 3vh;
    border-bottom: 0.5vh solid black;
    display: flex;
    justify-content: space-between;
    flex-basis: 15%;
}

.projects-and-requests{
    display: flex;
    flex-basis: 60%;
    flex-direction: column;
    background-color: #fff;
    border: 0.5vh solid black;
}

.projects{
    flex-direction: column;
    background-color: #fff;
    border: 0.5vh solid black;
    display: flex;
    flex-basis: 60%;
}

.projects-header{
    position: relative;
    flex-basis: 10%;;
    border-bottom: 0.5vh solid black;
    font-size: 4vh;
}

#projects-button{
    border: .5vh solid black;
    background-color: grey;
}

#projects-button:hover{
    background-color:rgba(0, 0, 0, 0.1);
    cursor: pointer
}

#interests-button{
    border: .5vh solid black;
}

#interests-button:hover{
    background-color:rgba(0, 0, 0, 0.1);
    cursor: pointer
}

#ideas-button{
    border: .5vh solid black;
}

#ideas-button:hover{
    background-color:rgba(0, 0, 0, 0.1);
    cursor: pointer
}

.projects-box{
    display:flex;
    flex-direction: column;
    flex-basis: 90%;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden;
    max-height: 35vh; /* need this for overflow y to work */
}

.projects-box-profile-page{
    display:flex;
    flex-direction: column;
    flex-basis: 90%;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden;
    max-height: 46vh; /* need this for overflow y to work */
}

.interests-box{
    display:flex;
    flex-direction: column;
    flex-basis: 90%;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden;
}

.ideas-box{
    display:flex;
    flex-direction: column;
    flex-basis: 90%;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden;
}

.project-rows{
    padding: 0.5vh;
    border: 0.5vh dotted black;
    position: relative;
}

.project-rows header{
    font-weight: bold;
}

.project-attributes{
    text-decoration: underline;
}

#project-dates{
    font-size: 2vh;
    position: absolute;
    right: 0.5vw;
    top: 0;
}

#add-project{
    position: absolute;
    top: 0.3vh;
    right: 0.5vh;
    background: #fff;
    backface-visibility: hidden;
    border-radius: .375rem;
    border-style: solid;
    border-width: .125rem;
    box-sizing: border-box;
    color: #212121;
    cursor: pointer;
    display: inline-block;
    font-family: Circular,Helvetica,sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 0.5vh;
    padding: .875rem 1.125rem;
    text-align: left;
    text-decoration: none;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    /* border: none;
    background-color: white;*/
}

#add-project:not(:disabled):hover {
    transform: scale(1.05);
}

#add-project:not(:disabled):hover:active {
    transform: scale(1.05) translateY(.125rem);
}

#add-project:focus:before {
    content: "";
    left: calc(-1*.375rem);
    pointer-events: none;
    position: absolute;
    top: calc(-1*.375rem);
    transition: border-radius;
    user-select: none;
}

#add-project:not(:disabled):active {
    transform: translateY(.125rem);
    }

.add-project-popup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 85vh;
    width: 90vh;
    background-color: #fff;
    border: 0.5vh solid black;
    z-index: 1000;

}

.profile-page-right-side{
    display: flex;
    flex-direction: column;
    margin-left: 1%;
    flex-basis: 35%;
}

.close-window{
    position: absolute;
    right: 0;
}

/* meeting request */
.meeting-request-form {
    background-color: #fff;
    flex: 60%;
    height: 40vh;
    border: 0.5vh solid black;
}

.statistics{
    margin-top: 1%;
    flex: 40%;
    background-color: #fff;
    border: 0.5vh solid black;
}

.individual-statistics{
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90%;
}

.statistics-box{
    display: flex;
    flex-direction: column;
}

.meetings-completed-symbol{
    height: 10vh;
    width: 7vw;
}

.meeting-statistics-nums{
    font-size: 4vh;
}


.incoming-and-sent-invites{
    flex-basis: 33.3%;
    background-color: #fff;
    border: 0.5vh solid black;
}

.incoming-meeting-invites{
    background-color: #fff;
    border: 0.5vh solid black;
    flex-basis: 33.3%;
}

.incoming-meetings-box{
    display: flex;
    flex-direction: column;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden;
    flex-basis: 85%;
}

.sent-meeting-invites{
    background-color: #fff;
    border: 0.5vh solid black;
    flex-basis: 33.3%;
}

.sent-meetings-box{
    display: flex;
    flex-direction: column;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden;
    flex-basis: 85%;
}

.sent-meetings-row{
    height: 5vh;
    border-top: 0.5vh solid black;
    border-bottom: 0.5vh solid black;
    padding: 0.5vh;
    text-align: center;
    font-size: 2vh;
}

.meetings-popup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 40vh;
    max-height: 70vh;
    width: 90vh;
    background-color: #fff;
    border: 0.5vh solid black;
    z-index: 999;
}

.incoming-meetings-popup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 40vh;
    width: 90vh;
    background-color: #fff;
    border: 0.5vh solid black;
}

.sent-meetings-popup{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 40vh;
    width: 90vh;
    background-color: #fff;
    border: 0.5vh solid black;
}

.warning{
    background-color: #fff;
    height: 100px;
    width: 300px;
    margin-left: 66%;
    margin-top: 25%;
    position: absolute;
}

.text-chat{
    position: fixed;
    width: 100vh;
    height:82vh;
    background-color: #fff;
    margin-left: auto;
    z-index: 1000;
    top: 11vh;
    right: 10vh;
    border-radius: 1%;
    box-shadow: 30px 30px 40px 10px rgba(0, 0, 0, 0.7);
    border: 2px solid black;
}

.hidden{
    display:none !important;
}

#text-chat-header{
    font-size: 5vh;
    height: 6vh;
    background-color: cornflowerblue;
    border-radius: 1%;
    border-bottom: 2px solid black;
    font-weight: bold;
}

.contacts-and-messages{
    top: 6vh;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.left-side-of-messages{
    flex-basis: 15%;
    border-right: 5px solid black;
}

#contacts{
    flex: 1 1 33%;
    height: 100%;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden;
}

#contacts-header{
    font-size: 3vh;
    border-bottom: 5px solid black;
}

#contact-button{
    width: 100%;
    height: 7%;
}

#messages{
    position: relative; /* needed to the child elements will position themselves relative to itself */
    flex-basis: 85%;
}

#messages-header{
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    font-size: 6vh;
    border-bottom: 2px solid black;
}

.chat-name:hover{
    cursor: pointer;
    text-decoration: underline;
    color: blue;
}

.messages-box{
    display: flex;
    flex-direction: column;
    height: 90%;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden; 
    position: relative;
}

.timestamp{
    position: absolute;
    font-size: 1.5vh;
    color: gray;
    right: 0;
}

.contact-timestamp{
    /* position: absolute; */
    font-size: 1.5vh;
    color: gray;
    left: 0;
}

.user-message{
    height: auto; 
    background-color: cornflowerblue;
    width: max-content;
    max-width: 40vh;
    word-wrap: break-word; /* Break words if too long */
    overflow-wrap: break-word;
    padding: 1vh;
    border-radius: 1vh;
    margin-left: auto;
    margin-top: 2vh;
    margin-right: 1vh;
}

.contact-message{
    background-color: gainsboro;
    width: max-content;
    max-width: 40vh;
    padding: 1vh;
    border-radius: 1vh;
    margin-top: 2vh;
    word-wrap: break-word; /* Break words if too long */
    overflow-wrap: break-word;
    margin-left: 1vh;
}

.text-box{
    position: absolute;
    bottom: 2vh;
    left: 1vh;
    right: 1vh;
    height: 4vh;
    border: 2px solid black;
    border-radius: 1vh;  
}

.message-input{
    font-size: 3vh;
    border-radius: 1vh;
    width: 84.8%;
    border: none;
    height: 100%;
    padding: 0 5vh 0 1vh;
}

.send-button{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 8vh;
    border-radius: 1vh;
    font-size: 2vh;
    background-color: cornflowerblue;
}

.search-meeting-spots a{
    position: absolute;
    color: black;
    margin-left: 32%;
}

.chat-header {
    width: 1020px;
    height: 50px;
    background-color: darkgray;
    display: none;
}

.chat-background {
    width: 1020px;
    height: 250px;
    /*display: flex;   Makes the container a flex container */
    background-color:#fff;
    border: 2px dotted #000;
    display: none;   
}

.dm-list {
    width: 250px;
    background-color: #f4f4f4;
    padding: 10px;
    box-sizing: border-box;
    display: flex;          /* Apply flexbox */
    flex-direction: column; /* Stack items vertically */
    gap: 10px;              /* Optional: add spacing between buttons */
    overflow-y: auto;
}

.chat-box {
    flex-grow: 1;    /* Takes up the remaining space after dmlist */
    background-color: #fff;  /* Example background color */
    padding: 10px;
    overflow-y: auto;  /* Enables scrolling if the messages overflow */
    box-sizing: border-box;
    border: 2px dotted #000;  /* Dotted border around the chatbox */
}

.message {
    display: flex;
    justify-content: left;
    flex-direction: column;
    margin-bottom: 10px;
}

.favorites{
    position: fixed;
    width: 25vh;
    height:82vh;
    background-color: #fff;
    margin-left: auto;
    z-index: 1000;
    top: 11vh;
    right: 10vh;
    border-radius: 1%;
    box-shadow: 30px 30px 40px 10px rgba(0, 0, 0, 0.7);
    border: 2px solid black;
}

.quick-settings{
    position: fixed;
    width: 25vh;
    height:82vh;
    background-color: #fff;
    margin-left: auto;
    z-index: 1000;
    top: 11vh;
    right: 10vh;
    border-radius: 1%;
    box-shadow: 30px 30px 40px 10px rgba(0, 0, 0, 0.7);
    border: 2px solid black;
}

.footer{
    margin-top: 3vh;
    height: 20vh;
    background-color: #fff;
    display: flex;
}

.footer-text{
    width: 50%;
    display: flex;
    justify-content: center;
}



.footer-links{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 50%;
}

.online {
    position: absolute;
    color: black;
    margin-left: 32%;
    margin-top: 7.5%;
}

.join-breakout-room a{
    position: absolute;
    color: black;
    margin-left: 32%;
    margin-top: 9%;
}

.direct-message {
    position: absolute;
    color: black;
    margin-left: 71%;
    margin-top: 23%;
}

.or {
    position: absolute;
    color: black;
    margin-left: 45%;
}

.send-offer-for-online-meeting a{
    position: absolute;
    color: black;
    margin-left: 47%;
}

.button1{
    position: absolute;
    margin-left: 34%;
    margin-top: 4%;
}

/*css from ken whitesells code*/
/*
body {
	color: #666666;
	background-color: #c7d8df;
}
*/
.video-page-header{
    display: flex;
    justify-content: center;
}

video {
	background-color: #ddd;
	display: block;
	width: 43vw; /*96*/
	height: 49vh; /*54*/
}

#appContent {
    margin-top: 20px;
	margin-left: 20px;
}

.leave {
    margin-left: 40px;
	background-color: #CA0;
	color: black;
}

#call-button {
	width: 143px;
	margin-right: 11px;
}

#header {
	margin-bottom: 11px;
}

button[aria-checked="false"] {
	text-decoration: line-through;
	color: #fff;
	background: red;
}

figure {
	position: relative;
}

figcaption {
	color: #eee;
	background: rgba(16,16,16,0.6);
	font-weight: normal;
	font-size: 14px;
	bottom: 0;
	left: 0;
	width: 160px;
}

.video-row {
    display: flex;
    justify-content: center; /* Aligns videos in the center */
}

/* search */
.search-bar{
    display: flex;
    gap: 10px;   
}

#searchBox{
    box-sizing: border-box;
    width: 100%;
    height: 4vh;
    border: none;
    font-size: 3vh;
    border: black 0.2vh solid;
    background-color: #fff;
}

.search-bar-div{
    width: 20vw;
    display: flex;
}

.search-bar-div input::placeholder{
   font-size: 2vh;
}

#searchButton{
    height: 4vh;
    width: 3vw;
    padding: 0%;

    display: none;
}

.location-bar-div{
    display: flex;
}

#location-symbol{
    font-size: 3.5vh;
}

#location-dropdown{
    height: 4vh;
    width: 12vw;
    border: black 0.2vh solid;
}

/* filtering */

.filterbar{
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

.status-filter{
    position: relative;
    display: inline-block;
}

.status-filter-button{
    border-radius: 10px;
    font-size: 2.5vh;
    padding: 5px 10px;
    transition: transform 0.05s ease-in-out;
    margin-right: 10px;
    background-color: #fff;
}

.status-filter-content{
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 150px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
}

.status-filter-form{
    display:flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    width: 100%;
    background-color: #fff;
}

.status-filter-form button{
    background-color: #fff;
    text-align: left;
}

.location-filter{
    border-radius: 10px;
    font-size: 2vh;
    padding: 5px 10px;
    transition: transform 0.05s ease-in-out;
    margin-right: 10px;
    background-color: #fff;
}

.location-filter-content{
    display: none;
    position: ab;
    background-color:#fff;
    min-width: 150px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
}

.meeting-filter{
    position: relative;
    display: inline-block;
}

#meeting-preferences-button{
    border-radius: 10px;
    font-size: 2.5vh;
    padding: 5px 10px;
    transition: transform 0.05s ease-in-out;
    margin-right: 10px;
    background-color: #fff;
}

.meeting-filter-form{
    display:flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    width: 90%;
    background-color: #fff;
    text-align: left;
}

.meeting-filter-content{
    display:none;
}

.meeting-filter-form button{
    background-color: #fff;
    text-align: left;
}

#pitch-preferences-button{
    border-radius: 10px;
    font-size: 2.5vh;
    padding: 5px 10px;
    transition: transform 0.05s ease-in-out;
    margin-right: 10px;
    background-color: #fff;
}


.pitch-filter-content{
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 150px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 10px;
}

.show {
    display: block;
}

/*login page */

.authentication-box{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 85vh;
    width: 70vh;
    background-color: #fff;
    z-index: 999;
    border-radius: 5vh;
    background-color: whitesmoke;
    padding: 1vh;
    align-items: center;
}

.authentication-header{
    display: flex;
    justify-content: center;
    font-size: 6vh;
    font-weight: bold;
}

.dont-have-an-account{
    font-size: 3vh;
}

.sign-in-form{
    font-size: 3vh;
    display: flex;
    flex-direction: column;
}

.login-field-header{
    margin-left: 5%;
    font-size: 2vh;
    padding: 1vh;
}

.login-input-box input{
    margin-left: 5%;
    width: 90%;
    border-radius: 1vh;
    height: 5vh;
    border: none;
    font-size: 3vh;
    border:cornflowerblue 0.2vh solid;
    background-color: #fff;
}

.login-input-box input::placeholder{
    color: transparent;
}

.login-button-class{
    margin-top: 5%;
    display: flex;
    justify-content: center;
}

.login-button{
    text-align: center;
    background: #fff;
    backface-visibility: hidden;
    border-radius: .375rem;
    border-style: solid;
    border-width: .125rem;
    box-sizing: border-box;
    color: #212121;
    cursor: pointer;
    display: inline-block;
    font-family: Circular,Helvetica,sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    padding: .875rem 1.125rem;
    position: relative;
    text-decoration: none;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.login-button:not(:disabled):hover {
    transform: scale(1.05);
}

.login-button:not(:disabled):hover:active {
    transform: scale(1.05) translateY(.125rem);
}

.login-button:focus:before {
    content: "";
    left: calc(-1*.375rem);
    pointer-events: none;
    position: absolute;
    top: calc(-1*.375rem);
    transition: border-radius;
    user-select: none;
}

.login-button:not(:disabled):active {
    transform: translateY(.125rem);
}


/* sign up page */
.signup-container{
    display: flex;
}

.signup-left-side{
    display: flex;
    flex-direction: column;
    width: 50vw;
    background-color: whitesmoke;
    height: 100vh;
}

.signup-right-side{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 50vw;
    height: 100vh;
    font-size: 10rem;
}

.signup-field-header{
    margin-left: 20%;
    font-size: 2vh;
    padding: 1vh;
    font-weight: bold;
}

.signup-input-box{
    display: flex;
    justify-content: center;
}

.django-flatpickr{
    display: flex;
    justify-content: center;
}

.signup-input-box-widget{
    width: 60%;
    border-radius: 1vh;
    height: 3vh;
    border: none;
    font-size: 3vh;
    border:cornflowerblue 0.2vh solid;
    background-color: #fff;
}

.signup-input-box input{
    width: 60%;
    border-radius: 1vh;
    height: 3vh;
    border: none;
    font-size: 3vh;
    border:cornflowerblue 0.2vh solid;
    background-color: #fff;
}

.signup-input-box select{
    width: 60%;
    border-radius: 1vh;
    height: 3vh;
    border: none;
    font-size: 3vh;
    border:cornflowerblue 0.2vh solid;
    background-color: #fff;
}

.signup-input-box input::placeholder{
    color: transparent;
}

.signup-button-class{
    margin-top: 1%;
    display: flex;
    justify-content: center;
}

.signup-button{
    text-align: center;
    background: #fff;
    backface-visibility: hidden;
    border-radius: .375rem;
    border-style: solid;
    border-width: .125rem;
    box-sizing: border-box;
    color: #212121;
    cursor: pointer;
    display: inline-block;
    font-family: Circular,Helvetica,sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
    padding: .875rem 1.125rem;
    position: relative;
    text-decoration: none;
    transform: translateZ(0) scale(1);
    transition: transform .2s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

.signup-button:not(:disabled):hover {
    transform: scale(1.05);
}

.signup-button:not(:disabled):hover:active {
    transform: scale(1.05) translateY(.125rem);
}

.signup-button:focus:before {
    content: "";
    left: calc(-1*.375rem);
    pointer-events: none;
    position: absolute;
    top: calc(-1*.375rem);
    transition: border-radius;
    user-select: none;
}

.signup-button:not(:disabled):active {
    transform: translateY(.125rem);
}

.signup-header{
    margin-left: 20%;
}

.dropdown {
    position: fixed;
    width: 100vh;
    height:82vh;
    background-color: #fff;
    margin-left: auto;
    z-index: 1000;
    top: 11vh;
    right: 10vh;
    border-radius: 1%;
    box-shadow: 30px 30px 40px 10px rgba(0, 0, 0, 0.7);
    border: 2px solid black;
    overflow-y: auto;
}

.message-button {
    position: relative; /* Ensure the badge is positioned relative to this button */
    font-size: 24px;
    border: none;
    background: none;
    cursor: pointer;
}

.badge {
    position: absolute;
    top: 6px;
    right: 6px;
    transform: translate(50%, -50%);
    background-color: red;
    color: white;
    font-size: 10px;              /* 🛠 Control text size here */
    font-weight: bold;
    width: 18px;                  /* 🛠 Equal width/height for perfect circle */
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
    text-align: center;
    z-index: 10;
    padding: 0;                   /* 🛠 Remove padding for uniform shape */
}

.meeting-history-header{
    font-size: 5vh;
    background-color: #fff;
    border-radius: 2vh;
}

.sent-meeting-invites-header{
    font-size: 3vh;
}

.received-meeting-invites-header{
    font-size: 3vh;
}

.meeting-item{
    background-color: #fff;
    border: #000 0.1vh solid;
}

/* pagination */

.pagination{
    font-size: 2.5vh;
    padding-top: 1vh;
}
.step-links a{
    text-decoration: none;
    color: black;
    background-color: #fff;
    padding: 0.5vh 1vh;
    border: 0.1vh solid black;
    margin: 0.2vh;
}

#toggle-filters{
        display: none;
    }

.profile-info-for-phone{
    display:none;
}

/* text chat in video chat */
.text-chat-container-video{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-chat-video{
    width: 90vw;
    height:42vh;
    background-color: #fff;
    border-radius: 1%;
    border: 2px solid black;
}

#text-chat-header-video{
    font-size: 5vh;
    height: 15%;
    background-color: cornflowerblue;
    border-radius: 1%;
    border-bottom: 2px solid black;
    font-weight: bold;
}

.contacts-and-messages-video{
    width: 100%;
    height: 85%;
    display: flex;
}

#contacts-header-video{
    font-size: 3vh;
    border-bottom: 5px solid black;
    height: 10%;
}

#contact-search-input-video{
    height:5%;
}

#contacts-video{
    height: 80%;
    overflow-y: auto;
}

#contact-button-video{
    width: 100%;
    height: 16%;
}

/* text chat in video chat */
.text-chat-container-video{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-chat-video{
    width: 90vw;
    height:42vh;
    background-color: #fff;
    border-radius: 1%;
    border: 2px solid black;
}

#text-chat-header-video{
    font-size: 5vh;
    height: 15%;
    background-color: cornflowerblue;
    border-radius: 1%;
    border-bottom: 2px solid black;
    font-weight: bold;
}

.contacts-and-messages-video{
    width: 100%;
    height: 85%;
    display: flex;
}

#contacts-header-video{
    font-size: 3vh;
    border-bottom: 5px solid black;
    height: 10%;
}

#contact-search-input-video{
    height:5%;
}

#contacts-video{
    height: 80%;
    overflow-y: auto;
}

.messages-box-video{
    display: flex;
    flex-direction: column;
    height: 80%;
    overflow-y: auto;    /* Enables vertical scrolling */
    overflow-x: hidden; 
    position: relative; /*this is needed to the timestamps with position: absolute will also scroll*/
}

#contact-button-video{
    width: 100%;
    height: 16%;
}

.meeting-invite-sender-link:hover{
    text-decoration: underline;
    color: blue;
}

.thumbnail-image {
    position: absolute;
    object-fit: cover;
    width: 28.5vw;
    height: 29vh;
    background-color: black;
    z-index: 1;
}

.thumbnail-upload-form{
    position: absolute;
    z-index: 1000;
    top: 2vh;
}

.homepage-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.current-projects-row-inside{
    max-height: 100%;
    overflow: hidden;
}

.current-projects-popup-header{
    font-size: 3vh;
    font-weight: bold;
    border-top: 0.5vh solid black;
    border-bottom: 0.5vh solid black;
    text-align: center;
}

.current-projects-popup-item{
    font-size: 1.5vh;
    border-bottom: 0.3vh dashed black;
    padding: 0.5vh;
}

.current-projects-popup-title{
    display: block;
}

.meeting-invite-sender-link:hover{
    text-decoration: underline;
    color: blue;
}

.thumbnail-image {
    position: absolute;
    object-fit: cover;
    width: 28.5vw;
    height: 29vh;
    background-color: black;
    z-index: 1;
}

.thumbnail-upload-form{
    position: absolute;
    z-index: 1000;
    top: 2vh;
}

.current-projects-row-inside{
    width: 100%;
    height: 100%;
}

.current-projects-popup-item{
    font-size: 1.5vh;
    border-bottom: 0.3vh dashed black;
    padding: 0.5vh;
}

.current-projects-popup-title{
    display: block;
}

.confirmation-sent-container{
    background-color: cornflowerblue
}

#self-video{
    transform: scaleX(-1);
}

#logo-icon{
    height: 8vh;
    width: 4.5vw;
}

.logo{
    display: flex;
}

.edit-project-button{
    border: none;
    position: absolute;
    right: 0;
    top: 50%;
    background-color: #fff;
    height: 2vh;
    width: 2vw;
}

.edit-icon{
    color: gainsboro;
    font-size: 2vh;
}

.edit-icon:hover{
    color: yellow;
    cursor: pointer;
}

.edit-container{
    position: fixed;         /* stays centered even when scrolling */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: black 0.3vh solid;
    z-index: 1000;
}

.edit-container:empty {
  display: none;
}

.update-address-form{
    position: fixed;         /* stays centered even when scrolling */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: black 0.3vh solid;
}

.update-address-form:empty {
  display: none;
}

.my-profile-container{
    display: flex;
    height: 70vh;
}

#edit-profile-info-form{
    z-index: 1000;
    position: relative;
}

/*Walkthrough*/
/* Main container */
.walkthrough-main {
    min-height: 100vh;
}

/* Headers */
.crucial-steps-header, .useful-features-header {
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    margin-bottom: 40px;
}

.useful-features-header {
    margin-top: 60px;
}

/* Crucial Steps Container */
.crucial-steps-boxes-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Individual step boxes */
.step-one, .step-two, .step-three {
    width: 300px;
    min-height: 200px;
    height: auto;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Step headers */
.step-one-header, .step-two-header, .step-three-header {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    transition: opacity 0.3s ease;
    margin-bottom: 10px;
}

/* Step content - hidden by default */
.step-one-content, .step-two-content1, .step-two-content2, .step-two-content3, .step-three-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    color: #555;
    line-height: 1.6;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    margin-top: 10px;
}

/* Hover effect - show content */
.step-one:hover .step-one-content,
.step-two:hover .step-two-content1,
.step-two:hover .step-two-content2,
.step-two:hover .step-two-content3,
.step-three:hover .step-three-content {
    opacity: 1;
    max-height: 500px;
}

.step-one:hover, .step-two:hover, .step-three:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Useful Features Container */
.useful-features-boxes-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Useful feature boxes */
.useful-feature-1, .useful-feature-2, .useful-feature-3 {
    width: 300px;
    min-height: 200px;
    height: auto;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

/* Feature headers */
.useful-feature1-header, .useful-feature2-header, .useful-feature3-header {
    font-size: 1.3rem;
    font-weight: bold;
    color: #333;
    transition: opacity 0.3s ease;
    margin-bottom: 10px;
}

/* Feature content - hidden by default */
.useful-feature1-content, .useful-feature2-content, .useful-feature3-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    color: #555;
    line-height: 1.6;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    margin-top: 10px;
}

/* Hover effect for features */
.useful-feature-1:hover .useful-feature1-content,
.useful-feature-2:hover .useful-feature2-content,
.useful-feature-3:hover .useful-feature3-content {
    opacity: 1;
    max-height: 500px;
}

.useful-feature-1:hover, .useful-feature-2:hover, .useful-feature-3:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

/* Button container */
.button-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
    padding-bottom: 40px;
}

/* Go to Site button */
.go-to-site-button {
    background-color: white;
    color: cornflowerblue;
    font-size: 1.3rem;
    font-weight: bold;
    padding: 15px 40px;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.go-to-site-button:hover {
    background-color: #f8f9fa;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.go-to-site-button:active {
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.brand{
    width: 28vw;
    height: 12vh;
    margin-top: 3%;
    margin-bottom: 3%;
}

.brand-walkthrough{
    width: 28vw;
    height: 12vh;
    margin-top: 1%;
    margin-bottom: 1%;
}

.walkthrough-header-container{
    width: 90%;
    margin: 0 auto;
}

.text-chat-close{
    position: absolute;
    top: 0;
    right: 0;
}

#favorite-profile-button-form{
    position: absolute;
    right: 0;
}

#websocket-div{
    font-size: 1.5vh;
}

.meetup-spot{
    background-color: #fff;
    width: 100vw;
    height: 100vh
}

.meetup-spot h1{
    margin-top: 0;
}

.messages-information-icon{
    font-size: 3vh;
    font-weight: normal;
}

.messages-information-popup{
    /* 1. REQUIRED: Must have a defined width */
    width: 50%; 
    
    /* 2. The centering rule: sets left and right margins equally */
    margin-left: auto;
    margin-right: auto;
    
    /* Shorthand is cleaner: */
    margin: 0 auto; 
    
    /* For visualization: */
    background-color: cornflowerblue;
    padding: 15px;

    border-radius: 1vh;
    margin-top: 2vh;

    visibility: hidden;

    z-index: 1002;
    position: relative;
}

.my-profile-elevator-pitch-container{
    flex-basis: 50%;
    position: relative;
}

.remove-video-form{
    position: absolute;
}

.remove-thumbnail-form{
    position: absolute;
    right: 0;
    z-index: 1000;
}

/* PHONE STYLES */
@media (max-width: 600px) {
    html {
        font-size: 14px; /* Adjust base font size for smaller screens */
    }

    body {
        font-family: Verdana, Geneva, Tahoma, sans-serif; /*Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;*/
        margin: 0;
        padding: 0;
        font-size: medium;
    }

    .container {
        width: 95%;
        margin: 0 auto;
    }

    .head {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .head h1 {
        margin: 0.3rem;
    }

    .head h1 a{ 
        font-size: 3rem;
    }

    .head-buttons{
        display: flex;
        width: 100%;
        justify-content: right;
        margin-left: unset;
        flex-wrap: wrap;
        margin-bottom: 3vh;
    }

    h1 a{
        color:#000;
        text-decoration: none;
        font-size: 60px;
    }

    #toggle-filters{
        display: block;
    }

    .search-bar-div{
        width: 15rem; 
    }

    #location-dropdown{
        width: 10rem;
    }

    .engineer-table{
        gap: 1vh;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .table-head{
        display: none;
    }

    .status{
        display:none;
    }

    .location{
        display: none;
    }
    
    .current-projects-row{
        width: 100%;
        height: 15vh;
        margin: 0;
        border-bottom-left-radius: 10%;
        border-bottom-right-radius: 10%;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        flex: none;
    }

    .meeting-preferences{
        display:none;
    }

    .name{
        width: 100%;
        height: 5vh;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin: 0;
        display: inline;
        flex: none;
    }

    .elevator-pitch{
        width: 100%;
        height: 15vh;
        margin: 0;
        border-top-left-radius: 10%;
        border-top-right-radius: 10%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        flex: none;
    }

    .profile-button{
        width: 70%;
    } 

    .table-row{
        height: 35vh;
        display: flex;
        flex-direction: column;
        font-size: 3vw;
        width: 100%;
    }

    .profile-info-for-phone{
        display:unset;
        font-size: 3vw;
    }

    #online-status-notifier{
        font-size: 3vw;
        top: 0;
        right: 2%;
    }

    .spacer{
        display: none;
    }

    .profile-data{
        flex-direction: column;
        height:auto;
    }

    #elevator-pitch-video {
        width: 100%;
        height: 20rem;
    }

    .profile-info{
        border:#000 0.5vh solid;
    }



    .projects-header{
        display: flex;
    }

    #projects-button{
        display: flex;
        width: 9rem;
        height: 3.5rem;
        font-size: 2rem;
        align-items: center;
    }

    #interests-button{
        display: flex;
        width: 10rem;
        height: 3.5rem;
        font-size: 2rem;
        align-items: center;
    }

    #ideas-button{
        display: flex;
        width: 7rem;
        height: 3.5rem;
        font-size: 2rem;
        align-items: center;
    }

    .my-profile-left-side-top{
        flex-direction: column;
        flex-basis: 50%;
        max-height: 100%;
    }

    .authentication-box{
        width: 90%;
    }

    .signup-container{
        display: flex;
        width: 100%;
        height: 100%;
    }

    .signup-left-side{
        width: 90%;
        min-height: 90vh;
        max-height: 110vh;
        margin: auto auto;
        border-radius: 2%;
        height: auto;
    }

    .signup-right-side{
        display: none;
    }

    .profile-data-profile-page{
        flex-direction: column;
        flex-basis: 50%;
        max-height: none;
    }

    .video-row {
        flex-direction: column !important;
    }

    .videoContent{
        background-color: #fff;
        height: 1rem;
        font-size: 20rem;
    }

    .filters{
        display: none;
        position:absolute;
        top: 11rem;
        background-color: #fff;
        z-index: 1000;
        width: 75%;
    }

    .text-chat{
        top: 11rem;
        right: 1rem;
        height: 40rem;
        width: 32rem;
    }

    #contact-search-input{
        width: 10rem;
    }

    .message-input{
        font-size: 1.2rem;
        padding: 0 2.8vh 0 1vh;
    }

    .dropdown{
        width: 32rem;
        height: 40rem;
        right: 0rem;
    }

    .add-project-popup{
        width: 90%;
    }
    
    .meetings-popup{
        position: fixed;
        width: 90%;
    }

    .sent-meetings-popup{
        position: fixed;
        width: 90%;
    }

    .incoming-meetings-popup{
        position: fixed;
        width: 90%;
    }

    .brand-walkthrough{
        width: 60vw;
        height: 8vh;
    }

    .walkthrough-main {
        padding: 20px 15px;
    }

    /* Make headers smaller on mobile */
    .crucial-steps-header, .useful-features-header {
        font-size: 1.8rem;
        margin-bottom: 25px;
    }

    .useful-features-header {
        margin-top: 40px;
    }

    /* Stack boxes vertically, full width */
    .crucial-steps-boxes-container,
    .useful-features-boxes-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    /* Make boxes full width on mobile */
    .step-one, .step-two, .step-three,
    .useful-feature-1, .useful-feature-2, .useful-feature-3 {
        width: 280px;
        max-width: 90%;
        min-height: 150px;
    }

    /* Make text smaller for mobile */
    .step-one-header, .step-two-header, .step-three-header,
    .useful-feature1-header, .useful-feature2-header, .useful-feature3-header {
        font-size: 1.1rem;
    }

    .step-one-content, .step-two-content1, .step-two-content2, .step-two-content3, .step-three-content,
    .useful-feature1-content, .useful-feature2-content, .useful-feature3-content {
        font-size: 0.9rem;
    }

    /* Make button smaller */
    .button-container {
        margin-top: 30px;
        padding-bottom: 20px;
    }

    .go-to-site-button {
        font-size: 1.1rem;
        padding: 12px 30px;
    }

    .step-one:hover, .step-two:hover, .step-three:hover,
    .useful-feature-1:hover, .useful-feature-2:hover, .useful-feature-3:hover {
        transform: none;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    /* Content starts hidden with slide-up effect */
    .step-one-content, .step-two-content1, .step-two-content2, .step-two-content3, .step-three-content,
    .useful-feature1-content, .useful-feature2-content, .useful-feature3-content {
        opacity: 0;
        max-height: 0;
        transform: translateY(20px);
        transition: all 0.5s ease;
    }
    
    /* Show content when box is in view */
    .in-view .step-one-content,
    .in-view .step-two-content1,
    .in-view .step-two-content2,
    .in-view .step-two-content3,
    .in-view .step-three-content,
    .in-view .useful-feature1-content,
    .in-view .useful-feature2-content,
    .in-view .useful-feature3-content {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }

    .brand{
        width: 60vw;
        height: 8vh;
    }

    .current-projects-row-inside{
        overflow-y: scroll;
    }

    .current-projects-row:hover{
        height: auto;
        position: static;
    }

    .current-projects-row:hover .current-projects-row-inside{
        height: auto;
        overflow-y: visible;
    }

    .current-projects-popup-header{
        font-size: 2vh;
    }

    .footer{
        height: 15vh;
    }

    .footer-text-box{
        font-size: 1.5vh;
    }

    .footer-links{
        font-size: 1vh;
    }

    #loginLink{
        font-size: 4.3vw;
        line-height: 1.3;
        padding: 1.125rem;
    }

    #loginLink:not(:disabled):hover{
        transform: none;
    }

    .user-message{
        max-width: 25vw;
    }
    
    .contact-message{
        max-width: 25vw;
    }

    .messages-box{
        height: 85%;
    }

    .favorites{
        height: 50vh;
    }

    .quick-settings{
        height: 40vh;
    }

    .table-row:hover .status, /* .table-row:hover .status .name mean referrence descendant .name of descendant .status*/
    .table-row:hover .name,
    .table-row:hover .location,
    .table-row:hover .current-projects-row,
    .table-row:hover .meeting-preferences{
        outline: 0;
    }

    .my-profile-container{
        flex-direction: column;
        height: 180vh;
        gap: 0.5vh;
    }


    .my-profile-left-side{
        flex-basis: 50%;
    }

    .my-profile-right-side{
        flex-basis: 50%;
        margin-left: 0;
    }

    .projects-and-requests{
        flex-basis: 50%;
    }

    .profile-page-container{
        flex-direction: column;
        height: 180vh;
        gap: 0.5vh;
    }

    .profile-page-left-side{
        flex-basis: 60%;
    }

    .profile-page-right-side{
        flex-basis: 40%;
        margin-left: 0;
    }

    .projects{
        flex-basis: 50%;
    }

    .meetings-completed-symbol{
        width: 25vw;
    }

    .homepage-thumbnail{
        border-top-left-radius: 10%;
        border-top-right-radius: 10%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .elevator-pitch img{
        border-top-left-radius: 10%;
        border-top-right-radius: 10%;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0
    }

    .logout-container{
        height: 100vh;
        width: 100vw;
    }

    .login-container{
        height: 100vh;
        width: 100vw;
    }

    .edit-project-button{
        right: 5%;
    }

    #project-dates{
        font-size: 1.5vh;
    }

    #edit-personal-info{
        position: relative;
        margin-left: auto;
    }

    .edit-personal-info-container{
        display: flex;
    }
}

/* Even smaller phones - 480px and below */
@media (max-width: 480px) {
    .crucial-steps-header, .useful-features-header {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }

    .step-one, .step-two, .step-three,
    .useful-feature-1, .useful-feature-2, .useful-feature-3 {
        padding: 15px;
        min-height: 120px;
    }

    .go-to-site-button {
        font-size: 1rem;
        padding: 10px 25px;
    }
    
}