@import url("./icomoon/iconfonts.css");

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
  font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
}

.quotes__heading1 {
  font-weight: 500;
  font-size: 3rem;
}

.quotes__lambda {
  width: 25px;
  height: 25px;
  display: inline-block;
  transform: translateY(10px);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='-3.02291033 -.22032094 420.92291033 433.54032094' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m208.45 227.89c-1.59 2.26-2.93 4.12-4.22 6q-30.86 45.42-61.7 90.83-28.69 42.24-57.44 84.43a3.88 3.88 0 0 1 -2.73 1.59q-40.59-.35-81.16-.88c-.3 0-.61-.09-1.2-.18a14.44 14.44 0 0 1 .76-1.65q28.31-43.89 56.62-87.76 25.11-38.88 50.25-77.74 27.86-43.18 55.69-86.42c2.74-4.25 5.59-8.42 8.19-12.75a5.26 5.26 0 0 0 .56-3.83c-5-15.94-10.1-31.84-15.19-47.74-2.18-6.81-4.46-13.58-6.5-20.43-.66-2.2-1.75-2.87-4-2.86-17 .07-33.9.05-50.85.05-3.22 0-3.23 0-3.23-3.18 0-20.84 0-41.68-.06-62.52 0-2.32.76-2.84 2.94-2.84q51.19.09 102.4 0a3.29 3.29 0 0 1 3.6 2.43q27 67.91 54 135.77 31.5 79.14 63 158.3c6.52 16.38 13.09 32.75 19.54 49.17.77 2 1.57 2.38 3.59 1.76 17.89-5.53 35.82-10.91 53.7-16.45 2.25-.7 3.07-.23 3.77 2 6.1 19.17 12.32 38.3 18.5 57.45.21.66.37 1.33.62 2.25-1.28.47-2.48 1-3.71 1.34q-61 19.33-121.93 38.68c-1.94.61-2.52-.05-3.17-1.68q-18.61-47.16-37.31-94.28-18.29-46.14-36.6-92.28c-1.83-4.62-3.63-9.26-5.46-13.88-.29-.79-.69-1.48-1.27-2.7z' fill='%23fa7e14'/%3E%3C/svg%3E");
}

.quotes__nodejs {
  width: 25px;
  height: 28px;
  display: inline-block;
  transform: translateY(10px);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 256 282' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet'%3E%3Cg fill='%233a9422'%3E%3Cpath d='M116.504 3.58c6.962-3.985 16.03-4.003 22.986 0 34.995 19.774 70.001 39.517 104.99 59.303 6.581 3.707 10.983 11.031 10.916 18.614v118.968c.049 7.897-4.788 15.396-11.731 19.019-34.88 19.665-69.742 39.354-104.616 59.019-7.106 4.063-16.356 3.75-23.24-.646-10.457-6.062-20.932-12.094-31.39-18.15-2.137-1.274-4.546-2.288-6.055-4.36 1.334-1.798 3.719-2.022 5.657-2.807 4.365-1.388 8.374-3.616 12.384-5.778 1.014-.694 2.252-.428 3.224.193 8.942 5.127 17.805 10.403 26.777 15.481 1.914 1.105 3.852-.362 5.488-1.274 34.228-19.345 68.498-38.617 102.72-57.968 1.268-.61 1.969-1.956 1.866-3.345.024-39.245.006-78.497.012-117.742.145-1.576-.767-3.025-2.192-3.67-34.759-19.575-69.5-39.18-104.253-58.76a3.621 3.621 0 0 0-4.094-.006C91.2 39.257 56.465 58.88 21.712 78.454c-1.42.646-2.373 2.071-2.204 3.653.006 39.245 0 78.497 0 117.748a3.329 3.329 0 0 0 1.89 3.303c9.274 5.259 18.56 10.481 27.84 15.722 5.228 2.814 11.647 4.486 17.407 2.33 5.083-1.823 8.646-7.01 8.549-12.407.048-39.016-.024-78.038.036-117.048-.127-1.732 1.516-3.163 3.2-3 4.456-.03 8.918-.06 13.374.012 1.86-.042 3.14 1.823 2.91 3.568-.018 39.263.048 78.527-.03 117.79.012 10.464-4.287 21.85-13.966 26.97-11.924 6.177-26.662 4.867-38.442-1.056-10.198-5.09-19.93-11.097-29.947-16.55C5.368 215.886.555 208.357.604 200.466V81.497c-.073-7.74 4.504-15.197 11.29-18.85C46.768 42.966 81.636 23.27 116.504 3.58z'/%3E%3Cpath d='M146.928 85.99c15.21-.979 31.493-.58 45.18 6.913 10.597 5.742 16.472 17.793 16.659 29.566-.296 1.588-1.956 2.464-3.472 2.355-4.413-.006-8.827.06-13.24-.03-1.872.072-2.96-1.654-3.195-3.309-1.268-5.633-4.34-11.212-9.642-13.929-8.139-4.075-17.576-3.87-26.451-3.785-6.479.344-13.446.905-18.935 4.715-4.214 2.886-5.494 8.712-3.99 13.404 1.418 3.369 5.307 4.456 8.489 5.458 18.33 4.794 37.754 4.317 55.734 10.626 7.444 2.572 14.726 7.572 17.274 15.366 3.333 10.446 1.872 22.932-5.56 31.318-6.027 6.901-14.805 10.657-23.56 12.697-11.647 2.597-23.734 2.663-35.562 1.51-11.122-1.268-22.696-4.19-31.282-11.768-7.342-6.375-10.928-16.308-10.572-25.895.085-1.619 1.697-2.748 3.248-2.615 4.444-.036 8.888-.048 13.332.006 1.775-.127 3.091 1.407 3.182 3.08.82 5.367 2.837 11 7.517 14.182 9.032 5.827 20.365 5.428 30.707 5.591 8.568-.38 18.186-.495 25.178-6.158 3.689-3.23 4.782-8.634 3.785-13.283-1.08-3.925-5.186-5.754-8.712-6.95-18.095-5.724-37.736-3.647-55.656-10.12-7.275-2.571-14.31-7.432-17.105-14.906-3.9-10.578-2.113-23.662 6.098-31.765 8.006-8.06 19.563-11.164 30.551-12.275z'/%3E%3C/g%3E%3C/svg%3E");
}

