@font-face{
    font-family: 'Nunito sans';
    font-style: normal;
    font-weight: 300;
    src: url(../assets/fonts/NunitoSans-Regular.ttf);
}
html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 500ms !important;
  transition-delay: -50ms !important;
}
:root{
     --veryDarkBlue: hsl(209, 23%, 22%);
     --darkBlueBackground: hsl(207, 26%, 17%);
     --darkBlueLightModeText: hsl(200, 15%, 8%);
     --darkGray: hsl(0, 0%, 90%);
     --veryLightGray: hsl(0, 0%, 98%);
     --white: hsl(0, 0%, 100%);
     --black: #000000;
     --redBorder: #ff0000;
 }
 .dark{
     --bg: var(--darkBlueBackground);
     --bg2: var(--veryDarkBlue);
     --bg3: var(--darkBlueLightModeText);
     --text: var(--white);
     --borderBottom: var(--white);
}

.light{
    --bg: var(--darkGray);
    --bg2: var(--white);
    --bg3: var(--darkBlueLightModeText);
    --text: var(--black);
    --borderBottom: var(--black);

}
 body{
    background-color: var(--bg);
    font-family: 'Nunito sans';
    margin: 0px;
    padding: 0em 0em 0em 0em;
    padding-right: 0px !important;
    position: relative;
}

/* Top Navigation Section */
#mainNav{
    background-color: var(--bg2);
    color: var(--text);
    padding: 0.5em 2em;
    margin: 0em 0em 1em 0em;
}
#textLogo{
    padding: 0%;
    display: flex;
    align-items: center;
}
#textLogo p{
    padding: 0%;
    margin: 0%;
    font-size: 1em;
    font-weight: bolder;
}
#themeSwitcher{
    padding: 0%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
#themeSwitcher img{
    width: 5%;
    padding: 0%;
    margin: 0%;
}

/* Header Section */
#pageHeader{
    padding: 0em 2em 0em 2em;
    margin: 0em 0em;
    position: sticky;
    background-color: var(--bg);
}
#searchBar{
    padding: 0em 0em 0em 0em;
    margin: 0em;
    display: flex;
    align-items: center;
    background-color: var(--bg2);
    border-radius: 5px;
}
#searchBar input{
    background-color: var(--bg2);
    border: none;
    padding: 1em 1em 1em 1em;
    padding-right: 1em !important;
    margin: 0%;
    width: 100%;
    color: var(--text);
    border-radius: 5px;
    border-bottom: 1px solid var(--borderBottom);
}
#searchBar input::placeholder{
    color: var(--text);
}
#searchBar .fa{
    margin: 0%;
    padding: 1em;
    color: var(--text);
}
#filterBar{
    padding: 0em 0em 0em 0em;
    margin: 0%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 10px;
}
#filterBar #continent{
    background-color: var(--bg2);
    padding: 1em;
    border: none;
    color: var(--text);
    border-radius: 5px;
    width: 50%;
    border-bottom: 1px solid var(--borderBottom);
}
#continent option:focus{
    padding: 0%;
    margin: 0%;
}

/* Main Content Area */
#mainContentArea{
    padding: 2em 4em;
    margin: 0px;
    width: 100%;
    color: var(--text);
}
#mainContentArea .loader-div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0px auto;
    padding: 0em;
}
.loader-div img{
    width: 100%;
    padding: 0%;
    margin: 0%;
}
.loader-div p{
    color: var(--text);
    font-size: 2em;
    padding: 0%;
    margin: 0%;
}
#mainContentArea .value{
    font-weight: 300;
    font-size: 0.9em;
}
#cardWrapper{
    padding: 0px;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#mainContentArea .card{
    width: 16em;
    height: 20em;
    padding: 0em 0em 0em 0em;
    margin: 0em 0em 2em 0em;
    background-color: var(--bg2);
    border-radius: 10px;
    border: none;
    transition: transform 1s, 1s ease-in-out;
}
#mainContentArea .card:hover{
    transform: scale(1.0375);
}
@keyframes cardGrow {
    0% { transform: scale(1,1) };
    50% {transform: scale(1.0025, 1.0025) };
    100% {transform: scale(1,1) };
}
#mainContentArea .card-body{
    color: var(--text);
    align-items: center;
    padding: 2em 1em;
    height: 50%;
}
#mainContentArea .card-img-top{
    width: 100%;
    height: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px 10px 0px 0px;
    cursor: pointer;
}
.card-body{
    padding: 1em;
    cursor: pointer;
}
.card-body .card-title{
    font-size: 1em;
    margin: 0px 0px 1em 0em;
}
.card-body .card-text {
    margin: 0em 0em 0.25em 0em;
    font-size: 0.825em;
}
#cardWrapper button{
    display: none;
}

