@font-face{
    font-family:"made-bon-voyage-regular";
    src:url("made-bon-voyage-regular-personal-use.otf") format("woff");
}
@font-face{
    font-family:"made-bon-voyage-thin";
    src:url("https://dafonttop.com/wp-data/m/965/13965/file/made-bon-voyage-thin-personal-use.otf") format("woff"),
    url("https://dafonttop.com/wp-data/m/965/13965/file/made-bon-voyage-thin-personal-use.otf") format("opentype"),
    url("https://dafonttop.com/wp-data/m/965/13965/file/made-bon-voyage-thin-personal-use.otf") format("truetype");
}
body{
    background-color:#f0f0f0;
    overflow:auto;
}

::-webkit-scrollbar {
    height: 25px;
}
 ::-webkit-scrollbar:vertical{
    display:none;

}
::-webkit-scrollbar-thumb{
    background-color:black;
    width:30px;
}
::-webkit-scrollbar-track{
    display:none;
}


.container-wrap{
    width:1000%;
    display:flex;
    
}
.container-1{
    width:10%;
    height:100vh;
    background-color:#f0f0f0;
    position:relative;
  /*  border:black solid 1px;*/
}


/*img{
    display:block;
    width:600px;
    position:absolute;
    top:15%;
    left:-20;
}*/

.dear{
   position:fixed;
    top:7%;
left:6%;
    color:black;
    font-family: 'made-bon-voyage-regular';
    font-size:72px;
    
}
.stamp{
    position:absolute;
    bottom:60px;
    right:70px;
    width:160px;
}
.from{
    font-family:'Radley';
    font-size:20px;
    position:absolute;
    bottom:60px;
    left:5%;
}
.line{
    display:flex;
    position:fixed;
    top:80px;
    left:0;
    width:100%;
    height:1px;
    background-color:#c3c3c3;
}
.left-line{
    width:250px;
    height:100%;
    background-color:black;}

.line-img{
    position:absolute;
    top:-70;
    left:250px;
}

.container-2{
    margin:0 50px;
    width:300px;
   /* border:red solid 1px;*/
    position:relative;
}

.text-1{
    position:absolute;
    top:50%;
    font-family:"Radley", serif;
    
}

.container-3{
    margin:0 50px;
    width:400px;
   /* border:red solid 1px;*/
    position:relative;
}
.text-2{
    position:absolute;
    top:50%;
    font-family:"Radley", serif;
    font-size:30px;
    
}
.container-4{
    margin:0 50px;
    width:400px;
   /* border:red solid 1px;*/
    position:relative;
}
.text-3{
    position:absolute;
    top:50%;
    font-family:"Radley", serif;
    font-size:54px;
    
}

@media only screen and (max-width: 720px) {
    .dear{
   position:fixed;
    top:13%;
left:6%;
    color:black;
    font-family: 'made-bon-voyage-regular';
    font-size:48px;
    }
    
    .stamp{
    position:absolute;
    bottom:60px;
    right:30px;
    width:140px;
}
    .line{
    display:flex;
    position:fixed;
    top:80px;
    left:0;
    width:100%;
    height:1px;
    background-color:#c3c3c3;
}
.left-line{
    width:140px;
    height:100%;
    background-color:black;}

.line-img{
    position:absolute;
    top:-70;
    left:140px;
}
    .text-1{
    position:absolute;
    top:50%;
    font-family:"Radley", serif;
    font-size:16px;
    
}
    .text-2{
    position:absolute;
    top:50%;
    font-family:"Radley", serif;
    font-size:24px;
    
}
    .text-3{
    position:absolute;
    top:50%;
    font-family:"Radley", serif;
    font-size:36px;
    
}
}