.quotes__subheading {
  margin: 0;
}

.quotes__heading4 {
  font-weight: 500;
  font-size: 1.75rem;
  margin: 0;
  margin-top: 0.5rem;
}

.quotes {
  display: flex;
  width: 100vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.quotes__container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 1.5rem 1.5rem;
  width: 80vw;
  margin: 2rem 0;
  background-color: #ecf0f1;
  border-radius: 0.3rem;
}

.make-small {
  font-size: 2rem;
  font-weight: bolder;
}

.quotes__titleImage {
  height: 7rem;
  width: auto;
}

.navigation {
  padding: 0.75rem 1rem;
  height: 3.5rem;
  background-color: rgb(150, 140, 120);
}

.navigation--small {
  font-size: 0.8rem;
  /* font-weight: 100; */
}

.ico-icons {
  font-size: 1.5rem;
  vertical-align:middle;
  display: inline;
}

.navigation__link {
  color: rgb(240, 225, 200);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.navigation__link:hover, 
.navigation__link::selection {
  color: rgb(50, 50, 50);
  position: absolute;
  font-size: large;
  font-weight: 800;
  text-decoration: none;
  text-shadow: 1px 1px 2px white, 0 0 0.1rem yellow, 0 0 0.5rem yellow;
  transform: scale(1.4) translate(16px, 0);
}

.footer {
  position: absolute;
  bottom: 0;
  font-size: 0.85rem;
  width: 100%;
  height: 3.5rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  line-height: 0.1rem;
  background-color: rgb(150, 140, 120);
}

.quotes__wrapper {
  margin: auto;
  font-size: 1.2rem;
  margin-top: 2rem;
  background-image: url(../img/JPG_white-paper-texture.jpg);
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 1.2rem;
  height: auto;
}

#quotes__selected {
  margin: auto;
  font-size: 1.2rem;
  height: auto;
}

#quotes__selectedId {
  font-size: 0.65rem;
  margin-top: 0.5rem;
  text-align: right;
}

#quotes__textcontainer {
  width: 41vw;
  min-width: 100px;
  min-height: 100px;
  padding: 0.5rem;
}

#quotes__author {
  margin-top: 2rem;
  padding: 1rem;
  width: 40vw;
  min-width: 100px;
}

