*, *::after, *::before {
    box-sizing: border-box;
  }
  
  a {
    text-decoration: none;
    color: black;
}

.menu_bar {
    background-color: white;
}

.menu_bar a {
    padding: 1vw;
    display: inline-block;
}

.munu_bar a:hover {
    background-color: #000;
}
  
  .container {
    position: relative;
  }

  .cad {
    text-align: center;
  }

.copyright {
  text-align: right;
  font-size: 1vw;
}
  

.logo {
  position: fixed;
  z-index: 9999;
}

  .artist {
    position: relative;
    width: 46vw;
    line-height: 160%;
    margin-left: auto;
    margin-right: auto;
    text-size-adjust: auto;
    font-size: 2vw;
    font-weight: bold;
    z-index : -999;
  }

  .inspiration script {
    text-align: center;
    z-index: -999;
  }

  .comment1 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment2 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment3 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment4 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment5 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment6 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment7 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment8 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment9 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }
  .comment10 {
    position: relative;
    width: 100%;
    font-size: 0.8vw;
    line-height: 152%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    padding-bottom: 1vw;
    padding-left: 2vw;
    padding-right: 2vw;
    text-align: center;
  }


  .insta {
    align-items: right;
  }



  .button1 {
    position: absolute;
    top: 39%;
    left: 40%;
  }
  
  .button2 {
    position: absolute;
    top: 35%;
    left: 47%;
  }
  
  .button3 {
    position: absolute;
    top: 30%;
    left: 45%;
  }
  
  .button4 {
    position: absolute;
    top: 40%;
    left: 45%;
  }
  
  .button5 {
    position: absolute;
    top: 33%;
    left: 50%;
  }
  
  .button6 {
    position: absolute;
    top: 37%;
    left: 55%;
  }
  
  .button7 {
    position: absolute;
    top: 28%;
    left: 51%;
  }
  
  .button8 {
    position: absolute;
    top: 35%;
    left: 53%;
  }
  
  .button9 {
    position: absolute;
    top: 31%;
    left: 57%;
  }



  

--------------------------

  button {
    color: white;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 100.0vw;
    font-weight: bold;
    text-emphasis-color: transparent;
  }
  
  button :hover {
    color: white;
  }
  
  .modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header .title {
    font-size: 1.2vw;
    font-weight: bold;
  }
  

  
  .modal-body {
    padding: 2vw 2vw;
    overflow: hidden;
    overflow-y: scroll;
  }
  
  #overlay {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay.active {
    opacity: 1;
    pointer-events: all;
  }

  
  
  --------------------------------------
  
  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  button {
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: bold;
    text-emphasis-color: transparent;
  }
  
  .modal2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal2.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header2 {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header2 .title2 {
    font-size: 1.2vw;
    font-weight: bold;
  }
  


  
  .modal-body2 {
    padding: 2vw 2vw;
  }
  
  #overlay2 {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay2.active {
    opacity: 1;
    pointer-events: all;
  }
  
  
  --------------------------------
  
  
  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  button {
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: bold;
    text-emphasis-color: transparent;
  }
  
  .modal3 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal3.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header3 {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header3 .title3 {
    font-size: 1.2vw;
    font-weight: bold;
  }
  

  
  .modal-body3 {
    padding: 2vw 2vw;
  }
  
  #overlay3 {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay3.active {
    opacity: 1;
    pointer-events: all;
  }
  
  
  ----------------------------------
  
  
  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  button {
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: bold;
    text-emphasis-color: transparent;
  }
  
  .modal4 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal4.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header4 {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header4 .title4 {
    font-size: 1.2vw;
    font-weight: bold;
  }
  

  
  .modal-body4 {
    padding: 2vw 2vw;
  }
  
  #overlay4 {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay4.active {
    opacity: 1;
    pointer-events: all;
  }
  
  -----------------------------
  
  
  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  button {
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: bold;
    text-emphasis-color: transparent;
  }
  
  .modal5 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal5.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header5 {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header5 .title5 {
    font-size: 1.2vw;
    font-weight: bold;
  }
  
  .modal-header5 .close-button5 {
    cursor: pointer;
    border: none;
    outline: none;
    background: none;
    font-size: 1vw;
    font-weight: bold;
  }
  
  .modal-body5 {
    padding: 2vw 2vw;
  }
  
  #overlay5 {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay5.active {
    opacity: 1;
    pointer-events: all;
  }
  
  ---------------------------------
  
  
  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  button {
    color: rgba(0, 0, 0, .5);
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: bold;
    text-emphasis-color: transparent;
  }

  button :hover {
    background-color: black;
  }
  
  .modal6 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal6.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header6 {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header6 .title6 {
    font-size: 1.2vw;
    font-weight: bold;
  }
  

  
  .modal-body6 {
    padding: 2vw 2vw;
  }
  
  #overlay6 {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay6.active {
    opacity: 1;
    pointer-events: all;
  }
  
  ------------------------------
  
  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  button {
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: bold;
    text-emphasis-color: transparent;
  }
  
  .modal7 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal7.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header7 {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header7 .title7 {
    font-size: 1.2vw;
    font-weight: bold;
  }
  

  
  .modal-body7 {
    padding: 2vw 2vw;
  }
  
  #overlay7 {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay7.active {
    opacity: 1;
    pointer-events: all;
  }
  
  ---------------------------
  
  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  button {
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: bold;
    text-emphasis-color: transparent;
  }
  
  .modal8 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal8.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header8 {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header8 .title8 {
    font-size: 1.2vw;
    font-weight: bold;
  }

  
  .modal-body8 {
    padding: 2vw 2vw;
  }
  
  #overlay8 {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay8.active {
    opacity: 1;
    pointer-events: all;
  }
  
  -------------------------
  
  *, *::after, *::before {
    box-sizing: border-box;
  }
  
  button {
    color: black;
    cursor: pointer;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1.25rem;
    font-weight: bold;
    text-emphasis-color: transparent;
  }
  
  .modal9 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: 200ms ease-in-out;
    border: 0.01vw solid black;
    border-radius: 1vw;
    z-index: 10;
    background-color: white;
    width: 50%;
    height: auto;
    max-height: 90%;
  }
  
  .modal9.active {
    transform: translate(-50%, -50%) scale(1);
  }
  
  .modal-header9 {
    padding: 2vw 2vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .modal-header9 .title9 {
    font-size: 1.2vw;
    font-weight: bold;
  }
  

  
  .modal-body9 {
    padding: 2vw 2vw;
  }
  
  #overlay9 {
    position: fixed;
    opacity: 0;
    transition: 200ms ease-in-out;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    pointer-events: none;
  }
  
  #overlay9.active {
    opacity: 1;
    pointer-events: all;
  }