@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
html, body{
    overscroll-behavior: none;
    scroll-behavior: smooth;
    
}

body{
    background-color: rgba(72, 173, 255, 0.8);
    margin: 0;
    font-family: 'Libre Baskerville', serif;
    color: #2E373A;
    font-size: 14px;
}

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    list-style:none;
}

main{
    width: min(1400px, 100vw);
    margin: auto;
    padding:20px;
}

/* Header and banner styling */
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
header img{
    height: 40px;
}
.banner .content{
    font-family: "Odibee Sans",sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.banner .content h1{
    font-size: 17em;
    align-self: flex-start;
}
.banner .image{
    width: 100%;
    height: 100%;
    align-items: center;
    background-image: url("./image/Background removed images/Doraemon logo.png");
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: center;
}
.banner .image img{
    transform: translateX(40%);
}

/* Grid-1 */
.grid-1{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.grid-1 .images{
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
}
.grid-1 .images .image-2{
    height: 40px;
    position: absolute;
    transform: translateX(-5%);
    transform: translatey(-500%);
}
.grid-1 .images .image-1 img{
    height: 450px;
}
.grid-1 .images .image-2 img{
    height: 400px;
}
.grid-1 h2{
    margin-top: -60px;
    font-size: 80px;
}

/* images */

/* adjuzting positon*/
.shizuka,.nobita,.doraemon,.Suneo,.Takeshi,.doraemon-1{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Image sizes */
.shizuka img{
    height: 500px;
    margin-bottom: 20px;
}
.nobita img{
    height: 500px;
    margin:20px 0 20px 0;
}
.doraemon img{
    height: 400px;
    margin-bottom: 20px;
}
.Takeshi img{
    height: 420px;
    margin-bottom: 10px;
}
.Suneo img{
    height: 430px;
    margin-bottom: 20px;
}
.doraemon-1 img{
    height: 400px;
}

/* Grid-2 */
.grid-2,.grid-3,.grid-4{
    display: grid;
    grid-template-columns: repeat(6, 180px);
    grid-template-rows: repeat(17, 100px);
    margin-top: 50px;
    gap:50px;
    font-size: 14px;
}
.grid-2 div:nth-child(1){
    grid-column: 1/4;
    grid-row: 4;
}
.grid-2 div:nth-child(2){
    grid-column: 4/7;
    grid-row: 1;
}
.grid-2 div:nth-child(3){
    grid-column: 4/7;
    grid-row: 7;
}
.grid-2 div:nth-child(4){
    grid-column: 1/4;
    grid-row: 10;
}
.grid-2 div:nth-child(5){
    grid-column: 4/7;
    grid-row: 13;
}
.grid-2 div:nth-child(6){
    grid-column: 1/4;
    grid-row: 16;
}

/* align paragraph tag and customising it */
.grid-2 div p{
    font-size: 15px;
    text-align: justify;
}

/* Grid-3 */
.grid-3{

    grid-template-columns: repeat(6,150px);
    grid-template-rows: repeat(5,90px);
    font-size: 140px;
}
.grid-3 div{
    grid-column: 2/6;
    text-wrap: nowrap;
}
.grid-3 div:nth-child(2){
    grid-column: 4/6;
}
.grid-3 div:nth-child(4){
    margin-left: 70px;
    grid-column: 4/7;
}
.grid-3 div:nth-child(5){
    margin-left: 60px;
    margin-top: -40px;
    grid-column:1/2;
}

/* Footer and grid-4 */
footer{
    margin-top:150px;
    border-top: 1px solid #2e373a55;
    min-height: 100vh;
}
footer .content{
    width: min(1400px,100vw);
    margin: auto;
    padding: 100px 0 100px 150px;
}
.grid-4{
    margin: auto;
    grid-template-columns: repeat(6,160px);
    grid-template-rows: repeat(6,50px);
    font-size: 20px;
}
.grid-4 div:nth-child(1){
    grid-row: 1;
    grid-column: 1/3;
}
.grid-4 div:nth-child(2){
    grid-row: 3;
    grid-column: 3/5;
}
.grid-4 div:nth-child(3){
    grid-row: 5;
    grid-column: 5/7;
}
.grid-4 div:nth-child(4){
    grid-row: 1;
    grid-column: 5/7;
}
.grid-4 div:nth-child(4) img{
    height: 400px;
}

.autorotate{
    animation: autorotateAnimation;
    animation-timeline: view(auto auto);
}
@keyframes autorotateAnimation {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}


.autoshow{
    /* both is used for delay and if feature is delayed it will take the from part of code and execute it */
    animation: autoshowAnimation both;
    animation-timeline: view(70% 5%);
}
@keyframes autoshowAnimation {
    from{
        opacity: 0;
        transform: translateY(200px) scale(0.3);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.autoblur{
    animation: autoblurAnimation both;
    animation-timeline: view();
}
@keyframes autoblurAnimation {
    0%{
        filter: blur(40px);
    }
    52%,55%{
        filter: blur(0px);
    }
    100%{
        filter: blur(40px);
    }
}

/* Media Query */
@media screen and (min-width: 2000px) {
    footer .content{
        padding-left: 400px;
    }
}
@media screen and (min-width: 1500px) {
    footer .content{
        padding-left: 150px;
    }
}