@font-face {
    font-family: firstTimeWriting;
    src: url(FirstTimeWriting!.ttf);
}


* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    background-image: url(./media/img/cats-paw-pattern.jpg);
    background-position-y: center;
    /* background-size: cover; */
    background-attachment: fixed;
    background-repeat: repeat-x;

    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Ubuntu', sans-serif;
    color: #4d3119;
}

#form-container{
    border: solid 10px #d38047;
    background-color: #ffccc3;
    height: 85%;
    width: 60%;
    padding-bottom: 1rem;
    text-align: center;
    overflow: auto;
}

.lang span{
    margin-right: 0.3rem;
    font-size: smaller;
}

.lang span:hover{
    text-decoration: underline;
    cursor: pointer;
}

h1, h2 {
    text-align: center;
}

h1{
    margin-top: 0.6rem;
    font-size: 2rem;
}

h2 {
    
    margin-bottom: 0;
}


h3 {
    margin-bottom: 0.5rem;
    margin-top: 0.3rem;
   
}

p {
    margin-top:0;
    margin-bottom: 0;
}

.buttons-container {
    display: inline-flex;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding-bottom: 0;
    justify-content: center;
    width: 70%;
}

.fur-buttons{
    display: flex;
    flex-direction: column-reverse;
    margin: 0.5rem 0.5rem;
    position: relative;
}


.fur-pics{
    height:80px;
    width: 120px;
    border:  #d38047 5px solid;
}


.cat-paw{
    width: 10px;
    height: auto;
    padding-top: 0.6rem;
    margin-bottom: 0;
    color:#4d3119;
}

input{
    padding: 0.3rem;
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
    background-color: #fcefe5;
    border: #d38047 solid 2px;
    width: 13rem;
}

input[type=radio]{
    width: auto;
    position: absolute;
    height: 100%;
    width: 100%;
    margin:0;
    cursor: pointer;
    z-index: 2;
    opacity: 0;
}

input[type=radio]:checked +label{
    border: 5px #4d3119 solid;
    height:90px;
    width: 130px;
}

input[type=radio]:checked +label:before{
    opacity: 0.5;
    
}


input[type=text]{
    color: #b3b3b3;
}

input[type=text]:focus{
    color:#000;
}

input[name="fur"]{
    accent-color: #d38047;
}


input[type=submit]{
    background-color: #d38047;
    border: 3px solid #683d21;
    color:#fcefe5;
    font-weight: 700;
    cursor: pointer;
    margin-top:0.6rem;
    font-weight: bold;
}

input[type=submit]:hover{
    background-color: #f7aa58;
    border: 3px solid #d38047;
}

input[type=button]{
    background-color: #d38047;
    border: 3px solid #683d21;
    color:#fcefe5;
    font-weight: 700;
    cursor: pointer;
    margin-top:0.6rem;
    font-weight: bold;
}

input[type=button]:hover{
    background-color: #f7aa58;
    border: 3px solid #d38047;
}

input[placeholder], [placeholder], *[placeholder] {
    color: black !important;
}

#intro p{
    font-size: 1.3rem;
    margin-left:1rem;
    margin-right: 1rem;
    /* font-family: 'Schoolbell', 'Solitreo', tahoma; */
    font-weight: 700;
    font-family: firstTimeWriting,'Schoolbell', 'Solitreo', tahoma;
}
/*TEST>HTML*/
.form-container-transition{
    border: solid 10px #d38047;
    background-color: #ffccc3;
    height: 85%;
    width: 60%;
    padding-bottom: 1rem;
    text-align: center;
    overflow: auto;
    /* display: none; */
}



/*Transition*/

#transition-h1{
    /* display:none; */
   
    margin-top:2rem;
}

#submit {
    /* display: none; */
}

#twinkle{
   position: relative;
}

#stars {
    position: relative;
    z-index: 0;
    width:auto;
    height: 27rem;
    opacity: 0.3;
}

#wand{
    position:absolute;
    z-index: 1;
    width:27.875rem;
    /* left:30%; */
    transform:translateY(0);
    transform:translateX(-10%);
}

/*MY-KITTY.HTML*/
#kitty-gif{
    display:none;
}
#title{
    display: none;
}
#kitty-gif img{
    width: 500px;
    border: #d38047 solid 5px;
}

#intro{
    display: none;
}

#start-over{
    display:none;
}


/*MEDIA QUERIES*/
/* MOBILE */
@media only screen and (max-width:700px){
    body {
        background-size: contain;
        background-repeat: repeat;
    }

    h1 {
        font-size: 1.4rem;
    }
    
    h2 {
        font-size: 1.2rem;
    }

    h3{
        font-size: 1.1rem;
    }

    #form-container{
        width: 85%;
    }

    .fur-pics{
        height:80px;
        width: 100px;
    }

    input[type=radio]:checked +label{
        border: 5px #4d3119 solid;
        height:89px;
        width: 109px;
    }

    .buttons-container{
        justify-content: center;
        width: 100%;
    }

    #kitty-gif, #white-cat{
       max-width:14rem;
    }

    #black-white-cat{
        max-width:13rem;
     }

     #kitty-gif, #black-cat-crazy{
        max-width:14rem;
     }

     #ginger-cat {
        max-width:14rem;
     }

     #striped-cat {
        max-width:14rem;
     }

    #ginger-white-cat{
        max-width:14rem;
    }
    #wand{
        width: 20.875rem;
        left:-5%; 
    }

    #stars{
        height:22rem;
        width: 100%;
        object-fit: cover;
    }

   
}
/* MobilE Horizontal*/
@media only screen and (max-height:500px){
        /*Transition*/
    #stars {
        height: 12rem;
        width: 15rem;
       
    }

    #wand{
        width:13rem;
        transform:translateX(20%);
        left:15%; 
    }
    
    #transition-h1{
        font-size: 1.4rem;
        margin-top:1rem;
    }

/* TABLET */

@media only screen and (max-width:1024px) and (min-width: 700px){
    #form-container{
        width: 80%;
    }

    .buttons-container{
        width: 100%;
    }


    body {
        background-size: contain;
        background-repeat: repeat-z;
    }

    #kitty-gif, #white-cat{
        max-width:33rem;
     }
}

/*DESKTOP*/
@media screen and (min-width: 1024px) and (max-width: 2000px) {

}

/*SUPER WIDE SCREEN*/
@media only screen and (min-width: 2001px){
    

}