body{background-color: #343333;
    background-image:url(images/backgroundimage.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: fixed;
}
#div1{background: linear-gradient(180deg, #962c2a 0%, #4c1212 50%, #343333 100%);
    display:flex;
    border-style:dashed;
    border-color: #e0cdcd;
    flex-direction: column;
    margin:20px 10px 100px 10px;
    padding:0px 10px 30px 10px;

}

.container{
    flex:auto;
    text-align:center;
}

.container2{flex:auto;
    display:flex;
    justify-content: right;
}

h1{
    font-family: "cheee-wowie", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:100pt;
      color:#e0cdcd;
}
.button1{ 
    background-color: transparent;
    border:none;
    margin:10px 30px 10px 30px;
}

.button1:hover{
    width:70px;
    height:70px;
}
.button2{ 
    background-color: transparent;
    border:none;
    margin:10px 30px 10px 30px;
}
.button2:hover{
    width:70px;
    height:70px;
}

#div3{
    font-style: normal;
    display:flex;
    position: absolute;
    right:130px;
    top:25%;
}

.container3{background-color:#4c1212;
    background: linear-gradient(180deg, #343333 0%, #4c1212 50%, #962c2a 100%);
    border-style:dashed;
    border-color: #e0cdcd;
    display:grid;
    padding:50px 25px 50px 25px;
    margin:100px 10px 100px 10px;
}

.pic1{width:100%;
    height:100%;
    grid-column-start: 1;
    grid-column-end:1;
    grid-row-start:1;
    grid-row-end:2;
}

h2{color:#962c2a;
    text-align:left;
    font-size:100pt;
    font-family: "cooper-black-std", serif;
    font-weight: 400;
    font-style: normal;
    grid-column-start: 2;
    grid-column-end:2;
    grid-row-start:1;
    grid-row-end:1;
    padding: 20px 20px 20px 20px;
    margin: 20px 20px 20px 20px;
    align-content:start;
}

p{text-align:left;
    font-size: 20pt;
    font-family: "clarendon-urw", serif;
    font-weight: 400;
    font-style: normal;
    color:#e0cdcd;
    grid-column-start: 2;
    grid-column-end:2;
    grid-row-start:1;
    grid-row-end:1;
    align-content:end;
    padding: 20px 20px 20px 20px; 
    margin: 5px 20px 0px 20px;

 }


.container4{background: linear-gradient(180deg, #962c2a 0%, #4c1212 50%, #343333 100%);
            border-color:#e0cdcd;
            border-style:dashed;
            margin:20px 10px 100px 10px;
            height:300px;
            text-align: center;
}

h3 {font-family: "arbotek", sans-serif;
font-weight: 900;
font-style: normal;
color:#e0cdcd;
text-align: center;
justify-content: center;
font-size: 80pt;
}

.carousel{margin:5px auto;
        display:flex;
        overflow-x: auto;
    }
.carousel::-webkit-scrollbar{display:none;}

.cgroup{display:flex;
        align-items: center;
        justify-content: center;
        gap:1em;
        animation:spin 8s infinite linear;
        padding-right:1em;
}

.card{padding:1em;
    flex:0 0 5em;

}

.card img{height:400px;
    width:400px;}

@keyframes spin{
    from{translate:0;}
    to{translate:-100%;}
}

.kheader
    {background: linear-gradient(180deg, #343333 0%, #4c1212 50%, #962c2a 100%);
    border-style:dashed;
    border-color: #e0cdcd;
    margin:20px 10px 100px 10px;
    height:300px;
    text-align: center;}

h4{font-family: "arbotek", sans-serif;
font-weight: 900;
font-style: normal;
color:#e0cdcd;
font-size: 75pt;
text-align: center;
justify-content: center;
}

.kittygroup{display:grid;
grid:auto / repeat(3, 1fr);
justify-items: center;
margin:1em;
grid:auto-fit;
gap:1em;

}

.kittyclick{background-color:#4c1212;
    background: linear-gradient(180deg, #343333 0%, #4c1212 50%, #962c2a 100%);
    border-style:dashed;
    border-color: #e0cdcd;
     font-family: "cheee-wowie", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:100pt;
      color:#e0cdcd;
      text-align: center;
      align-content: center;
      font-size: 50pt;
      height:400px;
      width:400px;
    
    
}

.kitties{background-color: transparent;
         border:none;

}

.kitties img{height:400px;
    width:400px;}

 @media (max-width: 700px) {
.kittygroup {
    display:flex;
    flex-direction:column;}
#div1{justify-content:center;}
.container{justify-content: center;}
.container3{display:flex;
    flex-direction: column;}
h2{font-size:40pt;}
h1{font-size:40pt;}
h4{font-size:40pt;}
 }