/* Mobile (Iphone 12 Pro)*/
 @media screen and (max-width: 391px) {
   body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     outline: none;
     border: none;
     text-decoration: none;
     position: relative;
     background: #FFEED6;
   }

   p {
     padding: 3px;
     text-align: justify;
     background: #FDDC9E;
     border: 2px solid hsl(0, 0%, 0%);
     border-radius: 16px;
     font-size: 12px;
     transition: all 0.2s ease-in-out;
   }

   p:hover {
     background: #F2C269;
   }

   .page-wrapper {
     left: 5px;
     position: absolute;
     width: 40%;
     height: 100%;
     background: #FFEED6;
   }

   div.page-wrapper nav div.nav-logo-title img {
     position: absolute;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/PWPHkf1/image-1.png');
     background-repeat: no-repeat;
     width: 33px;
     top: -0.5px;
   }

   .nav-logo-title {
     z-index: 999;
     position: fixed;
     padding: 3.7px;
     width: 98.1%;
     height: 18.5px;
     left: 0px;
     top: 0px;
     background: #F5D396;
     border: 2px solid #F2C269;
     opacity: 90%;
   }

   .nav-logo-title a[href="#header"] {
     position: absolute;
     top: 5.9px;
     left: 44.4px;
     font-size: 13.5px;
   }

   div nav ul li {
     list-style: none;
     padding: 1.85px;
     color: #F4E6CC;
   }

   a {
     text-decoration: none;
     color: black;
   }

   nav ul li a[href="#header"] {
     font-size: 6px;
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
     padding: 2px;
     width: 25px;
     height: 15px;
     left: 225px;
     top: 5.5px;
     text-align: center;
     background: #F2C269;
     border: 2px solid #F4E6CC;
     border-radius: 2px;
     transition: all 0.2s ease-in-out;
   }

   nav a[href="#content"] {
     font-size: 6px;
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
     padding: 2px;
     width: 25px;
     height: 15px;
     left: 255px;
     top: 5.5px;
     text-align: center;
     background: #F2C269;
     border: 2px solid #F4E6CC;
     border-radius: 2px;
     transition: all 0.2s ease-in-out;
   }

   nav a[href="#articles"] {
     font-size: 6px;
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
     padding: 2px;
     width: 25px;
     height: 15px;
     left: 285px;
     top: 5.5px;
     text-align: center;
     background: #F2C269;
     border: 2px solid #F4E6CC;
     border-radius: 2px;
     transition: all 0.2s ease-in-out;
   }

   nav a[href="#creativity"] {
     font-size: 5px;
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
     padding: 2px;
     width: 25px;
     height: 15px;
     left: 315px;
     top: 5.5px;
     text-align: center;
     background: #F2C269;
     border: 2px solid #F4E6CC;
     border-radius: 2px;
     transition: all 0.2s ease-in-out;
   }

   nav ul li a[href="#header"]:hover {
     background: #FFDE47;
     color: red;
     transform: scale(1.1);
   }

   nav a[href="#content"]:hover {
     background: #FFDE47;
     color: red;
     transform: scale(1.1);
   }

   nav a[href="#articles"]:hover {
     background: #FFDE47;
     color: red;
     transform: scale(1.1);
   }

   nav a[href="#creativity"]:hover {
     background: #FFDE47;
     color: red;
     transform: scale(1.1);
   }

   aside {
     z-index: 5;
     box-sizing: border-box;
     position: absolute;
     left: 190px;
     top: 65px;
     background-color: #F9D085;
     border: 4px solid #F2C269;
     height: 230px;
     width: 130px;
     border-radius: 50px;
   }

   aside h2 {
     margin-top: 10px;
     margin-left: 23px;
     font-size: 17px;
   }