/* Modal Content Section */
.modal-open{
    padding: 0em !important;
    position: relative;
    overflow-y: auto;
    overflow: hidden;
}
.modal-backdrop{
    opacity: 0 !important;
}
#myModal{
    display: none;
    position: relative;
    width: 100%;
    height: 100% !important; 
    background-color: var(--bg2);
}
.modal-dialog{
    padding: 0em 0em;
    margin: 0em;
    max-width: 100%;
    position: fixed;
    left: 0em; 
    top: 4.5em;
    right: 0em;
    bottom: 0em; 
    background-color: var(--bg1);
}
.modal-dialog-scrollable .modal-content {
    color: var(--text);
    background-color: var(--bg);
    padding: 0em 2em !important; 
    margin: 0px; 
    width: 100%;
    height: auto;
    border: none;
    overflow-y: auto !important;
    animation-name: animatetop;
    animation-duration: 0.4s
  }
  @keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
  }
.modal-header{
      display: flex;
      justify-content: space-between;
      padding: 0.5em;
      margin: 1em 0em;
      border: none;
}
  .modal-header .btn{
    color: var(--text); 
    background-color: var(--bg2);
    font-weight: bold;
    margin: 0em 0em 0em 0em;
    padding: 0.5em 1.5em;
    border: none;
    border-radius: 5px;
  }
  .modal-header .btn:hover {
    color: var(--bg2);
    background-color: var(--text);
  }
  .modal-header .btn{
      margin: 0em 0em 0em 0.5em;
  }
  .modal-body{
      display: flex;
      flex: 0 0 auto;
      padding: 0px;
      margin: 0px;
  }
  .modal-flag{
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0px;
      padding: 0em 4em 0em 0em;
      
  }
  .modal-flag img{
      width: 100%;
  }
.country-details{
    margin: 0px;
    padding: 0em 0em 0em 2em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.country-details .value{
    font-weight: 100;
    font-size: 0.85em;
}
.country-details .name-header-div{
    margin: 0em 0em 2em 0em;
    padding: 0em;
}
.country-details .nameHeader{
    font-size: 2.5em;
}
.country-details .other-info{
    padding: 0px;
    margin: 0em 0em 2em 0em;
}
.country-details .first-col{
    padding: 0em 1em 0em 0em;
    margin: 0px;
}
.country-details .second-col{
    padding: 0em 0em 0em 1em;
    margin: 0px;
}
.other-info p{
    margin: 0.25em 0em;
}
.country-details .borderCountries{
    margin: 0px;
    padding: 0.5em 0em 0em 0em;
    display: flex;
    align-items: center;
}
.borderHeader{
    margin: 0em 0.5em 0em 0em;
    padding: 0px;
    font-size: 1.25em;
    font-weight: bold;
}
.country-list-item{
    background-color: var(--bg2);
    color: var(--text);
    margin: 0.25em 0.5em 0.25em 0em;
    padding: 0.25em 1em;
    /* border: 1px solid black; */
}
.country-list-item:hover{
    background-color: var(--text);
    color: var(--bg2)
}

/* Extra small devices (phones, 575px and down) */
@media (max-width: 575px) {

    /* Top Navigation Section */
#mainNav{
    padding: 1em 2em;
}
#textLogo p{
    padding: 0%;
    margin: 0%;
    font-size: 0.875em;
}
#themeSwitcher img{
    width: 5%;
}

