* 
{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
@font-face 
{
font-family: 'benguiat';
src: url('font/itc_benguiat_book-webfont.woff2') format('woff2'),
url('font/itc_benguiat_book-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face 
{
font-family: 'Rodin';
src: url('font/SCEPS3RodinLATIN-Regular.woff2') format('woff2'),
url('font/SCEPS3RodinLATIN-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body
{
background-image: url("images/Ending E_2.png");
background-size: cover;
width: 100%;
height: 100vh;
overflow: hidden;
}
.logo img
{
width: 36.015625vw;
height: 4.21875vw;
margin: 1.5625vw 0px 0px 1.171875vw;
}
.container
{
position: absolute;
top: 23.2vh;
left: 24.657%;
width: 50vw;
height: 28.125vw;
overflow: hidden;
}
.slideshow
{
display: none;
}
.slideshow img
{
width: 100%;
height: 28.125vw;
}
.text
{
font-family: 'Rodin';
color: #f2f2f2;
text-align: center;
text-justify: inter-word;
position: absolute;
bottom: 0px;
padding-bottom: 0.625vw;
padding-top: 0.625vw;
background-color: rgba(0, 0, 0, 0.2);
width: 100%;
font-size: 1.09375vw;
}
.oneline
{
font-size: 1.5625vw;
}
.fade
{
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade
{
from {opacity: .4}
to {opacity: 1}
}
.prev, .next
{
cursor: pointer;
position: absolute;
top: 50%;
margin-top: -1.71875vw;
padding: 1.25vw;
font-weight: bold;
font-size: 1.40625vw;
color: white;
transition: 1s ease;
user-select: none;
opacity: 0.6;
}
.next
{
right: 0px;
}
.prev:hover, .next:hover
{
opacity: 1;
}
@media (max-width: 450px)
{
body
{
background-image: url("images/Ending E-Phone.png");
}
.logo img
{
width: 90%;
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 5vh;
}
.container
{
top: 30vh;
width: 100%;
height: auto;
left: revert;
padding: 0px 10px 0px 10px;
}
.slideshow img
{
width: 100%;
height: 100%;
}
.prev, .next
{
padding: 8px;
font-size: 10px;
margin-top: revert;
top: 43%;
}
.next
{
right: 10px;
}
.text
{
font-size: 8px;
padding: 4px 10px 4px 0px;
margin: 0px 0px 4px 0px;
}
.oneline
{
font-size: 10px;
}
.fade
{
animation-duration: 2s;
}
}