@import url('https://fonts.googleapis.com/css2?family=Volkhov:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');

		body{
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    
    canvas{
			position: relative;
		}

    .modal-wrapper {
        background: none;
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
        flex-direction: row;
        flex-wrap: wrap;
        position: absolute;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
    }


		.modal {
			position: relative !important;
      /* top: 180px !important;
      left: 50% !important; */
			/* transform: translate(-50%, -50%) !important; */
      height: 80vh !important;
      width: 80vw !important;
      z-index: 100;     
		}

    .modal .modal-content {
        font-family: 'Volkhov', serif;
        font-size: 20px;
        line-height: 1.6;
        width: 80vw;
        height: 80vh;
        /* background-image:url("images/modal_bg.png"); */
        background-color: #f7f4e8;
        background-size: cover;
        opacity: 0.9;
        padding: 1.5em 3em;
        border-radius: 6px;
        box-shadow: 0px 0px 20px #666;
        position: relative;
				overflow-y: scroll;  
    }

    .modal-close{
        position: absolute;
        right: -2rem;
        top: 60px;
        font-size: 48px;
        cursor: pointer;
        height: 50px;
        width: 50px;
        text-align: center;
        z-index: 101;
    }

    .modal-close:hover{
      cursor: pointer;
    }

    .audio-wrapper{
      display: flex;
      flex-direction: column;
      height: 84px;
    }

    .audio-title{
        font-weight: bold;
    }

    audio{
        width: 500px;
        max-width: 70vw;
        display: block;
        height: 60px;
    }

    .modal-header{
      position: absolute;
      top: -40px;
      z-index: 102;
      left: 50%;
    }

    .modal-header img{
      width: 160px;     
    }

    .modal h2{
      font-family: 'Amatic SC', cursive;
      font-weight: bold;
      font-size: 48px;
      margin: 0 0 10px 0;
    }

    .title-image{
      width: 420px;      
      max-width: 100%;
    }

    .audio-header, .info-header{
      width: 300px;     
    }

    #intro-modal, #help-modal{
      background-image: url("images/tafel_intro2.png");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
      padding-top: 4rem;
      width: 760px !important;
    }

    #intro-modal .modal-close, #help-modal .modal-close{
      right: 0;
      top: -5px;
      color: #fff;
    }
    
    #intro-modal .modal-content, #help-modal .modal-content{
      /* font-family: 'Amatic SC', cursive; */
      font-size: 16px;
      background: none;
      background-repeat: no-repeat;
      padding: 1rem 7rem 2rem 10rem;
      width: 480px;
      height: 520px;
      box-shadow: none;
      overflow: hidden;
    }

    #intro-modal p, #help-modal p{
      margin-top: 4px;
      margin-bottom: 4px;
    }

    #intro-modal a, #help-modal p{
      text-decoration: none;
    }

    #help-modal-button{
        font-family: 'Volkhov', bold;
        position: fixed;
        bottom: -2px;
        left: -2px;
        height: 75px;
        width: 75px;
        line-height: 75px;
        background: #f3f1e7;
        border-top-right-radius: 100%;
        border: 2px solid #d7696f;
        font-size: 3rem;
        padding-left: 1.2rem;
        z-index: 99;
      }
      #help-modal-button a{
        text-decoration: none;
        color: #d7696f;
      }
@media screen and (max-device-width: 767px) {
    .modal-close{
        position: absolute;
        right: 0;
        top: 0px;
        font-size: 48px;
        cursor: pointer;
        height: 50px;
        width: 50px;
        text-align: center;
        z-index: 101;
    }
    .modal .modal-content{
    width: auto !important;
    font-size: 16px;
    padding: 0.5em 0.5em;
    height: 85vh !important;
  }
   .modal {
    position: relative !important;
    /* top: 180px !important;
    left: 50% !important; */
    /* transform: translate(-50%, -50%) !important; */
    height: 95vh !important;
    width: 90vw !important;
    z-index: 100;   
  }
  .audio-header, .info-header{
      width: 160px;   
      margin-top: 20px;  
    }

    .modal-header{
      position: absolute;
      top: -40px;
      z-index: 102;
      left: -20px;
    }

    .modal-header img{
      width: 80px;     
    } 
    .modal h2{
      padding-left: 50px ;
    }

    #intro-modal, #help-modal{
      background-image: url("images/tafel_intro2.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      padding-top: 2rem;
      width: 96vw !important;
    }

    #intro-modal .modal-content, #help-modal .modal-content{
      font-size: 14px;
      background: none;
      background-repeat: no-repeat;
      padding: 4rem 2rem 2rem 2rem ;
      width: 90vw;
      box-shadow: none;
    }
}