body {
  background-color: rgb(255, 255, 255);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;
  margin: 0;
  padding: 0;
  font-family: Georgia, 'Times New Roman', Times, serif;
  position: absolute;
  justify-content: center;
  overflow-x: hidden;
  line-height: 1.33;
}

@media (min-width: 768px) {

  * {
    margin: 0;
    padding: 0;
  }

  .page-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  nav {
    background-color: rgb(0, 0, 0);
    opacity: 0.8;
    height: 9vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-logo-title {
    display: flex;
    align-items: center;
    padding-left: 0.5vh;
  }

  .nav-logo-title img {
    height: 5.5vh;
    margin-right: 2vh;
    margin-left: 1.5vh;
    content: url('https://snipstock.com/assets/cdn/png/650221d0d0cba012a423dc1abf3b166f.png');
    filter: invert(100%);
    background-repeat: no-repeat;
  }

  nav div a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 3vh;
    font-weight: bold;
  }

  nav ul {
    list-style: none;
    text-align: right;
  }

  nav li {
    display: inline-block;
  }

  nav ul li a {
    margin-right: 4vh;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 3vh;
    transition: text-decoration 0.3s ease-in-out;
  }

  nav ul li a:hover {
    text-decoration: underline;
  }


  /* HEADER============================================================================ */

  section {
    height: 90vh;
    width: 99vw;
    margin-top: 1vh;
    justify-content: center;
    margin: auto;
    position: absolute;
    background-image: url("https://www.pngmart.com/files/9/Text-Border-Transparent-Background.png");
    background-repeat: no-repeat;
    opacity: 0.8;
    background-size: 100% 100%;
  }

  .header-texts {
    font-size: 4.5vh;
    color: black;
    text-align: center;
    margin: auto;
  }

  section div h1 {
    padding-top: 22vh;
    font-size: 6vw;
    text-shadow: 0 0 3px #ffffff,
      0 0 3px #ffffff,
      0 0 6px rgba(207, 222, 226),
      0 0 19px #ffffff,
      0 0 12px #ffffff,
      0 0 15px #ffffff,
      0 0 18px #ffffff;
    font-weight: bold;
    text-decoration: none;
  }

  section div h3 {
    margin-top: 5vh;
    font-size: 2vw;
  }

  section div p {
    font-size: 1.5vw;
    max-width: 70vw;
    padding-top: 5vh;
    text-align: center;
    margin: auto;
  }

  /* CONTENT-ASIDE============================================================================ */

  .content-aside {
    border-top: 3px dashed black;
    background-color: rgb(233, 235, 240);
    margin-top: 93vh;
    padding-top: 5vh;
    padding-bottom: 5vh;
    width: 100%;
    opacity: 0.8;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  div.content {
    display: inline-block;
    width: 40vw;
  }

  div.content-first,
  div.content-second {
    width: 40vw;
  }

  div.content-aside div div h2 {
    font-size: 5vh;
    padding-bottom: 1%;
    width: 1000px;
    float: left;
  }

  div.content-aside div div h4 {
    font-size: 3vh;
    padding-bottom: 1%;
    width: 1000px;
  }

  div.content-aside div div p {
    font-size: 3vh;
    width: 70vw;
  }

  div.content-aside div div h2,
  h4,
  p {
    margin-left: 5vw;
    margin-bottom: 2vh;
  }

  div.content-second {
    margin-top: 5vh;
  }

  aside {
    display: inline-block;
    position: absolute;
    right: 5vw;
    background-color: rgb(0, 0, 0, 0.1);
    border-radius: 10%;
    padding: 2vw;
    padding-top: 2vh;
    margin-top: 5vh;
    border: 3px solid rgb(0, 0, 0, 0.8);
  }

  aside ul {
    margin-left: 2vw;
  }

  aside h2 {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 3vh;
    margin-bottom: 0.5vh;
    margin-top: 1vh;
    font-weight: bolder;
  }

  aside a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 3vh;
    transition: text-decoration 0.3s ease-in-out;
  }

  aside a:hover {
    text-decoration: underline;
  }

  /* TABLES ====================================================================================== */

  .articles {
    justify-content: center;
    margin: auto;
    margin-top: 0;
    padding-top: 2vh;
    background-color: rgb(233, 235, 240);
    opacity: 0.8;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 5vh;
    padding-bottom: 5vh;
    border-top: 3px dashed black;
  }

  tr.row-first {
    justify-content: center;
    margin: auto;
  }

  tr.row-first h3 {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 4vh;
    margin-bottom: 0.5vh;
    margin-top: 1vh;
    font-weight: bolder;
  }

  tr.row-first p {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 3vh;
    margin-left: 1vw;
    padding-top: 1vh;
  }

  tr.row-first td {
    padding-left: 2vw;
    padding-right: 2vw;
    padding-bottom: 3vh;
    padding-top: 3vh;
    margin-right: 1vw;
    margin-left: 1vw;
    background-color: rgb(0, 0, 0, 0.9);
    border-radius: 10% 10% 10% 10% / 6% 6% 6% 6%;
  }

  img[alt="Article 1"] {
    content: url('https://i.kym-cdn.com/entries/icons/original/000/026/738/future.jpg');
    max-width: 100%;
    height: auto;
    border-radius: 10%;
    margin-bottom: 5vh;
  }

  img[alt="Article 2"] {
    content: url('https://merriam-webster.com/assets/mw/images/article/art-wap-landing-mp-lg/stock%20chart%20with%20arrow%20pointing%20up-8163-4b8d7a9a5a98109077ddcfca6f5e3cca@1x.jpg');
    max-width: 100%;
    height: auto;
    border-radius: 10%;
  }

  img[alt="Article 3"] {
    content: url('https://media.wired.com/photos/5f4ee313bb023d54b55e4e29/4:3/w_1799,h_1349,c_limit/sci-fi-last-lines.jpg');
    max-width: 100%;
    height: auto;
    border-radius: 10%;
    margin-top: 2vh;
  }

  .articles a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-style: italic;
    font-size: 3vh;
    transition: text-decoration 0.3s ease-in-out;
  }

  .articles a:hover {
    text-decoration: underline;
    font-weight: bold;
  }

  table tr.row-second h3 {
    padding-top: 5vh;
    font-size: 4vh;
  }

  table tr.row-second h3,
  table tr.row-second p {
    margin-left: 0;
  }

  table tr.row-second p {
    font-size: 3vh;
    padding-top: 2vh;
  }


  table img[alt="Article 4"] {
    content: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVNhsRujUrbbSWFOBMmHB_thnFcmG2vofrFg&usqp=CAU');
    padding: 0;
    margin-left: 5vw;
  }

  /* CREATIVITY ================================================================================= */

  div.creativity {
    background-color: rgb(233, 235, 240);
    padding-bottom: 5vh;
    padding-left: 5vh;
    padding-right: 5vh;
    opacity: 0.8;
  }

  div.creativity {
    background-color: rgb(233, 235, 240);
    overflow: hidden;
  }

  div.creativity:before,
  div.creativity:after {
    content: "";
    display: table;
  }

  div.creativity:after {
    clear: both;
  }

  div.creativity .container {
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 50px 0;
  }

  .mini-content {
    float: left;
    width: calc((100% - (40vh)) / 4);
    margin-left: 5vh;
    margin-right: 5vh;
  }

  .creativity p {
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    margin-left: 0;
    font-size: 3vh;
    border-right: 3px dashed black;
    border-left: 3px dashed black;
    border-bottom: 3px dashed black;
  }

  .creativity h2 {
    font-size: 4vh;
    padding-bottom: 2vh;
    background-color: rgb(0, 0, 0, 0.9);
    color: white;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-top: 0.5vw;
    border-radius: 8%;
  }

  img[alt="First image"] {
    display: none;
  }

  img[alt="Second image"] {
    display: none;
  }

  img[alt="Third image"] {
    display: none;
  }

  img[alt="Four image"] {
    display: none;
  }

  /* FOOTER ======================================================================================== */

  footer {
    background-color: rgb(0, 0, 0);
    border-top: 3px solid rgb(255, 255, 255);
    height: 100%;
    opacity: 0.8;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    color: white;
  }

  form {
    justify-content: center;
    margin: auto;
  }

  .footer-logo,
  .footer-form,
  .footer-credit {
    padding: 0;
    margin-top: 50%;
    margin: 0;
    float: left;
    width: calc(93vw/3);
    height: 100%;
    padding-left: 1vw;
    padding-right: 1vw;
    padding-top: 2vh;
    padding-bottom: 2vh;
  }

  .footer-form {
    padding-top: 0;
  }

  .footer-form {
    border-right: 3px solid rgb(255, 255, 255);
    border-left: 3px solid rgb(255, 255, 255);
  }

  .footer-logo h3,
  .footer-credit h3 {
    font-size: 4vh;
    margin: 0;
    padding: 0;
  }

  .footer-form p {
    font-size: 4vh;
    font-weight: bold;
    margin-bottom: 2vh;
    margin-top: 2vh;
    margin-left: 0;
  }

  .footer-form label {
    font-size: 3vh;
    margin-bottom: 2vh;
  }

  .footer-form input,
  select {
    font-size: 2.5vh;
  }

  .footer-form button {
    justify-content: center;
    margin: auto;
    margin-top: 2vh;
    font-size: 3vh;
  }


  .footer-logo p {
    font-size: 3vh;
    margin: 0;
  }
}

