html, body{width: 100%;height: 100%;margin: 0;background-image: url('images/backgrounds/cross_pattern_bckg.png');background-size: 7%;background-position: 0.8% 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%}.about-area{position: absolute;width: 100%;height: 100%;margin-top: 40%}.image{position: absolute;background-image: url('images/my_photo.jpg');background-size: 100%;width: 620px;height: 620px;margin: 0 0 0 17.5%;border-radius: 1000px;opacity: 0;transform: scale(0);animation: image-scale .7s .7s forwards}.text{font-family: 'Quicksand', sans-serif;font-weight: 430;margin-top: 0;text-align: center;color: #000000}.title{font-family: 'Poppins', sans-serif;font-style: normal;font-weight: 600;font-size: 96px;text-shadow: -6px 6px 0px #FF9423}.subtitle{font-family: 'Quicksand', sans-serif;font-style: normal;font-weight: 600;font-size: 60px}.title-area{position: absolute;width: 100%;height: 7%;opacity: 0;margin: 68% 0 0 0;animation: title-down 1s 1.3s forwards}.sub-area{position: absolute;width: 60%;height: 5%;margin: 82% 0 0 19.7%;opacity: 0;animation: title-down 1s 1.7s forwards}.p{width: 80%;height: 28%;margin: 0 0 0 10%;padding-top: 5%}.text1{font-size: 40px}.p1{margin-top: 95%}.p2{height: 25%}.effect1{opacity: 0;animation: show-text .9s 2.3s forwards}.effect2{opacity: 0;animation: show-text .9s 2.7s forwards}.effect3{opacity: 0;animation: show-text .9s 3.2s forwards}.effect4{opacity: 0;animation: show-text .9s 3.6s forwards}.line{width: 0%;height: 0.5%;margin-top: 2%}.red{background-color: #FF3523;animation: width 0.5s 3.8s forwards}.orange{background-color: #FF5B23;animation: width 0.5s 4.2s forwards}.yellow{background-color: #FF9423;animation: width 0.5s 4.6s forwards}#footer{position: absolute;width: 100%;height: 7%;margin-top: 6%;opacity: 0;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}@keyframes button-scale{0%{transform:scale(0);opacity: 0}100%{transform:scale(1);opacity: 1}}@keyframes image-scale{0%{transform:scale(0);opacity: 0}100%{transform:scale(1);opacity: 1}}@keyframes title-down{0%{transform: translateY(-300px);opacity: 0}100%{transform: translateY(0px);opacity: 1}}@keyframes show-text{0%{transform: translateY(-300px);opacity: 0}100%{transform: translateY(0px);opacity: 1}}@keyframes width{0%{width: 0%}100%{width: 100%}}@keyframes opacity{0%{opacity: 0}100%{opacity: 1}}@media (min-width:1281px){html, body{width: 100%;height: 100%;margin: 0;background-image: url('images/backgrounds/cross_pattern_bckg.png');background-size: 4%;background-position: 0.8% 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.3%;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)}.about-area{position: absolute;width: 100%;height: 250%;margin: 10% 0 0 0}.image{position: absolute;background-image: url('images/my_photo.jpg');background-size: 100%;width: 346px;height: 346px;margin: 0 0 0 37%;border-radius: 1000px;opacity: 0;transform: scale(0);animation: image-scale .7s .7s forwards}.text{font-family: 'Quicksand', sans-serif;font-weight: 430;margin-top: 0;text-align: center;color: #000000}.title{font-family: 'Poppins', sans-serif;font-style: normal;font-weight: 600;font-size: 64px;text-shadow: -4px 4px 0px #FF9423}.subtitle{font-family: 'Quicksand', sans-serif;font-style: normal;font-weight: 600;font-size: 24px}.title-area{position: absolute;width: 82%;height: 10%;opacity: 0;margin: 27% 0 0 8.5%;animation: title-down 1s 1.3s forwards}.sub-area{position: absolute;width: 60%;height: 5%;margin: 34% 0 0 19.7%;opacity: 0;animation: title-down 1s 1.7s forwards}.p{width: 40%;height: 12%;margin: 0 0 0 30%;padding-top: 3%}.text1{font-size: 25px}.line{display: none}.p1{margin-top: 37%}#footer{position: absolute;width: 100%;height: 30px;margin: 7% 0 0 0;opacity: 0;animation: opacity 0.5s 0.7s forwards}#footer-text{font-family: 'Quicksand', sans-serif;font-style: normal;font-weight: normal;font-size: 19px;margin-top: 0;margin-bottom: 0;text-align: center;color: #000000}@keyframes button-opc{0%{opacity: 0}100%{opacity: 1}}@keyframes image-scale{0%{transform:scale(0);opacity: 0}100%{transform:scale(1);opacity: 1}}@keyframes title-down{0%{transform: translateY(-300px);opacity: 0}100%{transform: translateY(0px);opacity: 1}}@keyframes show-text{0%{transform: translateY(-300px);opacity: 0}100%{transform: translateY(0px);opacity: 1}}}