/*---------------------------------------------------------------
                       DESKTOP
---------------------------------------------------------------*/

@media only screen and (min-width: 900px) { 
    /* ruleset for >= 600px */


body
{
text-align: center;
        background-color:white;/* Used if the image is unavailable */
color:#474747;
background-image: url("background.png");
background-size:cover;
   background-repeat: no-repeat, repeat;
      background-position: center; /* Center the image */
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
letter-spacing: 0;
line-height:auto;
margin: auto;
padding:0;
}

#cursor {
cursor:url("cursor.png"), auto;
}

#logo
{
  height:auto;
  width:60px;
  margin:20px 0;

}


.top-section
{
  padding:40px 0;
  margin-bottom:80px;
  background-color: white;
  width:100%;
  border-bottom-width: 2px;
 border-bottom-style: solid;
    border-bottom-color: #191919
}

/*H1 Google font used here!*/
h1#pagetitle
{
color: #191919;
text-align: center;
  font-family: "Press Start 2P", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
font-size: 60px;
font-style: normal;
font-weight: 400;
line-height: 70px;
letter-spacing: 2.44px;
margin:60px auto;
max-width:60%;
}

/*H1 different colour bit!*/
span#colourfulheader
{
    color: #C75146;
  font-family: "Press Start 2P", system-ui;
font-size: 60px;
font-style: normal;
font-weight: 400;
line-height:70px;
letter-spacing: 2.44px;
margin:0;
}

h2.card-header
{
    color:#191919;
    text-align: center; 
    font-size: 24px; 
  font-family: "Press Start 2P", system-ui;
      font-weight:normal;
    line-height: 32pt;
    padding:0;
       margin: 0 auto;

}

#intro-text

