/* .home-return {
  display: flex;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;

} */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

body {
  font-family: 'Lato';
  color: white;
  background-color: #cfd0c1;
}

nav {
  background-color: #c49f3d;
  padding: 10px;
  padding-bottom: 20px;
  /* border: 5px solid #71241f; */
  margin: -10px;
}

nav a {
  color: white;
  text-decoration: none;
  font-family: 'Anton';
}

nav a:hover {
  color: #71241f;
  /* backgound-color: black; */
}

.top-white-stripe {
  background-color: white;
  margin-left: -10px;
  margin-right: -10px;
  padding: 5px;
}

h1 {
  background-color: #71241f;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: -10px;
  padding: 5px;
}

h1 {
  font-family: 'Anton';
  font-weight: normal;
  font-size: xx-large;
  -webkit-text-stroke: 1px white;
  -webkit-text-fill-color: #71241f;
  text-align: center;
}

h1 span {
  -webkit-text-stroke: 1px black;
  -webkit-text-fill-color: white;
}

.home-img-container {
  display: flex;
}

.home-img {
  margin: auto;
  border-radius: 5px;
  border: 8px solid grey;
}

.footer-container {
  display: flex;
  justify-content: center;
}

footer {
  color: #ceae83;
  margin-top: 20px;
  background-image: linear-gradient(to right, #4f3f33,#68563f,#4f3421,#68563f,#4f3f33,#68563f,#4f3421,#68563f,#4f3f33, #68563f, #4f3f33);
  background-color: #4f3f33;
  padding: 10px;
  min-width: 250px;  
  max-width: 300px;
  border-top: 3px solid #ceae83;
  border-bottom: 3px solid #4f3421;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;;
}

.product-title {
  font-family: 'Anton';
  text-align: center;
  font-size: xx-large;
  padding-bottom: 5px;
  color: #71241f;
}

.preview-item {
  background-color: #71241f;
  border: 4px solid white;
}

.preview-item a {
  font-family: 'Oswald';
  text-decoration: none;
}

.details-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 350px;
  border: 5px solid white;
  border-radius: 5px;
  background-color: #1a1d26;
  margin: auto;
}

.details-logo {
  font-size: xx-large;
  text-align: center;
}

.details-name {
  font-size: large;
  text-align: center;
}

.details-more {
  text-align: center;
}

.routine-activities-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  overflow-wrap: normal;
  overflow: hidden;
  overflow: scroll;
}

.routine-activities-container::-webkit-scrollbar {
  display: none;
}

.routine-activity {
  margin: auto;
  margin-bottom: 10px;
}

.logout-bttn {
  color: white;
  background-color: rgb(177, 7, 7);
  border: 2px solid white;
}

.form-container {
  display: flex;
}

.form-field {
  width: 200px;
  border-radius: 5px;
  margin: auto;
}

.form-bttn{
  width: 100px;
  margin: auto;
}

.red-bttn {
  background-color: rgb(177, 7, 7);
  color: white;
  border: 2px solid white;
}

.my-routines {
  width: 400px;
}

.zero-color {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 3px solid white;
  background-color: #71241f;
  margin: 15px;
  text-align: center;
  padding: .5%;
  width: 250px;
  height: 125px;
  justify-content: space-evenly;
  border-radius: 8px;
}

.one-color {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 3px solid white;
  background-color: #4f3f33;
  margin: 15px;
  text-align: center;
  padding: .5%;
  width: 250px;
  height: 125px;
  justify-content: space-evenly;
  border-radius: 8px;
}

.two-color {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 3px solid white;
  background-color: gray;
  margin: 15px;
  text-align: center;
  padding: .5%;
  width: 250px;
  height: 125px;
  justify-content: space-evenly;
  border-radius: 8px;
}

.three-color {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 3px solid white;
  background-color: #c49f3d;
  margin: 15px;
  text-align: center;
  padding: .5%;
  width: 250px;
  height: 125px;
  justify-content: space-evenly;
  border-radius: 8px;
}

.four-color {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 3px solid white;
  background-color: #ceae83;
  margin: 15px;
  text-align: center;
  padding: .5%;
  width: 250px;
  height: 125px;
  justify-content: space-evenly;
  border-radius: 8px;
}

.default-color {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 3px solid white;
  background-color: #c49f3d;
  margin: 15px;
  text-align: center;
  padding: .5%;
  width: 250px;
  height: 125px;
  justify-content: space-evenly;
  border-radius: 8px;
}

.zero-color a {
  font-family: 'Oswald';
  text-decoration: none;
}

.one-color a {
  font-family: 'Oswald';
  text-decoration: none;
}

.two-color a {
  font-family: 'Oswald';
  text-decoration: none;
}

.three-color a {
  font-family: 'Oswald';
  text-decoration: none;
}

.four-color a {
  font-family: 'Oswald';
  text-decoration: none;
}

.preview-item-name {
  font-family: 'Oswald';
  text-decoration: none;
  font-size: x-large;
}