html, body{width: 100%;margin: 0}.button{position: absolute;width: 80%;height: 185px;border-radius: 100px}.top-button{margin: 11% 0 0 9%;background-color: #EAEAEA;transform: scale(0);animation: button-scale 0.5s 0.3s forwards}.button-text{font-family: 'Quicksand', sans-serif;font-style: normal;color: #000000;font-size: 50px;font-style: normal;font-weight: 600;line-height: 1;text-align: center;margin-top: 9%}#portfolio-area{position: absolute;margin-top: 110%;width: 100.7%}.title{font-family: 'Inter', sans-serif;font-style: normal;font-weight: bold;font-size: 130px;line-height: 1.1;text-align: center;color: #000000;margin: 5% 0 0 0;text-shadow: -8px 8px 0px #FF5A4B}.title-area{position: absolute;width: 90%;margin: 35% 0 0 5%;height: 10%;opacity: 0;animation: title 0.7s 0.5s forwards}.text-area{position: absolute;margin: 55% 0 0 5%;width: 90%;height: 25%;opacity: 0;animation: text-opc 0.5s 1s forwards}.text{font-family: 'Quicksand', sans-serif;font-size: 40px;font-weight: 600;text-align: center;font-style: normal;color: #000000}.notes{color: #FF5A4B}.grid-container{width: 100%;display: grid;grid-template-columns: 100.7%}.image-area{margin: 0 0 -1% 0}.images{width: 100.7%;opacity: 0;animation: opacity 0.5s 1.5s forwards}#footer{position: absolute;width: 100%;height: 0.7%;animation: opacity 0.5s 0.7s forwards}#footer-text{font-family: 'Quicksand', sans-serif;font-style: normal;font-weight: normal;font-size: 39px;line-height: 1;margin-top: 6%;text-align: center;color: #000000}.background{display: none;pointer-events: none}@keyframes button-scale{0%{transform:scale(0);opacity: 0}100%{transform:scale(1);opacity: 1}}@keyframes title{0%{transform:translateY(-50px);opacity: 0}100%{transform:translateY(0px);opacity: 1}}@keyframes text-opc{0%{transform:translateY(-50px);opacity: 0}100%{transform:translateY(0px);opacity: 1}}@keyframes opacity{0%{opacity: 0}100%{opacity: 1}}@media (min-width:1281px){html, body{width: 100%;height: 100%;margin: 0}.button{position: absolute;width: 25%;height: 60px;border-radius: 100px}.button-text{font-family: 'Quicksand', sans-serif;font-style: normal;color: #000000;font-size: 18px;font-style: normal;font-weight: 600;line-height: 1;text-align: center;margin-top: 6.7%}.top-button{margin: 2% 0 0 37%;background-color: #EAEAEA;transform: scale(1);opacity: 0;transition: 0.2s;animation: button-opc 0.5s 0.3s forwards}.top-button:hover{transition: 0.2s;transform: scale(1.2)}.title{font-family: 'Inter', sans-serif;font-style: normal;font-weight: bold;font-size: 64px;line-height: 1.1;text-align: center;color: #000000;margin: 5% 0 0 0;text-shadow: -4px 4px 0px #FF5A4B}.title-area{position: absolute;width: 90%;margin: 5% 0 0 4.7%;height: 10%;opacity: 0;animation: title 0.7s 0.5s forwards}.text-area{position: absolute;margin: 15% 0 0 19%;width: 60%;height: 25%;opacity: 0;animation: text-opc 0.5s 1s forwards}.text{font-family: 'Quicksand', sans-serif;font-size: 18px;font-weight: 600;text-align: center;font-style: normal;color: #000000}.notes{color: #FF5A4B}#portfolio-area{position: absolute;margin-top: 26%;width: 100%;height: 170%}.grid-container{position: top;display: grid;width: 100%;height: 100%;margin: 0;grid-template-columns: repeat(5, 20%);grid-template-rows: repeat(4, fit-content)}.image-area{width: fit-content;overflow: hidden}.images{width: 100%;height: 100%;transition: 0.3s;animation: opacity 0.5s 1.8s forwards}.images:hover{cursor: pointer;transition: 0.3s;transform: scale(1.1)}.vertical{height: 140%;margin: -10% 0 0 0}.vertical2{height: 120%;margin: -8% 0 0 0}.horizont{width: 130%;margin: 0 0 0 -17%}.background{display: none;position: fixed;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7);opacity: 0;pointer-events: none}.preview-box{position: fixed;max-width: 760px;width: 100%;height: 90%;margin: 2% 0 0 21%;border-radius: 0px 0px 10px 10px;background-color: #fff;border: 5px solid #375E7A}.title-preview{display: flex;font-family: 'Quicksand', sans-serif;font-size: 20px;color: #FFF;font-weight: normal;margin: 1%}.details{display: flex;align-items: center;padding: 12px 15px 12px 10px;background-color: #375E7A;border-bottom: 4px solid #375E7A}.title-preview p{margin: 0 5px 0 5px}.font-weight{font-weight: 600}.top-icon:hover{animation: rotate360 0.7s ease-in-out forwards}.icon{width: 7%;transition: 0.3s;cursor: pointer}.slide{position: absolute;width: 90%;margin: 27% 0 0 1%}.icon:hover{transition: 0.3s;transform: scale(1.3)}.next{margin: 27% 0 0 93%}.top-icon{position: fixed;width: 3%;margin: -4% 0 0 52%}.img-box{display: flex;width: 100%;height: 80%}.img-box img{display: flex;width: 100%;margin: 5% 0 0 0;object-fit: contain}.show{display: block;pointer-events: auto;opacity: 1;transition: all 0.3s ease}#footer{width: 100%, fit-content;height: 5%;opacity: 0;background-color: #fff;animation: opacity 0.5s 0.7s forwards}#footer-text{font-family: 'Quicksand', sans-serif;;font-style: normal;font-weight: normal;font-size: 19px;text-align: center;margin: 1.3% 0 0 0;color: #000000}@keyframes button-opc{0%{opacity: 0}100%{opacity: 1}}@keyframes rotate360{0%{transform: rotate(0)}100%{transform: rotate(360deg)}}@keyframes opacity{0%{opacity: 0}100%{opacity: 1}}}