/* Header Section */
#pageHeader{
    padding: 0em 0em 0.5em 0em;
    margin: 0em 2em;
}
#searchBar{
    padding: 0em 1em 0em 0em;
    margin: 0em 0em 0em 0em;
}
#searchBar input{
    padding: 0.5em 0em 0.5em 1em;
    margin: 0%;
}
#filterBar{
    padding: 0%;
    align-items: center;
    justify-content: center;
}
#filterBar #continent{
    padding: 0.5em 1em 0.5em 1em;
    width: 75%;
}
#continent option{
    font-size: 0.75em;
}

/* Main Content Area */
#mainContentArea{
    padding: 1em 2em 0em 2em;
}
#mainContentArea .value{
    font-weight: 300;
    font-size: 0.9em;
}
#cardWrapper{
    justify-content: center;
}
#mainContentArea .card{
    width: 24em;
    height: 20em;
    padding: 0em 0em 0em 0em;
    margin: 0em 0em 1.5em 0em;
}
#mainContentArea .card-body{
    padding: 1em 1em;
    height: 50%;
}
#mainContentArea .card-img-top{
    width: 100%;
    height: 50%;
}
.card-body{
    padding: 1em;
}
.card-body .card-title{
    font-size: 1.125em;
    margin: 0px 0px 0.5em 0em;
}
.card-body .card-text {
    margin: 0em 0em 0.25em 0em;
    font-size: 0.825em;
}

/* Modal Content Section */
.modal-dialog{
    padding: 0em 0em;
    top: 4.5em;
}
.modal-header{
      padding: 0em;
      margin: 0.5em 0em 1em 0em;
}
  .modal-flag{
      padding: 0em;
  }
.country-details{
    margin: 0px;
    padding: 0em;
}
.country-details .value{
    font-weight: 100;
    font-size: 0.85em;
}
.country-details .font-weight-bold{
    font-size: 1.15em;
}
.country-details .name-header-div{
    margin: 1em 0em 1em 0em;
}
.country-details .nameHeader{
    font-size: 1.5em;
}
.country-details .other-info{
    margin: 0em 0em 1.5em 0em;
}
.country-details .first-col{
    padding: 0em;
    margin-bottom: 1em;
}
.country-details .second-col{
    padding: 0em;
}
.other-info p{
    margin: 0.25em 0em;
}
.country-details .borderCountries{
    margin: 0px;
    padding: 0.5em 0em 0em 0em;
    display: flex;
    align-items: center;
}
.borderHeader{
    margin: 0em 0.5em 0em 0em;
    padding: 0px;
    font-size: 1.15em;
}
.country-list-item{
    margin: 0.25em 0.5em 0.25em 0em;
    padding: 0.25em 0.5em;
}
}

@media (min-width: 576px) and (max-width:767px) {

    /* Top Navigation Section */
#mainNav{
padding: 1em 2em;
}
#textLogo p{
padding: 0%;
margin: 0%;
font-size: 1em;
}
#themeSwitcher img{
width: 10%;
}

/* Header Section */
#pageHeader{
padding: 1em 2em 1em 2em;
margin: 0em 2em;
}
#searchBar{
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
}
#searchBar input{
padding: 0.5em 0em 0.5em 1em;
margin: 0%;
}
#filterBar{
padding: 0%;
align-items: center;
justify-content: flex-end;
}
#filterBar #continent{
padding: 0.5em 1em;
width: 75%;
/* font-size: 1em; */
}
#continent option{
font-size: 0.75em;
}

