body{
    background-image: url("paperbg.jpg");
    background-color: #cccccc;
    position:relative;
}


/*menu*/

.menu{
    background-color:transparent;
    width: 100%;
    height: 50px;
    position:fixed;
    top:0px;
    left:0px;
    z-index:1;
}

h3{
    color:black;
    z-index: 2;
    font-family: 'IBMPlexSans-Regular', sans-serif;
    margin:10px;
    font-size: 24px;
}

#about{
    top:0%;
    left: 60%;
    position: absolute;
}

#collections {
    top:0%;
    left:73%;
    position: absolute;
}

#mapword {
    top:0%;
    left:90%;
    position: absolute;
}

#tc {
    z-index:2;
    position:absolute;
    top:0px;
    left:0%;
    margin:10px;
    width:400px;
    height:auto;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }
  
  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    left: 40% ; /* 15% from the top and centered */
    top:40%;
    padding:15px;
    /* border: 1px solid #888; */
    width: 20%; /* Could be more or less, depending on screen size */
    height:auto;
    align-content: center;
    position:absolute;
    display:block;
}
  

p{
    font-family: 'IBMPlexSans-Regular', sans-serif;
    font-size: small;
    /* position:absolute; */
    width:calc(20%-20px);
    align-content: center;
}


/* individual city page */
.container{
    width:1440px;
    height:680px;
    background-color:transparent;
    top:60px;
    left:0px;
    position:relative;
    padding:0px;
    margin:0px;
}

.bgpt{
    background-image: url("portobg.svg");
    width:1440px;
    height:auto;
    top: 50%;
    left:0%;
    mix-blend-mode: multiply;
    position: fixed;
    z-index: 1;
}


.title{
    position:absolute;
    mix-blend-mode: multiply;
    animation-name: appear;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.paragraph{
    top:30%;
    left:0%;
    margin-left:1%;
    position:absolute;
    width:250px;
    z-index:3;
    font-family: 'IBMPlexSans-Regular';
    font-size: 12px;
    color:black;
    animation-name: appear;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.flag{
    position:absolute;
    mix-blend-mode: multiply;
    top:70%;
    left:0%;
    width: 200px;
    height:auto;
    z-index:2;
    margin-left:1%;
    animation-name: appear;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.arrow {
    position:absolute;
    mix-blend-mode: multiply;
    top:250px;
    left:150%;
    width:10%;
    height:auto;
}

/* porto */

.piecespt{
    position:absolute;
    z-index: 2;
    transition: transform .6s ease; 
    opacity:0;
    animation-name: appear;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.piecespt:hover{
    transform: scale(1.3);
}

.titlept {
    top:5%;
    left:0%;
    width:25%;
    height:auto;
    mix-blend-mode: multiply;
}


@keyframes appear {
    from {opacity: 0;}
    to {opacity: 1;}
  }

#pt1 {
    top:100px;
    left:25%;
    width:18%;
    height:auto;
}

#pt2 {
    top:60px;
    left:40%;
    width:20%;
    height:auto;
}

#pt3 {
    top:250px;
    left:30%;
    width:25%;
    height:auto;
}

#pt4 {
    top:200px;
    left:55%;
    width:25%;
    height:auto;
}

#pt5 {
    top:200px;
    left:80%;
    width:20%;
    height:auto;
}

#pt6 {
    top:100px;
    left:70%;
    width:20%;
    height:auto;
}

#pt7 {
    top:150px;
    left:100%;
    width:30%;
    height:auto;
}