/* ---------- General ! -----------  */
:root {
    --red1: #f90000;
    --red2: #9a1010;
    --red3: #ffebeb;
    --yellow1: #f4eb1a;
    --yellow2: #e1d921;
    --yellow3: #e79516;



}

body {
    font-size: 16px;
    box-sizing: border-box;
    padding-top: 30px;
    background-image: url(images/Att_background1.jpg);
    opacity: 1;
    /* padding-bottom: 100px; */
}


/* ----------- Font! Section ---------*/

@font-face {
    font-family: AsianNinja;
    src: url('fonts/aAsianNinja.ttf');

}

@font-face {
    font-family: Karate;
    src: url('fonts/Karate.ttf');
}

@font-face {
    font-family: Niagato;
    src: url('fonts/Niagato.ttf');
}

@font-face {
    font-family: Azuki;
    src: url('fonts/AzukiRegular.ttf');
}

@font-face {
    font-family: MilkChild;
    src: url('fonts/Milk Child.ttf');
}

/* ---------------------------------- */
/* Media query*/
/* ---------------------------------- */


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 480px) {

    /* level#1 */
    /* ----- Header Section ----- */
    .HeaderContainer {
        text-align: left;
    }

    .HeaderContainer h1 {
        font-family: Niagato;
        font-size: 1.8em;
        letter-spacing: 0.2em;
        color: var(--red2);
        margin-top: -40px;
        padding-left: 10px;

    }

    /* -------- Centent Container --------  */
    .AtContent {
        margin: auto;
        max-width: 1000px;
        padding: 0px 10px;
        text-align: center;
    }

    .AtTitle {
        text-align: center;
    }

    .AtTitle h1 {
        text-align: center;
        font-family: MilkChild;
        font-size: 2.6em;
        letter-spacing: 0.25em;
        color: var(--red2);
        font-weight: 600px;
        text-shadow: 7px 7px 10px gray;
        margin: 40px 0px;
        /* border:1px solid red; */
        display: block;
        border-bottom: var(--red1) 1px solid;
        padding-bottom: 10px;
    }

    .AtText {
        margin-bottom: 40px;
    }

    /* -------- Item Section  --------  */
    .shopFlexContainer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 40px;
        gap: 30px;
    }

    .shopFlex {
        width: 85%;

    }

    .shopFlexText {
        background-color: yellow;
        text-align: center;
        padding: 7px 7px;
    }

    .shopFlex img {
        width: 100%;
    }

    /* -------- Map Section  --------  */
    .mapContainer {

        width: 100%;
        max-width: 800px;
        margin: auto;
        margin-top: 40px;
        position: relative;
        border: 10px solid var(--red2);
        margin-bottom: 40px;
    }

    .mapImage {
        width: 100%;

    }

    /* -------- Payment Logo --------  */
    .CCFlex {
        display: flex;
        width: 100%;
        
        margin: auto;
        gap: 10px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .CCFlexItem {
        width: 15%;
    }

    .CCFlexItem img {
        width: 100%;
    }

    /* -------- FB, Instagram Section --------  */
    #BottomBar {
        width: 100%;
        background-color: var(--red1);
        height: 50px;
        margin-top: 50px;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 481px) and (max-width: 768px) {

    /* level#2 */
    /* ----- Header Section ----- */
    .HeaderContainer {
        text-align: left;
    }

    .HeaderContainer h1 {
        font-family: Niagato;
        font-size: 2.5em;
        letter-spacing: 0.2em;
        color: var(--red2);
        margin-top: -50px;
        padding-left: 10px;

    }

    /* -------- Centent Container --------  */
    .AtContent {
        margin: auto;
        max-width: 1000px;
        padding: 0px 10px;
        text-align: center;
    }

    .AtTitle {
        text-align: center;
    }

    .AtTitle h1 {
        text-align: center;
        font-family: MilkChild;
        font-size: 2.6em;
        letter-spacing: 0.25em;
        color: var(--red2);
        font-weight: 600px;
        text-shadow: 7px 7px 10px gray;
        margin: 40px 0px;
        /* border:1px solid red; */
        display: block;
        border-bottom: var(--red1) 1px solid;
        padding-bottom: 10px;
    }

    .AtText {
        margin-bottom: 40px;
    }

    /* -------- Item Section  --------  */
    .shopFlexContainer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
        margin-bottom: 40px;
        gap: 30px;
    }

    .shopFlex {
        width: 85%;

    }

    .shopFlexText {
        background-color: yellow;
        text-align: center;
        padding: 7px 7px;
    }

    .shopFlex img {
        width: 100%;
    }

    /* -------- Map Section  --------  */
    .mapContainer {

        width: 100%;
        max-width: 800px;
        margin: auto;
        margin-top: 40px;
        position: relative;
        border: 10px solid var(--red2);
        margin-bottom: 40px;
    }

    .mapImage {
        width: 100%;

    }

    /* -------- Payment Logo --------  */
    .CCFlex {
        display: flex;
        width: 100%;
        margin: auto;
        gap: 20px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .CCFlexItem {
        width: 15%;

    }

    .CCFlexItem img {
        width: 100%;
    }

    /* -------- FB, Instagram Section --------  */
    #BottomBar {
        width: 100%;
        background-color: var(--red1);
        height: 50px;
        margin-top: 50px;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* level#3 */
    /* ----- Header Section ----- */
    .HeaderContainer {
        text-align: left;
    }

    .HeaderContainer h1 {
        font-family: Niagato;
        font-size: 5em;
        letter-spacing: 0.2em;
        color: var(--red2);
        margin-top: -90px;
        padding-left: 30px;

    }

    /* -------- Centent Container --------  */
    .AtContent {
        margin: auto;
        max-width: 1000px;
        padding: 0px 40px;
    }

    .AtTitle {
        text-align: center;
    }

    .AtTitle h1 {
        text-align: center;
        font-family: MilkChild;
        font-size: 2.6em;
        letter-spacing: 0.25em;
        color: var(--red2);
        font-weight: 600px;
        text-shadow: 7px 7px 10px gray;
        margin: 40px 0px;
        /* border:1px solid red; */
        display: block;
        border-bottom: var(--red1) 1px solid;
        padding-bottom: 10px;
    }

    .AtText {
        margin-bottom: 40px;
    }

    /* -------- Item Section  --------  */
    .shopFlexContainer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin-bottom: 40px;
    }

    .shopFlex {
        width: 31%;

    }

    .shopFlexText {
        background-color: yellow;
        text-align: center;
        padding: 7px 7px;
    }

    .shopFlex img {
        width: 100%;
    }

    /* -------- Map Section  --------  */
    .mapContainer {

        width: 100%;
        max-width: 800px;
        margin: auto;
        margin-top: 40px;
        position: relative;
        border: 10px solid var(--red2);
        margin-bottom: 40px;
    }

    .mapImage {
        width: 100%;

    }

    /* -------- Payment Logo --------  */
    .CCFlex {
        display: flex;
        width: 100%;
        max-width: 800px;
        margin: auto;
        gap: 30px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .CCFlexItem {
        width: 15%;
    }

    .CCFlexItem img {
        width: 100%;
    }

    /* -------- FB, Instagram Section --------  */
    #BottomBar {
        width: 100%;
        background-color: var(--red1);
        height: 50px;
        margin-top: 50px;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {

    /* level#4 */
    /* ----- Header Section ----- */
    .HeaderContainer {
        text-align: left;
    }

    .HeaderContainer h1 {
        font-family: Niagato;
        font-size: 6em;
        letter-spacing: 0.2em;
        color: var(--red2);
        margin-top: -100px;
    }

    /* -------- Centent Container --------  */
    .AtContent {
        margin: auto;
        max-width: 1000px;
    }

    .AtTitle {
        text-align: center;
    }

    .AtTitle h1 {
        text-align: center;
        font-family: MilkChild;
        font-size: 2.6em;
        letter-spacing: 0.25em;
        color: var(--red2);
        font-weight: 600px;
        text-shadow: 7px 7px 10px gray;
        margin: 40px 0px;
        /* border:1px solid red; */
        display: block;
        border-bottom: var(--red1) 1px solid;
        padding-bottom: 10px;
    }

    .AtText {
        margin-bottom: 40px;
    }

    /* -------- Item Section  --------  */
    .shopFlexContainer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin-bottom: 40px;
    }

    .shopFlex {
        width: 30%;

    }

    .shopFlexText {
        background-color: yellow;
        text-align: center;
        padding: 7px 7px;
    }

    .shopFlex img {
        width: 100%;
    }

    /* -------- Map Section  --------  */
    .mapContainer {

        width: 100%;
        max-width: 800px;
        margin: auto;
        margin-top: 40px;
        position: relative;
        border: 10px solid var(--red2);
        margin-bottom: 40px;
    }

    .mapImage {
        width: 100%;

    }

    /* -------- Payment Logo --------  */
    .CCFlex {
        display: flex;
        width: 100%;
        max-width: 800px;
        margin: auto;
        gap: 30px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .CCFlexItem {
        width: 15%;
    }

    .CCFlexItem img {
        width: 100%;
    }

    /* -------- FB, Instagram Section --------  */
    #BottomBar {
        width: 100%;
        background-color: var(--red1);
        height: 50px;
        margin-top: 50px;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1201px) {

    /* level#5 */
    /* ----- Header Section ----- */
    .HeaderContainer {
        text-align: left;
    }

    .HeaderContainer h1 {
        font-family: Niagato;
        font-size: 5em;
        letter-spacing: 0.2em;
        color: var(--red2);
        margin-top: -90px;
    }

    /* -------- Centent Container --------  */
    .AtContent {
        margin: auto;
        max-width: 1000px;
    }

    .AtTitle {
        text-align: center;
    }

    .AtTitle h1 {
        text-align: center;
        font-family: MilkChild;
        font-size: 2.6em;
        letter-spacing: 0.25em;
        color: var(--red2);
        font-weight: 600px;
        text-shadow: 7px 7px 10px gray;
        margin: 40px 0px;
        /* border:1px solid red; */
        display: block;
        border-bottom: var(--red1) 1px solid;
        padding-bottom: 10px;
    }

    .AtText {
        margin-bottom: 40px;
    }

    /* -------- Item Section  --------  */
    .shopFlexContainer {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        gap: 20px;
        justify-content: center;
        margin-bottom: 40px;
    }

    .shopFlex {
        width: 30%;

    }

    .shopFlexText {
        background-color: yellow;
        text-align: center;
        padding: 7px 7px;
    }

    .shopFlex img {
        width: 100%;
    }

    /* -------- Map Section  --------  */
    .mapContainer {

        width: 100%;
        max-width: 800px;
        margin: auto;
        margin-top: 40px;
        position: relative;
        border: 10px solid var(--red2);
        margin-bottom: 40px;
    }

    .mapImage {
        width: 100%;

    }

    /* -------- Payment Logo --------  */
    .CCFlex {
        display: flex;
        width: 100%;
        max-width: 800px;
        margin: auto;
        gap: 30px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .CCFlexItem {
        width: 15%;
    }

    .CCFlexItem img {
        width: 100%;
    }

    /* -------- FB, Instagram Section --------  */
    #BottomBar {
        width: 100%;
        background-color: var(--red1);
        height: 50px;
        margin-top: 50px;
    }
}