*{
    margin:0;
    padding:0;
}
.spot{
    width:100%;
    height:450px; margin-top:10px;margin-bottom: 10px;
    background: #222222;
    display:flex;flex-wrap:nowrap;
}
.info{
    color:#fff;
    padding:5px;    
    height:290; width: 35%; margin:25px;margin-right:0;
}
.head{
    font-size:4rem;
    font-weight: bold;
}
.content{
    font-size:1rem; margin-left:25px; padding:3px; margin-top:25px;
}
.button{
    text-decoration: none;
    padding:0.5rem 1rem;
    color: white ;
    font-size: 14px;
    font-weight: bold;
    cursor:pointer;
    border:2px solid white; margin-left: 150px;
    width:120px; 
    height:2.9rem; padding:5px; 
}.button:hover{
    background: rgba(255, 255, 255, 0.315);
}.button:active{
    background: rgba(255, 255, 255, 0.712);
}
.direction{
    text-align: center;
}
.direction button{
    font-family: cursive;
    font-weight: bold;
    background-color: #ffffff44;
    border:none;
    width:50px;
    height:50px;
    border-radius: 50%;
    transition: 0.5s;
    margin:0 10px; margin-top:200px;
}
.direction button:hover{
    background-color: #ffffff;
}
.item{
    border-radius: 15px;
    width:300px;
    height:400px;
    background-image: linear-gradient(to top, #AEC0CE, #ECECF2);
    overflow: hidden;
    transition: 0.5s;
    margin:10px;
    scroll-snap-align: start;
}
.card{
    width:100%;
    height:100%;
}
#list{
    display: flex;
    width:max-content;
}
#formList{
    width:65%; height:440px;
    overflow: hidden;
    margin:100px auto 50px; margin-top:5px;
    scroll-behavior: smooth;
    scroll-snap-type: both;
}
::-webkit-scrollbar {
    width: 10px;
    height: 4px;
  }::-webkit-scrollbar-track {
    background:  #222222; 
  }::-webkit-scrollbar-thumb {
    background:rgba(0,0,0,0.9);
  }
@media screen and (max-width:500px) { 
    .title{
        width:500px;
        display:flex;
        flex-direction: column;
    }.card{
        width:300px;
    }
}