.tiny5-regular {
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* */

body{
    /* background-color:#16587b; */
    background-image: url(websiteRepeatingTiles.png);
    background-repeat:repeat;
    color: #D9FBFF;
    background-color:#15435C;
}

h1{
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 96px;
  margin: 15px 0 0 0;
  text-align: center;
}

h2{
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 48px;
}

p{
  font-family: "Tiny5", sans-serif;
  font-weight: 400;
  font-style: normal; 
  font-size: 32px;
}

a{
    color:#ffc891;
    text-decoration: none;
}

a:hover{
    color: #ffe1c2;
}

button{
    /* background-color: #763b03; */
    background: linear-gradient(180deg, #c59309, #763b03);
    border: 3px double #ffc891;
    color: #ffc891;
    padding: 4px;
    border-radius: 4px;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:32px;
    text-align: center;
    margin: 20px auto 50px auto;
    box-shadow: 5px 5px 5px 2.5px #0f0b2f33;
    transition:all 0.25s ease-out;
}

button:hover{
    /* background-color:#b15600; */
    background: linear-gradient(180deg, #ffad3b, #b15600);
    border-color: #ffe1c2;
    color: #ffe1c2;
    transform: scale(1.10);

}

.header{
    /* background-color:#15435C; */
    background: linear-gradient(180deg, #217d8d 2%, #15435C 20%, #103562 100%);
    border: 1px solid #D9FBFF;
    border-radius: 48px 48px 0px 48px;
    padding: 16px;
    width: 700px;
    height: 200px;
    text-align: center;
    font-family: "Jersey 10", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size:larger;
    margin: 100px auto;
    box-shadow: 10px 10px 10px 5px #0f0b2f33;
    position: relative;
    

}

.icon{
    transform: translate(-100px, -150px);
    position: absolute;
    left: -40px;
    bottom: 160px;
    width: 160px;
    height: 160px;
    transform: rotate(20deg);
    filter: drop-shadow(8px 15px 5px #0f0b2f33);
    transition: all 0.25s ease-in-out
}

.icon:hover{
    content: url(turkeyChickenFlyingIcon.png);
    width: 160px;
    height: 160px;
    transform: rotate(0deg);
}

.main{
    /* background-color:#15435C; */
    background: linear-gradient(180deg, #217d8d 2%, #15435C 20%, #103562 100%);
    border: 1px solid #D9FBFF;
    border-radius: 16px;
    padding: 16px;
    width: 800px;
    height: 500px;
    text-align: left;
    box-shadow: 10px 10px 10px 5px #0f0b2f33;

}

hr{
    color:#D9FBFF;
}

.tutorial-info{
        /* background-color:#15435C; */
    background: linear-gradient(180deg, #217d8d 2%, #15435C 20%, #103562 100%);
    border: 1px solid #D9FBFF;
    border-radius: 16px;
    padding: 16px;
    width: 500px;
    height: 100%;
    box-shadow: 10px 10px 10px 5px #0f0b2f33;
    display: flex;
    flex-direction:column;
    text-align: center;
}

.video-tutorials{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-evenly;

}

.video-card{
    /* background-color: #763b03; */
    background: linear-gradient(180deg, #c59309, #763b03);
    padding: 16px;
    border: 8px double #ffc891;
    border-radius: 8px;
    margin: 10px;
    width: 360px;
    height: 202px;
    box-shadow: 10px 10px 10px 5px #0f0b2f33; 
    transition: all 0.25s ease;
}

.video-card:hover{
    /* background-color: #b15600; */
    background: linear-gradient(180deg, #ffad3b, #b15600);
    border-color: #ffe1c2;
    transform: scale(1.10);

}

.recent-video{
    background: linear-gradient(180deg, #217d8d 2%, #15435C 20%, #103562 100%);
    border: 1px solid #D9FBFF;
    border-radius: 16px;
    padding: 16px;
    width: 800px;
    height: 600px;
    margin: 20px auto 20px auto;
    box-shadow: 10px 10px 10px 5px #0f0b2f33;

}

.recent-content{
        /* background-color: #763b03; */
    background: linear-gradient(180deg, #c59309, #763b03);
    padding: 16px;
    border: 8px double #ffc891;
    border-radius: 8px;
    width: 640px;
    height: 360px;
    box-shadow: 10px 10px 10px 5px #0f0b2f33; 
    transition: all 0.25s ease;
    margin: 20px auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.recent-content:hover{
        /* background-color: #b15600; */
    background: linear-gradient(180deg, #ffad3b, #b15600);
    border-color: #ffe1c2;
    transform: scale(1.10);
    
}

.wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:16px;
}

.about{
        /* background-color:#15435C; */
    background: linear-gradient(180deg, #217d8d 2%, #15435C 20%, #103562 100%);
    border: 1px solid #D9FBFF;
    border-radius: 16px;
    padding: 16px;
    width: 750px;
    height: 900px;
    text-align: left;
    box-shadow: 10px 10px 10px 5px #0f0b2f33;
    

}

.indent{
    text-indent: 2em;
}

.turkey-chicken-standing img{
    width: 400px;
    height: 400px;
    filter: drop-shadow(8px 15px 5px #0f0b2f33);
    transition: all 0.25s ease-in-out;
    position: absolute;
    transform: translate(-30px, -80px);
}

.box-for-standing{
            /* background-color:#15435C; */
    background: linear-gradient(180deg, #217d8d 2%, #15435C 20%, #103562 100%);
    border: 1px solid #D9FBFF;
    border-radius: 16px;
    padding: 16px;
    width: 300px;
    height: 300px;
    box-shadow: 10px 10px 10px 5px #0f0b2f33;
    
}

.about-layout{
    display: flex;
    justify-content: center;
    align-items:flex-start;
    gap: 30px;
    

}

.illustrated-tutorials{
    /* background-color: #763b03; */
    background: linear-gradient(180deg, #c59309, #763b03);
    padding: 16px;
    border: 8px double #ffc891;
    border-radius: 8px;
    width: 330px;
    height: 330px;
    box-shadow: 10px 10px 10px 5px #0f0b2f33; 
    transition: all 0.25s ease;
    margin: 10px auto;


}

.illustrated-tutorials:hover{
    /* background-color: #b15600; */
    background: linear-gradient(180deg, #ffad3b, #b15600);
    border-color: #ffe1c2;
    transform: scale(1.10);
}

.illustrated-card{
    width: 300px;
    height: 300px;
    border: 8px double #ffc891;
    display: flex;
    justify-content: center;
    align-items: center;
}