{
  color: var(--Black-400, #474747);
text-align: center;
margin: 16px auto 40px auto;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-size: 24px;
  font-style: normal;
max-width:60%;
}

p
{
  color:#474747;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
font-style: normal;
letter-spacing: 0;
line-height:20pt;
margin:0px;

}

p.bold
{
  color:#474747;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-size:16px;
font-style: normal;
line-height:auto;
margin:16px 0 20px 0;
}

/*---------------------------------------------------------------
                          CARD STYLES
---------------------------------------------------------------*/
#aiimage
{
  border-width: 0 0 2px 0;
  border-style: solid;
    border-color: #191919;
}

#card-grid
{ 
max-width:960px;
display: grid;
grid-template-columns: repeat(3, 2fr);
grid-auto-rows: auto;
grid-gap: 80px 40px;
margin:auto;
}


.card
{ 
  display: flex;
  background-color: white;
  width: 285px;
  min-height:550px;
  flex-direction: column;
  align-items: flex-start;
  border-style: solid;
  border-width: 2px;
  border-color: #191919;
  box-shadow: 4px 4px 0px 0px #191919;
  border-radius: 0px;
  overflow: hidden;
}

.card-with-padding
{
  padding: 20px;
  text-align: left;
}

.card-button
{

flex-direction: row;
padding: 8px;
height:auto;
  border-style: solid;
  justify-content: space-between;
  display:flex;
  border-width: 2px;
  border-color: #191919;
align-self: stretch;
   cursor: pointer;
  text-decoration: none;
color: #191919;
background-color: white;
text-align: center;
  font-family: "Chakra Petch", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 2.44px;
margin:0;
text-transform:uppercase;
  box-shadow: 2px 2px 0px 0px #191919;
}

#button-text
{
  float: left;
}

#button-icon
{
margin-left: 10px;
            float: right;
            color:#191919;
}

.card-button:hover
{
  background-color:#A5DAEF;
   transform: scale(1.05)
}

#AI-type
{
  display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 8px;
border-width: 0 0 2px 0;
border-style: solid;
align-self: stretch;
background-color:#EBCF8E;
color: var(--Black-500, #191919);
text-align: center;
  font-family: "Chakra Petch", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.64px;
text-transform: uppercase;

}
/*---------------------------------------------------------------
                          FOOTER STYLES
---------------------------------------------------------------*/


#footer
{

max-width:100%;
  margin: 60px 0 0 0;
  padding:40px 16px;
  border-top-style: solid;
  border-top-width:2px;
  border-color: #191919;
  background-color: white;
  bottom:0;
}


#creator-wrapper
{
  margin:24px;
}


#footer-text
{
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
font-style: normal;
  color:#191919;
font-size: 31px;
margin-bottom: 20px;
}

#AI-nimals-small
{
  color: #C75146;
  margin:0;
}


.creator

{
font-size: 12pt; 
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
font-style: normal;
padding:0px;
color:#191919;
}

.creator-contact
{
font-size: 12pt; 
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
font-style: normal;
padding:0px;
color:#C75146;
}

.longer-footer
{
  color:#A0A0A0;
  font-size:10pt;
  line-height: 11pt;
  max-width:60%;
  margin:auto;
}




/*---------------------------------------------------------------
                           STUFF FOR LATER
---------------------------------------------------------------*/

#secondary-CTA
{

    border-style: solid;
  display:block;
  border-width: 2px 4px 4px 2px;
  border-color: #191919;
  padding: 8px;
  background-color:#EBCF8E;
  width:200px;
   cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
color: #191919;
text-align: center;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
font-style: normal;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin:0;
text-transform:uppercase;
margin:24px auto;
}

#secondary-CTA:hover
{
  background-color:#F3E2BB
}

}

/*---------------------------------------------------------------
                       TABLET SCREEN SIZE
---------------------------------------------------------------*/

@media only screen and (max-width: 900px) { 
    /* ruleset for >= 600px */

body
{

margin:40px;
text-align: center;
background-image: url("background.png");
   background-repeat: no-repeat, repeat;
    background-size: cover;
      background-position: center; /* Center the image */
        background-color:white;/* Used if the image is unavailable */
color:#474747;
font-weight:400;
  font-family: "Chakra Petch", sans-serif;
font-style: normal;
letter-spacing: 0;
line-height:auto;
margin: auto;
padding:0;

}

#logo
{
  height:auto;
  width:60px;
  margin:20px;

}


.margin-top
{
margin-top:60px;
}

.top-section
{
  padding:40px 0;
  margin-bottom:80px;
  background-color: white;
  width:100%;
  border-bottom-width: 2px;
 border-bottom-style: solid;
    border-bottom-color: #191919
}

/*H1 Google font used here!*/
h1#pagetitle
{
color: #191919;
text-align: center;
  font-family: "Press Start 2P", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: 70px;
letter-spacing: 2.44px;
margin:80px auto;
}

/*H1 different colour bit!*/
span#colourfulheader
{
    color: #C75146;
  font-family: "Press Start 2P", system-ui;
font-size: 60px;
font-style: normal;
font-weight: 700;
line-height: 70px;
letter-spacing: 2.44px;
margin:0;
}

h2.card-header
{
    color:#191919;
    text-align: center; 
    font-size: 24px; 
  font-family: "Press Start 2P", system-ui;
      font-weight:normal;
    line-height: 32pt;
    padding:0;
       margin: 0 auto;
}

#intro-text

{
  color: var(--Black-400, #474747);
text-align: center;
margin: 16px auto 40px auto;
  font-family: "Chakra Petch", sans-serif;
font-weight: 400;
font-size: 24px;
font-style: normal;
max-width:80%;
}

p
{
  color:#474747;
  font-family: "Chakra Petch", sans-serif;
font-style: normal;
letter-spacing: 0;
line-height:20pt;
margin:0px;

}

p.bold
{
  color:#474747;
  font-family: "Chakra Petch", sans-serif;
font-weight: 400;
line-height:auto;
  font-size:16px;
margin:16px 0 20px 0;

}

/*---------------------------------------------------------------
                          CARD STYLES
---------------------------------------------------------------*/

#aiimage
{
  border-width: 0 0 2px 0;
  border-style: solid;
    border-color: #191919;
}

#card-grid
{ 
width:700px;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-auto-rows: auto;
grid-gap: 80px 12px;
margin:auto;

}

.card
{ 
 background-color: white;
  margin: 0 12px;
  width: 285px;
  min-height:550px;
  border-style: solid;
 border-width: 2px;
  border-color: #191919;
  box-shadow: 4px 4px 0px 0px #191919;
  overflow: hidden;
}


.card-with-padding

{
  padding: 20px;
  text-align: left;
}




#button-icon
{
  margin-left: 10px;
  float: right;
}


.card-button
{

flex-direction: row;
padding: 8px;
height:auto;
  border-style: solid;
  justify-content: space-between;
  display:flex;
  border-width: 2px;
  border-color: #191919;
  color: #191919;
  background-color: white;
align-self: stretch;
   cursor: pointer;
  text-decoration: none;
text-align: center;
  font-family: "Chakra Petch", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 2.44px;
margin:0;
text-transform:uppercase;
  box-shadow: 2px 2px 0px 0px #191919;
}

#button-text
{
  float: left;
}

#button-icon
{
margin-left: 10px;
            float: right;
            color:#191919;
}

.card-button:hover
{
  background-color:#A5DAEF;
   transform: scale(1.05)
}

#AI-type
{
  display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 8px;
background-color:#EBCF8E;
color: var(--Black-500, #191919);
text-align: center;
  font-family: "Chakra Petch", sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 700;
 border-style: solid;
  border-width: 0 0 2px 0;
  border-color: #191919;
line-height: normal;
text-transform: uppercase;

}

/*---------------------------------------------------------------
                          FOOTER STYLES
---------------------------------------------------------------*/


#footer
{

max-width:100%;
  margin: 60px 0 0 0;
  padding:40px 16px;
  border-top-style: solid;
  border-top-width:2px;
  border-color: #191919;
  background-color: white;
  bottom:0;
}

#creator-wrapper
{
  margin:24px;
}



#footer-text
{
  font-family: "Chakra Petch", sans-serif;
  color:#191919;
font-size: 31px;
margin-bottom: 20px;
}

#AI-nimals-small
{
  color: #C75146;
  margin:0;
}


.creator

{
font-size: 12pt; 
  font-family: "Chakra Petch", sans-serif;
padding:0px;
color:#191919;
}

.creator-contact
{
font-size: 12pt; 
  font-family: "Chakra Petch", sans-serif;
padding:0px;
color:#C75146;
}

.longer-footer
{
  color:#A0A0A0;
  font-size:10pt;
  line-height: 11pt;
}






/*---------------------------------------------------------------
                           STUFF FOR LATER
---------------------------------------------------------------*/

#secondary-CTA
{

    border-style: solid;
  display:block;
  border-width: 2px 4px 4px 2px;
  border-color: #191919;
  padding: 8px;
  background-color:#EBCF8E;
  width:200px;
   cursor: pointer;
  text-align: center;
  text-decoration: none;
  color: #000000;
  font-weight: bold;
color: #191919;
text-align: center;
  font-family: "Chakra Petch", sans-serif;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin:0;
text-transform:uppercase;
margin:12px auto;
}

#secondary-CTA:hover
{
  background-color:#F3E2BB
}

}

/*---------------------------------------------------------------
                       MOBILE SCREEN SIZE
---------------------------------------------------------------*/

@media only screen and (max-width: 600px) { 
    /* ruleset for >= 600px */

body
{

text-align: center;
 background-image: url("background.png");
   background-repeat: no-repeat, repeat;
    background-size: cover;
      background-position: center; /* Center the image */
        background-color:white;/* Used if the image is unavailable */
color:#474747;
font-weight:400;
  font-family: "Chakra Petch", sans-serif;
font-style: normal;
letter-spacing: 0;
line-height:auto;
margin: auto;
padding:0;
}



.margin-top
{
margin-top:60px;
}

.top-section
{
 padding:40px 0;
  margin-bottom:80px;
  background-color: white;
  width:100%;
  border-bottom-width: 2px;
 border-bottom-style: solid;
    border-bottom-color: #191919
}


/*H1 Google font used here!*/
h1#pagetitle
{
color: #191919;
text-align: center;
  font-family: "Press Start 2P", system-ui;
  font-optical-sizing: auto;
  font-style: normal;
font-size: 38px;
font-style: normal;
font-weight: 700;
line-height: 60px;
letter-spacing: 2.44px;
margin:60px auto;
max-width:95%;
}

/*H1 different colour bit!*/
span#colourfulheader
{
    color: #C75146;
  font-family: "Press Start 2P", system-ui;
font-size: 38px;
font-weight: 700;
line-height: 60px;
letter-spacing: 2.44px;
margin:0;
text-align: center;
}

h2.card-header
{
    color:#191919;
    text-align: center; 
    font-size: 24px; 
  font-family: "Press Start 2P", system-ui;
      font-weight:normal;
    line-height: 32pt;
    padding:0;
       margin: 0 auto;
}

#intro-text

{
  color: var(--Black-400, #474747);
text-align: center;
margin: 16px auto 40px auto;
  font-family: "Chakra Petch", sans-serif;
font-weight: 400;
font-style: normal;
max-width:95%;
font-size:20px;
}
p
{
  color:#474747;
  font-family: "Chakra Petch", sans-serif;
font-style: normal;
letter-spacing: 0;
line-height:20pt;
margin:0px;

}

p.bold
{
  color:#474747;
  font-family: "Chakra Petch", sans-serif;
font-weight: 400;
line-height:auto;
  font-size:16px;
margin:16px 0 20px 0;

}

/*---------------------------------------------------------------
                          CARD STYLES
---------------------------------------------------------------*/
#aiimage
{
  border-width: 0 0 2px 0;
  border-style: solid;
    border-color: #191919;
}

#card-grid
{ display: block;
align-items: center;
width:auto;
margin:12px;
}

.card
{ 
  background-color: white;
  margin: 20px 12px;
  width: 80%;
  min-height:350px;
  margin: 80px auto;
  border-style: solid;
  border-width: 2px;
  border-color: #191919;
  border-radius: 0px;
  overflow: hidden;
}

.card-with-padding
{
  padding: 20px;
  text-align: left;
}


.card-button
{
display: flex;
padding: 8px 12px;
justify-content: center;
color: #191919;
align-items: center;
gap: 12px;
align-self: stretch;
background-color:white;
box-shadow: 2px 2px 0px 0px #191919;
margin:auto;
}




p.bold
{
       align-self: stretch;
       margin:20px auto;
       padding:0px;
       text-align:center;
}

#AI-type
{
  display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
background-color:#EBCF8E;
color: var(--Black-500, #191919);
text-align: center;
  font-family: "Chakra Petch", sans-serif;
font-size: 16px;
border-width:0 0 2px 0;
font-style: normal;
font-weight: 700;
line-height: normal;
letter-spacing: 0.64px;
text-transform: uppercase;

}

/*---------------------------------------------------------------
                          FOOTER STYLES
---------------------------------------------------------------*/

#footer
{

max-width:100%;
  margin: 60px 0 0 0;
  padding:40px 16px;
  border-top-style: solid;
  border-top-width:2px;
  border-color: #191919;
  background-color: white;
  bottom:0;
}

#creator-wrapper
{
  margin:80px 0;
  width::360px
}

#footer-text
{
  font-family: "Chakra Petch", sans-serif;
  color:#191919;
font-size: 31px;
margin-bottom: 20px;
}

#AI-nimals-small
{
  color: #C75146;
  margin:0;
}

.creator

{
font-size: 12pt; 
  font-family: "Chakra Petch", sans-serif;
padding:0px;
color:#191919;
}

.longer-footer
{
  color:#A0A0A0;
  font-size:10pt;
  line-height: 11pt;
}

#creator-info
{display:block;}

.creator-contact
{
font-size: 12pt; 
  font-family: "Chakra Petch", sans-serif;
padding:0px;
color:#C75146;
}



.longer-footer
{
  color:#A0A0A0;
  font-size:10pt;
  line-height: 11pt;
}



/*---------------------------------------------------------------
                           STUFF FOR LATER
---------------------------------------------------------------*/