main{
    max-width: 1200px;
    overflow-x: hidden;
}
*{
    margin:auto;
    box-sizing: border-box;
}
.notes{
    font-family:"Pacifico", cursive;
}
.games{
    font-family: "Press Start 2P", system-ui;
}
nav{
    background-color: #1A1F2E;
    color:lightgray;
    padding:10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 0 0 10px 10px;
}
body{
    background-color:#121826;
    overflow-x: hidden;
}
a{
    padding: 10px;
    position:sticky;
    border: 2px solid transparent;
    border-radius: 10px;
}
.nav-item{
    text-decoration:none ;
    font-family: poppins;
    color: lightgray;
}
.nav-item:hover{
    border: 2px solid lightgray;
    border-radius: 10px;
}
.active{
    border: 2px solid transparent;
    background-color: lightgray;
    border-radius:10px;
    text-decoration: none;
    color: #1A1F2E;
    font-family: poppins;
}
ul{
    width: 400px;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    list-style: none;
}
.section1{
    margin-top:70px;
    width:70%;
    color:lightgray;
    background-color:#1A1F2E;
    text-align:center;
    padding:20px;
    font-family: poppins;
    border-radius: 7px 30px;
}
.section1-header{
    font-size: xx-large;
    font-weight: bold;
}
.section1-text{
    font-size: large;
}
.section2{
    background-color:transparent;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 70px;
    border-radius: 15px;
    overflow: hidden;
}
.section2-part{
    padding: 20px;
    text-align: center;
    color:lightgray;
    background-color: #1A1F2E;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: poppins;
    width:37%;
    height:400px;
    border-radius: 15px;
    transition: transform 0.3s ease;
}
.section2-btn{
    background-color: #121826;
    border: 2px solid lightgray;
    color:lightgray;
    margin:10px;
}
.section2-button{
    background-color: #121826;
    border: none;
    color:lightgray;
}
.section2-part:hover{
    transform: translateY(-5px);
}
footer{
    background-color:#1A1F2E;
    height:100px;
    margin-top:80px ;
    overflow: hidden;
    border-radius:10px 10px 0 0;
    word-spacing: 1px;
}
.icon{
    width: 50px;
    height: 50px;
    margin-top: 25px;

}
.footericons{
    width:100%;
    height:50px;
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.theme-changer{
    background-color: lightgrey;
    color: #1A1F2E;
    border: none;
    padding: 10px;
    border-radius: 7px;
}
.light-theme{
    background-color:lightgrey;
    color:#121826;
}
.notes-area{
    background-color: #1A1F2E;
    display: flex;
    border-radius: 15px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding:20px;
    color: lightgray;
    font-family: poppins;
    margin-top: 70px;
}
form{
    width: 100%;
    display: flex;
    align-items: center;
}
.note-taker{
    width:70%;
    height: 300px;
    border-radius: 15px;
    background-color: lightgray;
    border: none;
    resize: none;
    text-overflow: clip;
    font-family: pacifico;
    margin-bottom: 20px;
    margin-top: 20px;
}
.download{
    background-color: lightgray;
    border: none;
    border-radius: 7px;
    padding:10px
}
.stage{
    margin-top: 30px;
    width: 100%;
    color: lightgray;
    display:flex;
    flex-direction: column;
    align-items: center;
    font-family: "Press Start 2P";
    text-align: center;
}
.stage-lighttheme{
    color: #121826;
}
.gesture-container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
}
.gesture{
    width:50%;
    height:300px;
    margin-bottom: 30px;
    border: 2px solid transparent;
}
.gesture-frame{
    padding: 20px;
    border: 2px solid transparent;
    border-radius: 15px;
    margin:0 10px;
    width:30%;
}
.gesture-frame:hover{
    border: 2px solid lightgray;
    cursor: pointer;
}
.gesture-frame-lighttheme:hover{
    border: solid 2px #121826;
    cursor: pointer;
}
footer p{
    color: lightgray;
    font-family: poppins;
    text-align: center;
    margin-top: 20px;
}
footer a{
    color: lightgray;
    text-decoration: none;
}
footer a:hover{
    text-decoration: underline;
}