/* PHONE START============================================================================================= */
/* PHONE START============================================================================================= */
/* PHONE START============================================================================================= */
/* PHONE START============================================================================================= */
/* PHONE START============================================================================================= */

@media (max-width : 767px) {

  * {
    margin: 0;
    padding: 0;
  }

  .page-wrapper {
    width: 100vw;
    margin: 0;
    padding: 0;
  }

  nav {
    background-color: rgb(0, 0, 0);
    opacity: 0.8;
    height: 5vh;
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .nav-logo-title {
    display: flex;
    align-items: center;
    padding-left: 0.5vh;
  }

  .nav-logo-title img {
    height: 4vh;
    margin-right: 1.2vh;
    margin-left: 0.5vh;
    content: url('https://snipstock.com/assets/cdn/png/650221d0d0cba012a423dc1abf3b166f.png');
    filter: invert(100%);
    background-repeat: no-repeat;
  }

  nav div a {
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 2vh;
    font-weight: bold;
  }

  nav ul {
    list-style: none;
    text-align: right;
    width: 110%;
  }

  nav li {
    display: inline-block;
  }

  nav ul li a {
    margin-right: 2vw;
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 4vw;
    transition: text-decoration 0.3s ease-in-out;
  }

  nav ul li a:hover {
    text-decoration: underline;
  }


  /* HEADER============================================================================ */

  section {
    height: 95vh;
    width: 99vw;
    margin-top: 1vh;
    justify-content: center;
    margin: auto;
    position: absolute;
    background-image: url("https://www.pngmart.com/files/9/Text-Border-Transparent-Background.png");
    background-repeat: no-repeat;
    opacity: 0.8;
    background-size: 100% 100%;
  }

  .header-texts {
    font-size: 4.5vh;
    color: black;
    text-align: center;
    margin: auto;
  }

  section div h1 {
    padding-top: 13vh;
    font-size: 16vw;
    text-shadow: 0 0 3px #ffffff,
      0 0 3px #ffffff,
      0 0 6px rgba(207, 222, 226),
      0 0 19px #ffffff,
      0 0 12px #ffffff,
      0 0 15px #ffffff,
      0 0 18px #ffffff;
    font-weight: bold;
    text-decoration: none;
  }

  section div h3 {
    font-size: 7vw;
    width: 85vw;
    text-align: center;
    margin: auto;
    margin-top: 5vh;
  }

  section div p {
    font-size: 5vw;
    max-width: 85vw;
    padding-top: 5vh;
    text-align: center;
    margin: auto;
  }

  /* CONTENT-ASIDE============================================================================ */

  .content-aside {
    border-top: 3px dashed black;
    background-color: rgb(233, 235, 240);
    margin-top: 100vh;
    padding-top: 5vw;
    padding-bottom: 5vw;
    width: 100%;
    opacity: 0.8;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  div.content {
    display: inline-block;
    width: 40vw;
  }

  div.content-first,
  div.content-second {
    width: 40vw;
  }

  div.content-aside div div h2 {
    font-size: 5vh;
    padding-bottom: 1%;
    width: 100vw;
    float: left;
  }

  div.content-aside div div h4 {
    font-size: 6vw;
    padding-bottom: 1%;
    width: 90vw;
  }

  div.content-aside div div p {
    font-size: 5vw;
    width: 90vw;
  }

  div.content-aside div div h2,
  h4,
  p {
    margin-left: 5vw;
    margin-bottom: 2vh;
  }

  div.content-second {
    margin-top: 5vh;
  }

  aside {
    background-color: rgb(0, 0, 0, 0.1);
    border-radius: 10%;
    padding: 2vw;
    border: 3px solid rgb(0, 0, 0, 0.8);
    width: 50%;
    justify-content: center;
    margin: auto;
    margin-top: 1vh;
    margin-bottom: 4vw;
  }

  aside ul {
    margin-left: 5vw;
  }

  aside h2 {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 6vw;
    margin-bottom: 0.5vh;
    margin-top: 1vh;
    font-weight: bolder;
  }

  aside a {
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 5vw;
    transition: text-decoration 0.3s ease-in-out;
  }

  aside a:hover {
    text-decoration: underline;
  }

  /* TABLES ====================================================================================== */

  .articles {
    justify-content: center;
    margin: auto;
    margin-top: 0;
    padding-top: 2vh;
    background-color: rgb(233, 235, 240);
    opacity: 0.8;
    padding-top: 5vh;
    padding-bottom: 5vh;
    border-top: 3px dashed black;
  }
  table {
    width: 100%;
  }

  tr.row-first {
    justify-content: center;
    margin: auto;
  }

  tr.row-first h3 {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 5vw;
    margin-bottom: 0.5vh;
    margin-top: 1vh;
    font-weight: bolder;
  }

  tr.row-first p {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-size: 3vw;
    margin-left: 1vw;
    padding-top: 1vh;
  }

  tr.row-first td {
    padding-left: 1vw;
    padding-right: 1vw;
    padding-bottom: 2vh;
    padding-top: 2vh;
    margin-right: 1vw;
    margin-left: 1vw;
    background-color: rgb(0, 0, 0, 0.9);
    border-radius: 10% 10% 10% 10% / 6% 6% 6% 6%;
  }

  img[alt="Article 1"] {
    content: url('https://i.kym-cdn.com/entries/icons/original/000/026/738/future.jpg');
    max-width: 100%;
    height: auto;
    border-radius: 10%;
    margin-bottom: 5vh;
  }

  img[alt="Article 2"] {
    content: url('https://merriam-webster.com/assets/mw/images/article/art-wap-landing-mp-lg/stock%20chart%20with%20arrow%20pointing%20up-8163-4b8d7a9a5a98109077ddcfca6f5e3cca@1x.jpg');
    max-width: 100%;
    height: auto;
    border-radius: 10%;
  }

  img[alt="Article 3"] {
    content: url('https://media.wired.com/photos/5f4ee313bb023d54b55e4e29/4:3/w_1799,h_1349,c_limit/sci-fi-last-lines.jpg');
    max-width: 100%;
    height: auto;
    border-radius: 10%;
    margin-top: 2vh;
  }

  .articles a {
    color: rgb(255, 255, 255);
    text-decoration: none;
    font-style: italic;
    font-size: 3vw;
    transition: text-decoration 0.3s ease-in-out;
  }

  .articles a:hover {
    text-decoration: underline;
    font-weight: bold;
  }

  table tr.row-second h3 {
    padding-top: 5vh;
    font-size: 5vw;
  }

  table tr.row-second h3,
  table tr.row-second p {
    margin-left: 2.5vh;
  }

  table tr.row-second p {
    font-size: 3vw;
    padding-top: 2vh;
  }


  table img[alt="Article 4"] {
    content: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTVNhsRujUrbbSWFOBMmHB_thnFcmG2vofrFg&usqp=CAU');
    max-width: 86%;
  }

  /* CREATIVITY ================================================================================= */

  div.creativity {
    background-color: rgb(233, 235, 240);
    padding-bottom: 5vh;
    /* padding-left: 5vh;
    padding-right: 5vh; */
    opacity: 0.8;
  }

  div.creativity {
    background-color: rgb(233, 235, 240);
    overflow: hidden;
  }

  div.creativity:before,
  div.creativity:after {
    content: "";
    display: table;
  }

  div.creativity:after {
    clear: both;
  }

  div.creativity .container {
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 50px 0;
  }

  .mini-content {
    float: left;
    width: calc(100%-5vh);
    margin-left: 2.5vh;
    margin-right: 2.5vh;
  }

  .creativity p {
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    margin-left: 0;
    font-size: 5vw;
    border-right: 3px dashed black;
    border-left: 3px dashed black;
    border-bottom: 3px dashed black;
  }

  .creativity h2 {
    font-size: 4vh;
    padding-bottom: 2vh;
    background-color: rgb(0, 0, 0, 0.9);
    color: white;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    padding-top: 0.5vw;
    border-radius: 8%;
  }

  img[alt="First image"] {
    display: none;
  }

  img[alt="Second image"] {
    display: none;
  }

  img[alt="Third image"] {
    display: none;
  }

  img[alt="Four image"] {
    display: none;
  }

  /* FOOTER ======================================================================================== */

  footer {
    background-color: rgb(0, 0, 0);
    border-top: 3px solid rgb(255, 255, 255);
    height: 100%;
    opacity: 0.8;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    color: white;
  }

  form {
    justify-content: center;
    margin: auto;
  }

  .footer-logo,
  .footer-form,
  .footer-credit {
    padding: 0;
    margin-top: 50%;
    margin: 0;
    display: inline-block;
    width: calc(100%-2.5vh);
    height: 100vw;
    padding-left: 2.5vh;
    padding-right: 2.5vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
  }

  .footer-form {
    padding-top: 0;
  }

  .footer-form {
    border-top: 3px solid rgb(255, 255, 255);
    border-bottom: 3px solid rgb(255, 255, 255);
  }

  .footer-logo h3,
  .footer-credit h3 {
    font-size: 7vw;
    margin: 0;
    padding: 0;
  }

  .footer-logo {
    height: 100%;
  }

  .footer-form p {
    font-size: 7vw;
    font-weight: bold;
    margin-bottom: 2vh;
    margin-top: 2vh;
    margin-left: 0;
  }

  .footer-form label {
    font-size: 5vw;
    margin-bottom: 2vh;
  }

  .footer-form input,
  select {
    font-size: 5vw;
  }

  .footer-form button {
    justify-content: center;
    margin: auto;
    margin-top: 2vh;
    font-size: 5vw;
  }


  .footer-logo p {
    font-size: 3vh;
    margin: 0;
  }
}