/* Main Content Area */
#mainContentArea{
padding: 1em 2em 0em 2em;
}
#mainContentArea .value{
font-weight: 300;
font-size: 1em;
}
#cardWrapper{
justify-content: center;
}
#mainContentArea .card{
width: 32em;
height: 32em;
padding: 0em 0em 0em 0em;
margin: 0em 0em 2em 0em;
}
#mainContentArea .card-body{
padding: 1em 1em;
height: 50%;
}
#mainContentArea .card-img-top{
width: 100%;
height: 50%;
}
.card-body{
padding: 1em;
}
.card-body .card-title{
font-size: 1.75em;
margin: 0.75em 0px 0.5em 0em;
}
.card-body .card-text {
margin: 0em 0em 0.25em 0em;
font-size: 1.5em;
}

/* Modal Content Section */
.modal-dialog{
padding: 0em 0em;
}
.modal-header{
  padding: 0em;
  margin: 1em 0em 1em 0em;
}
.modal-flag{
  padding: 0em;
}
.country-details{
margin: 0px;
padding: 0em;
}
.country-details .value{
font-weight: 100;
font-size: 1.5em;
}
.country-details .font-weight-bold{
    font-size: 1.25em;
}
.country-details .name-header-div{
margin: 1em 0em 1.25em 0em;
}
.country-details .nameHeader{
font-size: 2em;
}
.country-details .other-info{
margin: 0em 0em 1.5em 0em;
}
.country-details .first-col{
padding: 0em;
margin-bottom: 1em;
}
.country-details .second-col{
padding: 0em;
}
.other-info p{
margin: 0.25em 0em;
}
.country-details .borderCountries{
margin: 0px;
padding: 0.5em 0em 0em 0em;
display: flex;
align-items: center;
}
.borderHeader{
margin: 0em 0.5em 0em 0em;
padding: 0px;
font-size: 1.25em;
}
.country-list-item{
margin: 0.25em 0.5em 0.25em 0em;
padding: 0.25em 0.5em;
font-size: 1.15em;
}
}

@media (min-width: 768px) and (max-width:991px) {

    /* Top Navigation Section */
#mainNav{
padding: 1em 2em;
}
#textLogo p{
padding: 0%;
margin: 0%;
font-size: 1em;
}
#themeSwitcher img{
width: 10%;
}

/* Header Section */
#pageHeader{
padding: 1em 2em 1em 2em;
margin: 0em 2em;
display: flex;
flex-direction: column;
align-items: center;
}
#searchBar{
padding: 0em 0em 0em 0em;
margin: 0em 0em 0.75em 0em;
width: 100%;
}
#searchBar input{
padding: 0.5em 0em 0.5em 1em;
margin: 0%;
}
#filterBar{
padding: 0%;
align-items: center;
justify-content: center;
width: 75%;
}
#filterBar #continent{
padding: 0.5em 1em;
width: 100%;
}
#continent option{
font-size: 0.75em;
}

/* Main Content Area */
#mainContentArea{
padding: 1em 2em 0em 2em;
}
#mainContentArea .value{
font-weight: 300;
font-size: 1em;
}
#cardWrapper{
justify-content: space-between;
}
#mainContentArea .card{
width: 47.5%;
height: 28em;
padding: 0em 0em 0em 0em;
margin: 0em 0em 2em 0em;
}
#mainContentArea .card-body{
padding: 1em 1em;
height: 50%;
}
#mainContentArea .card-img-top{
width: 100%;
height: 50%;
}
.card-body{
padding: 1em;
}
.card-body .card-title{
font-size: 1.75em;
margin: 0.75em 0px 0.5em 0em;
}
.card-body .card-text {
margin: 0em 0em 0.25em 0em;
font-size: 1.5em;
}