.quotes__create {
  display:flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

button, input[type="submit"] {
  height: 4.5rem;
  width: 7rem;
  /* background-color: rgb(150, 140, 120);  */
  color: black; 
  border: 0px;
  /* border: 2px solid #008CBA; */
  box-shadow: inset 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  border-radius: 0.75rem;
  /* padding: 0.75rem 1.5rem; */
  text-align: center;
  text-decoration: none;
  /* display: inline-block; */
  position: relative;
  font-size: 1.1rem;
  margin: 1rem 0.1rem 0.25rem 0.1rem;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button__randomQuote:hover {
  background-color: #008CBA;
  color: white;
}

/* BOOK */

.button__loading .button__text {
	/* visibility: hidden; */
    display: none;
    opacity: 0;
}

.button__randomQuote.button__loading {
  background: rgba(0, 165, 40, 0.25);
  transition: all 0.66s;
}

:has(.button__loading) .button__image {
  display:block;
  width: 110px;
  height: 60px;
  box-sizing: border-box;
  position: relative;
  border-radius:4px;
  perspective: 450px;
}

/* ----- open book picture ------ */

:has(.button__loading) .button__image:before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  border-radius:3px;
  background: #f5f5f5  no-repeat;
  background-size: 32px 2.75px;
  background-image: 	
              linear-gradient(#ddd 6px, transparent 0),
              linear-gradient(#ddd 6px, transparent 0), 
              linear-gradient(#ddd 6px, transparent 0), 
              linear-gradient(#ddd 6px, transparent 0), 
              linear-gradient(#ddd 6px, transparent 0), 
              linear-gradient(#ddd 6px, transparent 0),
              linear-gradient(#ddd 6px, transparent 0), 
              linear-gradient(#ddd 6px, transparent 0);;

  background-position: 8px 10px, 8px 20px, 8px 30px, 8px 40px, 
              60px 10px, 60px 20px, 60px 30px, 60px 40px;
  box-shadow: 0 0 3px rgba(0,0,0,0.25);
}

/* ----- turning page with animation ---- */

:has(.button__loading) .button__image:after {
  content: '';
      position: absolute;
      width: calc(50% - 2px);
      right: 3px;
      top: 3px;
      bottom: 3px;
      border-radius: 3px;
      background: #fff no-repeat;
      background-size: 32px 3px;
      background-image: 
              linear-gradient(#ddd 6px, transparent 0), 
              linear-gradient(#ddd 6px, transparent 0), 
              linear-gradient(#ddd 6px, transparent 0),
              linear-gradient(#ddd 6px, transparent 0);
      background-position: 40% 10px, 40% 20px, 40%  30px, 40% 40px;
      transform: rotateY(0deg);
      transform-origin: left center;
  animation: paging 2s linear infinite alternate;
}

.footer__container {
  position: absolute;
  bottom: 1.5rem;
  color: white;
  margin-left: 0.5rem;
}

.footer__authorUrl {
  text-decoration: underline dashed gainsboro;
  text-underline-offset: 0.25rem;
  color: white;
}

.footer__authorUrl:hover {
  color: orange;
  text-decoration: underline dashed orangered;
  text-underline-offset: 0.25rem;
}

@keyframes paging {
  to {
      transform: rotateY( -180deg );
  }
}


/* 
 * ================================================================================ 
 *  Media queries
 * ================================================================================ */


 @media (max-width: 500px) {

  .quotes__container {
    padding: 0.75rem 0.75rem;
    margin-top: 0.75rem;
  }

  .navigation{
    padding: 0.25rem 1rem;
  }

  .quotes__titleImage {
    height: 5rem;
    vertical-align: center;
    width: auto;
    display: inline-block;
  }

  .quotes__heading1 {
    font-weight: 500;
    font-size: 2rem;
    display: inline-block;
  }

  .quotes__heading4 {
    font-weight: 400;
    font-size: 1rem;
  }

  #quotes__selected{
    margin: auto;
    margin-top: 1rem;
    width: 100%;
    font-size: 1rem;
  }

  .footer {
    font-size: 0.75rem;
    padding-top: 0;
    width: 100%;
    height: 2.0rem;
    margin-top: 0rem;
    line-height: 0.1rem;
  }

  .footer__container {
    bottom: 1.0rem;
  }

  #quote {
    width: 250px;
  }
}

@media only screen and (max-device-width: 812px) and (orientation : landscape) {
  
  .navigation {
    padding: 0.25rem 1rem;
  }

  .quotes__container {
    padding: 0.25rem 0.25rem;
    margin-top: 0.5rem;
  }
  
  .quotes__titleImage {
    height: 3.5rem;
    width: auto;
    display: inline-block;
  }

  .quotes__heading1 {
    font-weight: 500;
    font-size: 2rem;
    display: inline-block;
  }

  #quotes__selected {
    margin: auto;
    font-size: 1.0rem;
    margin-top: 1rem;
    width: 95%;
    padding: 0.5rem;
    height: auto;
  }

  .quotes__heading4 {
    display: inline-block;
  }

  button {
    padding: 0.25rem 3rem;
    font-size: 1.0rem;
    margin: 1rem 0.1rem 0.25rem 0.1rem;
  }

  .footer {
    font-size: 0.75rem;
    padding-top: 0;
    width: 100%;
    height: 2.0rem;
    margin-top: 0rem;
    line-height: 0.1rem;
  }
}

.alert {
  display: none;
  position: absolute;
  padding: 1rem;
  background-color: #eca870;
  color: white;
  opacity: 1;
  transition: opacity 1.8s;
}

.the_message {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 2rem;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: red;
}

.alert:has(.closebtn:hover) {
  transition: 0.8s;
  background-color: gainsboro;
}

#author {
  width: 200px;
}