@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@100&display=swap');

/* font-family: 'Ubuntu', sans-serif; */
/* font-family: 'Work Sans', sans-serif; */

:root{
  --color-creamy:#f7f7f7;
  --color-lightBlue:#3895d3;
  --color-blue:#1261a0;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-creamy);
  overflow-x: hidden;
  font-family: Verdana, sans-serif;
  font-size: 1rem;
  line-height: 1.8rem;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 25px;
}

/* Loader */
.loader{
  background:var(--color-creamy);
  height:100vh;
  width:100vw;
  display:flex;
  justify-content: center;
  align-items:center;
  position:fixed;
  z-index:10;
}

/* Navigation */
.navigation-container {
  position: fixed;
  top: 0;
}

.navigation-items {
  display: flex;
  justify-content: center;
}

.background {
  background: var(--color-creamy);
  position: fixed;
  right: 0;
  width: 100%;
  height: 60px;
  z-index:-1;
}

.clickable{
  color:var(--color-lightBlue);
  cursor:pointer;
  font-weight:bold;
  user-select: none;
}

.clickable:hover{
  color:var(--color-blue);
}


/* Images Container */
.images-container {
  width:800px;
  margin-top: 50px;
}

.card {
  background: white;
  margin: 10px 10px 20px;
  border-radius: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.card-img-top{
  width:100%;
  height:auto;
  border-radius:5px 5px 0 0;
}

.card-body {
  padding: 20px;
}

.card-title {
  margin: 10px auto;
  font-size: 24px;
}



/* Save Confirmation */
.save-confirmed {
  background: white;
  padding: 8px 16px;
  border-radius: 5px;
  border:1px solid var(--color-creamy);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  position: fixed;
  bottom: 25px;
  right: 50px;
}
.save-confirmed>h1{
  font-family: 'Ubuntu', sans-serif;
  letter-spacing: 0.1rem;
  font-size:30px;
  font-weight:bolder;
}

/*save exists popup */
.save-exists {
  background: white;
  padding: 8px 16px;
  border-radius: 5px;
  border:1px solid var(--color-creamy);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  position: fixed;
  bottom: 25px;
  right: 50px;
}
.save-exists>h1{
  font-family: 'Ubuntu', sans-serif;
  letter-spacing: 0.1rem;
  font-size:30px;
  font-weight:bolder;
}

/* Hidden */
.hidden{
  display:none;
}

/* Large Smartphone (Vertical) */
@media screen and (max-width: 800px) {
  body {
    line-height: 1.4rem;
    font-size: 0.9rem;
    text-align: justify;

  }
  .images-container{
    width:100%;
  }


  .card-title {
    font-size: 20px;
  }

  .save-confirmed{
    right:25px;
  }

  .save-exists{
    right:25px;
  }
  .save-confirmed>h1{
    font-size:22px;
    color:var(--color-lightBlue);
  }
  .save-exists>h1{
    font-size:18px;
    color:red;
  }
  
}