/* Modal Content Section */
.modal-dialog{
padding: 0em 0em;
top: 5.5em;
}
.modal-header{
  padding: 0em;
  margin: 1em 0em 1em 0em;
}
.modal-flag{
  padding: 0em 1em 0em 0em;
}
.country-details{
margin: 0px;
padding: 0em 0em 0em 1em;
}
.country-details .value{
font-weight: 100;
font-size: 0.875em;
}
.country-details .font-weight-bold{
    font-size: 0.875em;
}
.country-details .name-header-div{
margin: 0em 0em 0.5em 0em;
}
.country-details .nameHeader{
font-size: 1.5em;
}
.country-details .other-info{
margin: 0em 0em 0.5em 0em;
}
.country-details .first-col{
padding: 0em;
margin-bottom: 0em;
}
.country-details .second-col{
padding: 0em 0em 0em 1em;
}
.other-info p{
margin: 0.15em 0em;
}
.country-details .borderCountries{
margin: 0px;
padding: 0em 0em 0em 0em;
display: flex;
align-items: center;
}
.borderHeader{
margin: 0em 0.5em 0em 0em;
padding: 0px;
font-size: 1em;
}
.country-list-item{
margin: 0.25em 0.5em 0.25em 0em;
padding: 0.25em 0.5em;
font-size: 0.875em;
}
}

@media (min-width: 992px) and (max-width:1199px) {
    /* Top Navigation Section */
#mainNav{
padding: 1em 2em;
}
#textLogo p{
padding: 0%;
margin: 0%;
font-size: 1em;
}
#themeSwitcher img{
width: 10%;
}

/* Header Section */
#pageHeader{
padding: 1em 2em 0.5em 2em;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#searchBar{
padding: 0em 0em 0em 0em;
margin: 0em 0em 0em 0em;
max-width: 50% !important;
}
#searchBar input{
padding: 0.5em 0em 0.5em 1em;
margin: 0%;
}
#filterBar{
padding: 0%;
align-items: center;
justify-content: center;
max-width: 25% !important;
}
#filterBar #continent{
padding: 0.5em 1em;
width: 100%;
font-size: 1em;
}
#continent option{
font-size: 0.75em;
}

/* Main Content Area */
#mainContentArea{
padding: 1em 2em 0em 2em;
}
#mainContentArea .value{
font-weight: 300;
font-size: 1em;
}
#cardWrapper{
justify-content: space-between;
}
#mainContentArea .card{
width: 47.5%;
height: 28em;
padding: 0em 0em 0em 0em;
margin: 0em 0em 2em 0em;
}
#mainContentArea .card-body{
padding: 1em 1em;
height: 50%;
}
#mainContentArea .card-img-top{
width: 100%;
height: 50%;
}
.card-body{
padding: 1em;
}
.card-body .card-title{
font-size: 1.75em;
margin: 0.75em 0px 0.5em 0em;
}
.card-body .card-text {
margin: 0em 0em 0.25em 0em;
font-size: 1.5em;
}

/* Modal Content Section */
.modal-dialog{
padding: 0em 0em;
top: 5.5em;
}
.modal-header{
  padding: 0em;
  margin: 1em 0em 1em 0em;
}
.modal-flag{
  padding: 0em 1em 0em 0em;
}
.country-details{
margin: 0px;
padding: 0em 0em 0em 1em;
}
.country-details .value{
font-weight: 100;
font-size: 0.875em;
}
.country-details .font-weight-bold{
    font-size: 0.875em;
}
.country-details .name-header-div{
margin: 0em 0em 0.5em 0em;
}
.country-details .nameHeader{
font-size: 1.5em;
}
.country-details .other-info{
margin: 0em 0em 0.5em 0em;
}
.country-details .first-col{
padding: 0em;
margin-bottom: 0em;
}
.country-details .second-col{
padding: 0em 0em 0em 1em;
}
.other-info p{
margin: 0.15em 0em;
}
.country-details .borderCountries{
margin: 0px;
padding: 0em 0em 0em 0em;
display: flex;
align-items: center;
}
.borderHeader{
margin: 0em 0.5em 0em 0em;
padding: 0px;
font-size: 1em;
}
.country-list-item{
margin: 0.25em 0.5em 0.25em 0em;
padding: 0.25em 0.5em;
font-size: 0.875em;
}
}