:root {
  --primary-bg-color: rgb(30, 30, 28);
}

::-webkit-scrollbar {
  display: none;
}

* {
  background-color: var(--primary-bg-color);
  color: rgb(255, 255, 255);

  body {
    overflow-x: hidden;

    box-sizing: border-box;

    header {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 15vh;
      width: 100vw;
      border-bottom: 2px solid white;
    }
    #nobelSmallHeader {
      top: 0;

      height: 8vh;
      position: sticky;

      display: flex;
      flex-direction: row;

      width: 100%;

      .nobelSmallHeaderLeft {
        padding-left: 3vw;

        width: 50%;
        height: 100%;
        display: flex;

        justify-content: start;
        align-items: center;
      }

      .nobelSmallHeaderRight {
        width: 50%;

        display: flex;
        justify-content: end;
        align-items: end;

        ul {
          display: inline-block;
          width: 25vw;

          button {
            font-size: large;
            background-color: #000000;
            border: none;
            color: #fdfdfd;
            text-decoration: none;
          }

          .dropbutton {
            min-width: 33%;
            text-align: center;
            background-color: var(--primary-bg-color);
          }

          .drop-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 200px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

            a {
              color: rgb(255, 255, 255);
              padding: 12px 16px;
              text-decoration: none;
              display: block;
            }
          }

          .drop-content a:hover {
            background-color: #a8a8a8;
          }

          .dropdown:hover .drop-content {
            display: block;
          }
        }

        li {
          display: inline-block;
          padding: 10px;
        }
      }
    }
    #nobelMainWrapper {
      display: flex;
      justify-content: center;
      flex-direction: column;

      #nobelInfo {
        padding: 8vh 0 0 0;
        text-align: center;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        img {
          width: 90%;
          padding-bottom: 5%;
        }

        p {
          font-size: larger;
          text-align: center;
          width: 80%;
          outline: rgb(177, 177, 177) 2px solid;

          padding: 5%;
          word-spacing: 5px;
          line-height: 20px;
        }
      }
      #nobelLauriets {
        display: flex;
        flex-direction: row;

        transition: 200ms;

        gap: 100px;

        .nobelLauriet {
          display: flex;
          flex-direction: row;

          transition: 200ms;

          width: 300px;
          height: 550px;

          .test {
            visibility: hidden;
            width: 100px;
          }

          a {
            height: 200px;
            img {
              width: 300px;
            }
            img:hover {
              transform: scale(1.05);
              transition: 200ms;
            }
          }
        }
        .nobelLauriet:hover {
          width: 700px;
          transition: 200ms;
          .test {
            padding-left: 20px;
            transition: 200ms;
            visibility: visible;
          }
        }
      }
    }
  }
  #nobelLaurietWrapper {
    display: flex;
    justify-content: center;
    height: 75vh;

    #nobelLaurietLeft {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      width: 50vw;

      img {
        height: 55vh;
      }
    }
    #nobelLaurietRight {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      width: 50vw;

      p {
        font-size: larger;
      }
    }
  }
}