aside ul li{
  font-size: 12px;
}
   div.articles table tr.row-first td.article img[alt="Article 1"] {
     position: absolute;
     left: 265px;
     top: 25.5px;
     text-indent: 100%;
     transform: rotate(25deg);
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/T4SyWqf/image-4.png');
     background-repeat: no-repeat;
     width: 70px;
   }

   div.articles table tr.row-first td.article img[alt="Article 2"] {
     z-index: 1;
     position: absolute;
     left: 160px;
     top: 1380px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/1n5vjxR/image-5.png');
     background-repeat: no-repeat;
     width: 210px;
   }

   div.articles table tr.row-first td.article img[alt="Article 3"] {
     position: absolute;
     left: 155px;
     top: 500px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/3zxmJhS/media-7.png');
     background-repeat: no-repeat;
     width: 180px;
   }

   div.articles table tr.row-first td.article h3 {
     position: absolute;
     margin-left: 10px;
     margin-top: 40px;
     width: 110px;

   }

   div.articles table tr.row-first td.article p {
     margin-top: 150px;
     margin-left: 1px;
     width: 100px;
     height: 300px;
   }

   div.articles table tr.row-first td.article a[href="#"] {
     margin-left: 14px;
     text-decoration: underline;
     background-color: #FDDC9E;
     border-radius: 16px;
     padding: 2px;
   }

   tr.row-second td.article-long h3 {
     margin-top: 100px;
     width: 200px;
   }

   tr.row-second td.article-long p {
     width: 200px;
     height: 170px;
     font-family: 'Inter';
     font-style: normal;
     border-radius: 16px;
   }

   tr.row-second td img {
     position: absolute;
     left: 200px;
     top: 2507px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/s1QnphL/Baby-Fight.png');
     background-repeat: no-repeat;
     width: 130px;
   }

   div.creativity div.creativity-wrapper div.mini-one img {
     position: absolute;
     left: 155px;
     top: 2880px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/w74qJdz/image-3.png');
     background-repeat: no-repeat;
     width: 180px;
   }

   div.creativity div.creativity-wrapper div.mini-two img {
     position: absolute;
     left: 180px;
     top: 3350px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/r35qshy/image-removebg-preview-1.png');
     background-repeat: no-repeat;
     width: 150px;
   }
   div.creativity div.creativity-wrapper div.mini-three img {
    position: absolute;
    left: 160px;
    top: 3850px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    content: url('https://i.ibb.co/WWzXmw0/media.png');
    background-repeat: no-repeat;
    width: 170px;
  }

   div.creativity div.creativity-wrapper div.mini-four img {
     z-index: 0;
     position: absolute;
     left: 160px;
     top: 4463px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/prYCw5R/media-8.png');
     background-repeat: no-repeat;
     width: 170px;
   }


   .footer-form {
     background-color: #F9D085;
     border: black;
     border-radius: 16px;
   }

   .footer-form p {
     background: none;
     border: none;
   }

   footer div.footer-credit {
     background-color: #F2C269;
     font-size: 50%;
   }
   footer div.footer-form input[type="text"]{
    width: 140px;
   }
 }

 /* Desktop (NestHub) */

 @media screen and (min-width: 391px) {

   body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     outline: none;
     border: none;
     text-decoration: none;
     position: relative;
     background: #FFEED6;
   }

   .page-wrapper {
     position: absolute;
     width: 100%;
     height: 100%;
     background: #FFEED6;
   }

   div.page-wrapper nav div.nav-logo-title img {
     position: absolute;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/PWPHkf1/image-1.png');
     background-repeat: no-repeat;
     width: 90px;
     top: -0.5px;
   }

   .nav-logo-title {
     z-index: 999;
     position: fixed;
     padding: 10px;
     width: 98.1%;
     height: 50px;
     left: 0px;
     top: 0px;
     background: #F5D396;
     border: 4px solid #F2C269;
     opacity: 90%;
   }

   .nav-logo-title a[href="#header"] {
     position: absolute;
     top: 8px;
     left: 120px;
     font-size: 50px;
   }

   div nav ul li {
     list-style: none;
     padding: 5px;
     color: #F4E6CC;
   }

   a {
     text-decoration: none;
     color: black;
   }

   nav ul li a[href="#header"] {
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
     padding: 7px;
     width: 87px;
     height: 42px;
     left: 900px;
     top: 15px;
     text-align: center;
     background: #F2C269;
     border: 2px solid #F4E6CC;
     border-radius: 6px;
     transition: all 0.2s ease-in-out;
   }

   nav ul li a[href="#header"]:hover {
     background: #FFDE47;
     color: red;
     transform: scale(1.1);

   }

   nav a[href="#content"]:hover {
     background: #FFDE47;
     color: red;
     transform: scale(1.1);
   }

   nav a[href="#articles"]:hover {
     background: #FFDE47;
     color: red;
     transform: scale(1.1);
   }

   nav a[href="#creativity"]:hover {
     background: #FFDE47;
     color: red;
     transform: scale(1.1);
   }

   nav a[href="#content"] {
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
     padding: 7px;
     width: 87px;
     height: 42px;
     left: 1050px;
     top: 15px;
     background: #F2C269;
     border: 2px solid #F4E6CC;
     border-radius: 6px;
     text-align: center;
     transition: all 0.2s ease-in-out;
   }

   nav a[href="#articles"] {
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
     text-align: center;
     padding: 7px;
     width: 87px;
     height: 42px;
     left: 1200px;
     top: 15px;
     background: #F2C269;
     border: 2px solid #F4E6CC;
     border-radius: 6px;
     transition: all 0.2s ease-in-out
   }

   nav a[href="#creativity"] {
     z-index: 1000;
     position: fixed;
     box-sizing: border-box;
     padding: 7px;
     text-align: center;
     width: 87px;
     height: 42px;
     left: 1350px;
     top: 15px;
     background: #F2C269;
     border: 2px solid #F4E6CC;
     border-radius: 6px;
     transition: all 0.2s ease-in-out
   }

   section[id="header"] {
     z-index: 30;
     position: absolute;
     left: 30px;
   }

   .header-texts h1 {
     margin-top: 15px;
     margin-left: -20px;
   }

   .header-texts h3 {
     box-sizing: border-box;
     text-align: center;
     padding: 5px;
     width: 670px;
     height: 40px;
     background: #F9D085;
     border: 4px solid #F2C269;
     border-radius: 74px;
   }

   div.header-texts p {
     width: 670px;
     height: 75px;
     left: 25px;
     top: 292px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-size: 14px;
     line-height: 23px;
     text-align: justify;
     padding: 5px;
     color: #000000;
     background: #FDDC9E;
     border: 2px solid #000000;
     border-radius: 16px;
     transition: all 0.2s ease-in-out
   }

   div.header-texts p:hover {
     background: #F2C269;
     transform: scale(1);
   }

   div.content-first {
     z-index: 5;
     position: absolute;
     top: 300px;
     left: 30px;
   }

   div.content-first p {
     width: 670px;
     height: 120px;
     left: 25px;
     top: 292px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-size: 14px;
     line-height: 23px;
     text-align: justify;
     padding: 5px;
     color: #000000;
     background: #FDDC9E;
     border: 2px solid #000000;
     border-radius: 16px;
     transition: all 0.2s ease-in-out
   }

   div.content-first p:hover {
     background: #F2C269;
     transform: scale(1);
   }

   div.content-second {
     position: absolute;
     z-index: 10;
     padding: 70px;
     margin-left: 340px;
     margin-top: 570px;
     transition: all 0.2s ease-in-out
   }

   div.content-second:hover {
     text-decoration: solid 2px;
   }

   div.content-second {
     width: 670px;
     text-align: center;
   }

   div.content-second h4 {
     font-size: 18px;
     padding: 5px;
     box-sizing: border-box;
     text-align: center;
     padding: 5px;
     width: 670px;
     height: 40px;
     background: #F9D085;
     border: 4px solid #F2C269;
     border-radius: 74px;
   }

   div.content-second p {
     width: 670px;
     height: 132px;
     left: 25px;
     top: 292px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-size: 14px;
     line-height: 23px;
     text-align: justify;
     padding: 5px;
     color: #000000;
     background: #FDDC9E;
     border: 2px solid #000000;
     border-radius: 16px;
   }

   div.content-second p:hover {
     background: #F2C269;
     transform: scale(1.1);
   }

   aside {
     z-index: 5;
     box-sizing: border-box;
     position: absolute;
     left: 1100px;
     top: 225px;
     background-color: #F9D085;
     border: 4px solid #F2C269;
     height: 400px;
     width: 300px;
     border-radius: 60px;
   }

   aside h2 {
     margin-top: 10px;
     margin-left: 23px;
     font-size: 40px;
   }

   aside ul li a {
     background-color: #F9D085;
     transition: all 0.2s ease-in-out
   }

   aside ul li a:hover {
     background-color: #F9D085;
     color: blue;
     text-decoration: underline;
     transform: scale(1.1);
   }

   div.articles[id="articles"] {
     padding-top: 755px;
     transition: all 0.2s ease-in-out
   }

   div.articles table tr.row-first td.article img[alt="Article 1"] {
     position: absolute;
     left: 1285px;
     top: 105.5px;
     text-indent: 100%;
     transform: rotate(13deg);
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/T4SyWqf/image-4.png');
     background-repeat: no-repeat;
     width: 140px;
   }

   div.articles table tr.row-first td.article img[alt="Article 2"] {
     z-index: 3;
     position: absolute;
     left: 41px;
     top: 980px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/7Cv1W01/media-6.png');
     background-repeat: no-repeat;
     width: 1300px;
   }

   div.articles table tr.row-first td.article img[alt="Article 3"] {
     position: absolute;
     left: 720px;
     top: 130px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/3zxmJhS/media-7.png');
     background-repeat: no-repeat;
     width: 370px;
     height: 500px;
   }

   div.articles table tr.row-first td.article h3 {
     position: absolute;
     margin-left: 35px;
     margin-top: -10px;

   }

   div.articles[id="articles"] {
     margin-top: 575px;
   }

   div.articles table tr.row-first td.article a[href="#"] {
     position: absolute;
     margin-top: 1598px;
     margin-left: 45px;
     text-decoration: underline;
     background-color: #FDDC9E;
     border-radius: 16px;
     padding: 2px;
   }

   div.articles table tr.row-first td.article p {
     width: 400px;
     height: 160px;
     margin-left: 30px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-size: 14px;
     line-height: 23px;
     text-align: justify;
     padding: 10px;
     color: #000000;
     background: #FDDC9E;
     border: 2px solid #000000;
     border-radius: 16px;
     transition: all 0.2s ease-in-out;
   }

   div.articles table tr.row-first td.article p:hover {
     background: #F2C269;
     transform: scale(1.1);
   }

   div.articles table tr.row-first td.article a {
     position: relative;
     margin-left: 40px;
     top: -40px;
     font-size: 15px;
     transition: all 0.2s ease-in-out;
   }

   div.articles table tr.row-first td.article a:hover {
     background: #F2C269;
     transform: scale(1.05);
   }

   tr.row-second td img {
     position: absolute;
     left: 640px;
     top: 1707px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/s1QnphL/Baby-Fight.png');
     background-repeat: no-repeat;
     width: 180px;
   }

   tr.row-second td.article-long h3 {
     margin-top: 70px;
     margin-left: 453px;
     text-align: center;
     background-color: #F9D085;
     border: 4px solid #F2C269;
     border-radius: 20px;
   }

   tr.row-second td.article-long p {
     position: absolute;
     width: 670px;
     height: 90px;
     left: 50px;
     top: 1850px;
     margin-left: 350px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-size: 14px;
     line-height: 23px;
     text-align: justify;
     padding: 5px;
     color: #000000;
     background: #FDDC9E;
     border: 2px solid #000000;
     border-radius: 16px;
     transition: all 0.2s ease-in-out;
   }

   tr.row-second td.article-long p:hover {
     background: #F2C269;
     transform: scale(1.1);
   }

   div.creativity {
     padding: 100px;
     margin-left: 320px;
     margin-top: 200px;
   }

   div.creativity h2 {
     width: 670px;
     text-align: center;
     background-color: #F9D085;
     border: 4px solid #F2C269;
     border-radius: 20px;
   }

   div.creativity p {
     padding: 40px;
     width: 670px;
     height: 90px;
     left: 25px;
     top: 292px;
     font-family: 'Inter';
     font-style: normal;
     font-weight: 300;
     font-size: 14px;
     line-height: 23px;
     text-align: justify;
     padding: 5px;
     color: #000000;
     background: #FDDC9E;
     border: 2px solid #000000;
     border-radius: 16px;
   }

   div.creativity div.creativity-wrapper div.mini-one img {
     position: absolute;
     left: 237px;
     top: 2050px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/w74qJdz/image-3.png');
     background-repeat: no-repeat;
     width: 160px;
   }

   div.creativity div.creativity-wrapper div.mini-two img {
     position: absolute;
     left: 1120px;
     top: 2250px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/r35qshy/image-removebg-preview-1.png');
     background-repeat: no-repeat;
     width: 150px;
   }

   div.creativity div.creativity-wrapper div.mini-content:hover {
     transform: scale(1.1);
   }

   div.creativity div.creativity-wrapper div.mini-content p:hover {
     background: #F2C269;
   }

   div.creativity div.creativity-wrapper div.mini-three img {
     position: absolute;
     left: 240px;
     top: 2580px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/WWzXmw0/media.png');
     background-repeat: no-repeat;
     width: 140px;
   }

   footer div.footer-logo h3 {
     text-align: center;
     box-sizing: border-box;
     padding: 5px;
     height: 40px;
     background: #F9D085;
     border: 4px solid #F2C269;
     border-radius: 74px;
   }

   footer div.footer-logo p {
     margin-left: 590px;
     font-family: 'Inter';
     font-style: normal;
     font-size: 14px;
     line-height: 23px;
     text-align: center;
     padding: 5px;
     color: #000000;
     background: #FDDC9E;
     border: 2px solid #000000;
     border-radius: 16px;
     width: 250px;
   }

   footer div.footer-form {
     z-index: 100;
     position: absolute;
     margin-left: 590px;
     font-family: 'Inter';
     font-style: normal;
     font-size: 14px;
     line-height: 23px;
     text-align: left;
     padding: 5px;
     color: #000000;
     background: #FDDC9E;
     border: 2px solid #000000;
     border-radius: 16px;
     width: 250px;
   }

   div.creativity div.creativity-wrapper div.mini-four img {
     z-index: 10;
     position: absolute;
     left: 350px;
     top: 3080px;
     text-indent: 100%;
     white-space: nowrap;
     overflow: hidden;
     content: url('https://i.ibb.co/Cpjsnb0/media-2.png');
     background-repeat: no-repeat;
     width: 640px;
   }

   footer div.footer-credit {
     margin-top: 330px;
     background-color: #F2C269;
     width: 100%;
     font-size: 100%;
     height: 50%;
   }
 }