@import url('https://fonts.googleapis.com/css2?family=Catamaran&family=Montserrat&display=swap');
a:link {
    color:  rgb(71,71,71);
    text-decoration: none;}
a:visited {
     color:  rgb(111, 111, 111);
     text-decoration: none;}
a:hover {color: rgb(52, 136, 204)}
a:active {color: #FF00CC}

* {
    margin: 0;
    padding: 0;
    }

.fit {
    width: 100%;
    height: 100%;
    
}
.header, .body {
font-family: 'Catamaran', sans-serif;
font-size: calc(var(--vw, 1vw) * 3);
color: rgb(71, 71, 71);
}
.header {
    margin: 40px 50px;
}
.body {
    margin: 30px 50px;
}
.wap {grid-area: wap;}
.telegram {grid-area: telegram;}

.minicontainer {
    height: calc(var(--vw, 1vh) * 20);
    position: relative;
    
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    
}
.email {
    background-image: url("./images/icons/email.png");
    background-size: contain;
    background-repeat: no-repeat;

    
}
.mail2 { 
    font-family: 'Catamaran', sans-serif;
    font-size: calc(var(--vw, 1vw) * 3);
    color: rgb(54, 145, 205);
    grid-area: mail2;
}
#checkout-button {
    height: calc(var(--vw, 1vh) * 10);
    width: calc(var(--vw, 1vh) * 20);
    font-family: 'Catamaran', sans-serif;
    font-size: calc(var(--vw, 1vw) * 4);
    color: rgb(4, 78, 126);
    background-color: rgb(104, 188, 244);
    border-color: rgb(4, 78, 126);
} 
#list1 {
    margin-top: calc(var(--vw, 1vh) * 4);
    margin-left:calc(var(--vw, 1vh) * 10);
    margin-right:calc(var(--vw, 1vh) * 10);
}
#transparent {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 0;
}
.container2 {
    margin-top: 20px;
    margin-left: 10%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 0px;
    column-gap: 1px;
    grid-template-areas:
    "  email wap telegram "
    "  email wap telegram"
    "  mail2 mail2 chat2";
    grid-area: container2;
}
.email    {grid-area:email;}
.wap      {grid-area: wap;}
.telegram {grid-area: telegram;}

.email, .wap, .telegram {
    height: 50px;
    width: 50px;
}
.mail2 { 
    font-family: 'Catamaran', sans-serif;
    font-size: 22px;
    color: rgb(54, 145, 205);
    grid-area: mail2;
}
.chat2 {
    font-family: 'Catamaran', sans-serif;
    font-size: calc(var(--vw, 1vh) * 3.5);
    color: rgb(54, 145, 205);
    grid-area: chat2;
}
@media only screen and (min-width:768px) {
    .maincontainer {
        margin-left: calc(var(--vw, 1vh) * 25);
        margin-right: calc(var(--vw, 1vh) * 25);
    }
.header, .body {
        font-size: calc(var(--vw, 1vh) * 1.5);
    }
    .mail2 { 
        font-family: 'Catamaran', sans-serif;
        font-size: 22px;
        color: rgb(54, 145, 205);
        grid-area: mail2;
    }
    #checkout-button {
        font-size: calc(var(--vw, 1vh) * 3);
        height: calc(var(--vw, 1vh) * 7.5);
        width: calc(var(--vw, 1vh) * 15);
    }

    
        .mail2 { 
            font-family: 'Catamaran', sans-serif;
            font-size: 22px;
            color: rgb(54, 145, 205);
        }
        .chat2 {
            font-family: 'Catamaran', sans-serif;
            font-size: 22px;
            color: rgb(54, 145, 205);
        }
        .email, .wap, .telegram {
            height: 90px;
            width: 90px;
        }
        .navbar {
            padding-right: 25%;
            padding-left: 25%;
        }
}