@font-face{
    font-family: theCustomFont;
    src:url(PressStart2P-Regular.ttf);
}

body{
    margin:0;
    background: #082b38;
    background: linear-gradient(0deg,rgba(8, 43, 56, 1) 4%, rgba(11, 69, 82, 1) 59%, rgba(8, 93, 112, 1) 100%);
     min-height:100vh;
     overflow-X:hidden;
}

#gameArea{

    height:500px;
    width:350px;
    border:5px solid #94F7ED;
    border-radius:15px;
    corner-shape:squircle;
    margin:0px;
    padding:0px;   
    overflow:hidden;
    background-color: rgb(7, 205, 250);
    position:relative;
    

}

#hitbox{
 position:absolute;
    left:4px;
    background:none;
    /*border: 2px solid black;*/
    content:"";
    width:24px;
    height:24px;
    border-radius:50%;
    z-index:500;
}

#flappy{

    position: relative;
    top:238px;
    left:50px;
    width:32px;
    height:24px;
    z-index:499;
    margin:0px;
    padding:0px;
    background-image: url(flappy.png);
    background-position: center;
    background-size:cover;
    background-repeat: no-repeat;
    /*border: 1px solid black;*/

}

#gameTitle{
    position:static;
    padding-top: 2em;
    left: 50%;
    text-align:center;
    /*transform: translateX(-50%);*/
}

#score {

    position:relative;
    z-index: 9999;
    top:5px;
    left:50%;
    text-align:center;
    transform:translateX(-50%);
    right: 155px;
    font-family: theCustomFont;
    color:black;
    font-size: 35px;
}

#brush1{

    position:absolute;
    left:0px;
    top:450px;
    background-image: url(brush.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height:50px;
    width:350px;
    z-index: 9997;

}
#brush2{
    position:absolute;
    left:350px;
    top:450px;
    background-image:url(brush.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height:50px;
    width:350px;
    z-index: 9997;
}

#background1{

    position:absolute;
    left:0px;
    top:300px;
    background-image: url(background.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height:200px;
    width:350px;
    z-index: 0;

}
#background2{
    position:absolute;
    left:350px;
    top:300px;
    background-image:url(background.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height:200px;
    width:350px;
    z-index: 0;
}

#sky1{

    position:absolute;
    left:0px;
    top:0px;
    background-image: url(sky.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height:200px;
    width:350px;
    z-index: 0;

}
#sky2{
    position:absolute;
    left:350px;
    top:0px;
    background-image:url(sky.png);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    height:200px;
    width:350px;
    z-index: 0;
}


#restart{

    height:40px; 
    width:100px; 
    left:125px; 
    top:230px;
    z-index:9999;
    position:absolute;
    background:red;
    border:2px solid black;
    color:white;
    border-radius:30px;
    corner-shape: squircle;
    overflow:hidden;
    font-family: theCustomFont;
    text-align:center;
    transition:1s

}
/*
#restart::before{

    content: "";
    position:absolute;
    top:-2px;
    left: -150px;
    width:125px;
    height:22px;
    transform:skewX(30deg);
    background: #d1f0d4;
    background: linear-gradient(90deg, rgba(209, 240, 212, 1) 0%, rgba(168, 173, 168, 1) 100%);
    transition:1s;
    z-index:-1;

}
*/
#restart:hover::before{
    left: -10px;

    transition:1s;

}
#restart:hover{
    transform: translateY(-10px);
    height:50px;
    border-bottom:10px solid black;
    transition:1s
}
#restart:active{

    transform: translateY(0px);
    height:40px;
    border-bottom: 2px solid black;
    transition: 100ms;

}

/*
#restart::after{

    content: "";
    position:absolute;
    top:20px;
    left: 125px;
    width:125px;
    height:20px;
    transform:skewX(30deg);
    background: #d1f0d4;
background: linear-gradient(90deg, rgba(209, 240, 212, 1) 0%, rgba(168, 173, 168, 1) 100%);
z-index:-1;
transition:1s;

}
*/
#restart:hover::after{

     left: -10px;

    transition:1s;

}

#radio{

    border:5px solid #94F7ED;
    border-radius:15px;
    padding:15px;
    corner-shape: squircle;
    width:100px;
    height:150px;
    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:center;
    gap:20px;
      background: linear-gradient(180deg,rgba(255, 3, 238, 1) 0%, rgba(5, 252, 232, 1) 100%);
}

