*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Libre Baskerville", serif;
}

body{
    background-color: rgb(240, 240, 240);
    padding: 5vw 8vw;
}

.logo img{
    width: 150px;
}

main{
    display: grid;
    grid-auto-flow: column;
    place-items: center;
    background-color: white;
    border-radius: 10px;
    padding: 60px;
}

.notice{
    display: flex;
    flex-direction: column;
    text-align: left;
    row-gap: 12px;
    max-width: 500px;
}

.text-gradient{
    color: rgb(27, 27, 27);
    font-size: clamp(24px, 3vw, 10em);
    font-weight: 700;
    font-style: italic;
  }
  

.notice h2{
    font-size: clamp(16px,1.2vw,2.5em);
    color: black;
    font-weight: 500;
    line-height: 1.5;
    font-style: italic;
}

.images{
    width: 80%;
}

.hide{
    display: none;
}


/* Screen Tab */

@media screen and (max-width: 992px) {
    body{
        background-color: white;
        padding: 5vw;
        height: auto;
    }

    .logo img{
        width: 150px;
    }
    
    main{
        display: grid;
        grid-auto-flow: row;
        justify-items: center;
        background-color: white;
        border-radius: 10px;
        padding: 20px 0;
    }

    .notice{
        display: flex;
        flex-direction: column;
        text-align: center;
        row-gap: 12px;
        max-width: 600px;
        order: 1;
    }

    .hide{
    display: block;
    }
  }
  
  /* On screens Mobile */
  @media screen and (max-width: 600px) {
    body{
        background-color: white;
        padding: 5vw;
        height: auto;
    }

    .logo img{
        width: 150px;
    }
    
    main{
        display: grid;
        grid-auto-flow: row;
        justify-items: center;
        background-color: white;
        border-radius: 10px;
        padding: 20px 0;
    }

    .notice{
        display: flex;
        flex-direction: column;
        text-align: center;
        row-gap: 12px;
        max-width: 500px;
        order: 1;
    }

    .hide{
    display: block;
}
  }