@import url(https://fonts.googleapis.com/css2?family=Ubuntu:wght@300display=swap);body,header{flex-direction:column;display:flex}header .input-container input,header .input-container p{color:var(--text-color);margin:6px}:root{--background-color:#e2e2e2;--title-container:#ea8076;--title-color:#ffffff;--block-color:#F4F3F3;--text-color:black;--input-border-color:red;--placeholder-color:#8a8a8a;--ingredient-title-container:#d5d4d4;--ingredient-container:#e2e2e2}:root.dark-mode{--background-color:#001a20;--title-container:#d48c08;--title-color:#F4F3F3;--block-color:#014654;--text-color:#F4F3F3;--placeholder-color:#8a8a8a;--text-background-color:#002A32;--ingredient-title-container:#001418;--ingredient-container:#001a20}html{scroll-behavior:smooth}*{box-sizing:border-box;padding:0;margin:0}body{justify-content:center;align-items:center;text-align:center;background:var(--background-color);font-family:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;min-height:100vh}.toggle-switch{cursor:pointer;position:absolute;top:12px;left:12px;height:30px;width:60px}.toggle-switch .circle-container{cursor:pointer;position:relative;height:30px;width:60px;border-radius:50px;background:#323232;box-shadow:2px 2px 6px 2px rgba(0,0,0,.221);padding:4px;display:flex;align-items:center;justify-content:left;transition:1s}.toggle-switch .circle-container .circle{cursor:pointer;position:absolute;top:50%;left:-10%;transform:translate(40%,-50%);height:26px;width:26px;border-radius:50%;background:#fff;box-shadow:2px 2px 4px 2px rgba(255,255,255,.084);transition:.6s}.toggle-switch .circle-container .circle #sun,.toggle-switch.dark-mode .circle-container .circle #moon{display:none}.toggle-switch .circle-container .circle #moon{position:relative;top:-6%;left:-5%;font-size:18px}.toggle-switch.dark-mode .circle-container{background:#fff}.toggle-switch.dark-mode .circle-container .circle{background:#323232;box-shadow:2px 2px 4px 2px rgba(0,0,0,.16);top:50%;left:44%;transform:translate(10%,-50%)}.toggle-switch.dark-mode .circle-container .circle #sun{display:block;position:relative;font-size:18px;top:-7%;color:#fff}header{box-shadow:2px 2px 2px 2px rgba(102,102,102,.168);min-width:70%;background:var(--block-color);border-radius:15px;margin:24px;padding:6px;justify-content:space-around;align-items:center}.arrowContainer .arrow,.title-container,footer,footer .footer-to-home_arrow{background:var(--title-container)}header .title-container{width:100%}header .input-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%}header .input-container input{padding:4px;background:var(--ingredient-container);border-radius:20px;border:2px solid rgba(128,128,128,.657)}.card,.title-container{border-radius:10px;padding:6px}h1{font-size:30px;font-family:Ubuntu,sans-serif;color:var(--title-color)}input,label,p{color:var(--text-color);font-family:"Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif}input{font-size:12px}input::placeholder{color:var(--placeholder-color)}label,p{font-size:19px}.title-container,h2{color:var(--title-color)}h2{font-size:22px;font-family:Ubuntu,sans-serif}.arrowContainer .arrow,a,a:visited,main{color:var(--text-color)}a,a:visited{text-decoration:none}main{position:relative;flex:1;display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap}.title-container{margin:6px}.card{display:flex;flex-direction:column;justify-content:space-around;align-items:center;background:var(--block-color);box-shadow:2px 2px 12px 2px rgba(0,0,0,.168);width:350px;min-height:300px;margin:12px}.arrowContainer,.card .img-container,.card .title-container{margin:6px;width:100%}.card .title-container{display:flex;justify-content:center;align-items:center}.card .img-container img{height:100%;width:100%}.card .ingredients-and-title-container{position:relative;width:100%;margin:6px;text-align:center}.card .ingredients-and-title-container .ingredients-title-container{display:flex;justify-content:center;align-items:center;height:40px;width:100%;background:var(--ingredient-title-container)}.card .ingredients-and-title-container .ingredients-container{overflow:hidden;filter:blur(2px);max-height:80px;background:var(--ingredient-container);width:100%;display:flex;flex-direction:column;justify-content:baseline;align-items:baseline;transition:max-height .6s ease-in}.arrowContainer,footer .footer-to-home_arrow{justify-content:center;cursor:pointer;display:flex}.card .ingredients-and-title-container .ingredients-container p{width:100%;display:flex;text-align:left;padding:6px}.ingredients-and-title-container.clicked .ingredients-container{max-height:1200px;overflow:none;filter:none}@keyframes arrowAnime{0%,100%{transform:rotate(90deg) scale(1)}50%{transform:rotate(90deg) scale(1.1)}}.arrowContainer{height:40px;align-items:center}.arrowContainer .arrow{cursor:pointer;padding-left:6px;padding-bottom:6px;font-size:40px;width:40px;height:60px;border-radius:12px;border:1px solid #878787;transform:rotate(90deg);transition:.6s}.arrowContainer .arrow.clicked{transform:rotate(-90deg);transition:.5s}.card:hover .arrow{animation:.5s linear infinite arrowAnime}.card:hover .arrow.clicked{animation:none}footer{width:100%;height:120px;margin-top:48px;position:relative}footer .footer-to-home_arrow{position:absolute;height:60px;width:60px;top:0;left:50%;border-radius:50%;border:none;transform:rotate(-90deg) translate(50%,-50%);align-items:center}footer .footer-to-home_arrow span{font-size:40px;padding-bottom:6px;padding-left:24px;color:var(--text-color);display:flex;justify-content:center;align-items:center}footer .logos-container{display:flex;justify-content:center;align-items:center}footer .logos-container .logo-container{margin:12px 24px 6px;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:.1s;z-index:2}footer .logos-container .logo-container img{width:40px}footer .logos-container .logo-container:hover{scale:1.1}footer .mentions-container a,footer .mentions-container p{font-size:14px;color:#fff}@media screen and (max-width:589px){footer{height:200px}}@media screen and (max-width:550px){h1{font-size:24px}h2{font-size:20px}p{font-size:16px}.card{min-height:400px}.card .ingredients-container{height:auto;overflow:none;filter:none}.card:hover{transform:none}}