#radio div{

    position:relative;
    left:0px;
    font-size:20px;
     font-family: theCustomFont;
    font-size:11px;
    color:white;

}

.format{
    font-family:theCustomFont;
    font-size:15px;
    color:white;
}


#scoreboard{

    border:5px solid #94F7ED;
    border-radius: 15px;
    corner-shape:squircle;

    width:100px;

    display:flex;
    flex-direction:column;
    gap:20px;
    justify-content:center;
    align-items:center;
    padding:15px;

    overflow:hidden;

    background: linear-gradient(180deg,rgba(255, 3, 238, 1) 0%, rgba(5, 252, 232, 1) 100%);

}

#scoreboard div{

    border:2px solid white;
    border-radius:15px;
    corner-shape: squircle;
    text-align:center;
}


#importantstuff{

    position:static;
    display:flex;
    flex-direction:row;
    gap:5px;
    justify-content:center;
    align-items:center;
    text-align:center;
    left: 50%;
}

h1{
    position:static;
}

input[type="radio"] {
  /* Remove default styling */
  appearance: none;
  -webkit-appearance: none;
  
  /* Create square shape */
  width: 15px;
  height: 15px;
  border: 2px solid white;
  background-color: white;
  cursor: pointer;
  transition:0.5s;
}

/* Optional: Fill the square when checked */
input[type="radio"]:checked {
  background-color: red;
  transition:0.5s;
}



#mainScreen{

    position:fixed;
    left:250%;
    top:50%;
    transform:translate(-50%,-50%);
    height:400px;
    width:600px;
    border:4px solid black;
    border-radius:15px;
    background-color: white;
    background-image: url(wood.jpg);
    background-size:cover;
    z-index:99999;
    opacity:0;
}

.screen{
    position:absolute;
    height:350px;
    width:550px;
    background-image: url(paperbkg.jpg);
    background-size:cover;
    color:black;
    border-radius:15px;
    background-color: #f7c092;
    z-index:99999;
}

#screen1{
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}

.animationForTutorial{

    animation-name:tutorialComingAnimation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;

}
.animationForTutorialGoAway{
    
    animation-name:tutorialGoingAwayAnimation;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
}

@keyframes tutorialComingAnimation{
    0%{
        left:250%;
        opacity:0;
    }
    90%{
        left:45%;
        width:605px;
    }
    96%{
        left:52%;
        width:605px;
    }
    100%{
        left:50%;
        opacity:1;
        width:600px;
    }
}
@keyframes tutorialGoingAwayAnimation{
    0%{
        left:50%;
        opacity:1;
    }
    100%{
        left:250%;
        opacity:0;
    }
}
#tutorial{
    position:fixed;
    left:95%;
    top:5%;
    transform:translate(-50%,-50%);
    color:white;
    background-color: black;
    border:3px solid white;
    height:60px;
    width:120px;
    font-size: 20px;
    text-align:center;
    border-radius:10px;
    padding:5px;
    overflow:hidden;
    transition: 0.5s;
}
#tutorial:hover{
    cursor:pointer;
    height:10%;
    width:10%;
    font-size: 25px;
    transition:0.5s;
}
#tutorial:active{
    height:50px;
    width:100px;
    font-size: 15px;
    transition:0.1s;
}

#tutorialText1{
    position:relative;
    left:50%;
    top:20%;
    transform:translate(-50%, -50%);
    font-family: theCustomFont;
    font-size:10px;
    line-height:1.25em;
    margin:auto;
    padding:10px;
    text-align:center;
}

#closeTutorial{
   position: absolute;
    top: 0px;
    left: 600px;
    transform: translate(-50%, -50%);
    color: red;
    border: 3px solid black;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    font-size: 15px;
    text-align: center;
    background-color: white;
    transition: 0.75s;
}
#closeTutorial:hover{
    cursor:pointer;
    background-color:white;
    height: 35px;
    width:35px;
    font-size:20px;
    transition: 0.5s;
}
#closeTutorial:active{
    background-color:white;
    height:20px;
    width:20px;
    font-size:10px;
    transition:0.1s;
}

#tutorialImage1{
    position:relative;
    left:50%;
    top:35%;
    margin:auto;
    transform:translate(-50%, -50%);
    border:5px solid black;
    border-radius:15px;
}

#blackout{
    position:fixed;
    z-index:9998;
    top:-5%;
    width:100vw;
    height:105vh;
    content:"";
}