@import url('https://fonts.googleapis.com/css2?family=Dekko&family=Delius&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Protest+Riot&display=swap');
/*
font-family: 'Protest Riot', sans-serif;
font-family: 'Kanit', sans-serif;
*/


body {
    font-family: 'Kanit', sans-serif;
    background-image: url(paper-texture4-transformed.png);
    background-repeat: repeat;
    background-size: 50%;
}

#homepage {
    width: auto;
    border: 5pt solid black;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
    padding: 5px;
    overflow-y: hidden;
   
}

    #header {
        width: 100%;
        height: 130px;
        float: left;
        border-top-right-radius: 35px;
        background-image: url(notebooktexture.jpeg);
        background-repeat: repeat;
        background-size: 300px;
        padding-top: 30px;
    
    }

        #headercontainer {
            width: 630px; height: 75px;
            background-color: white;
            border: 5pt solid black;
            float: center;
            margin: auto;
            padding: 5px;
            
        }

        #homepagetitle {
            float: center;
            text-align: center;
            line-height: .2;
            font-family: 'Kanit', sans-serif;
        }

            #homepagemaintitle {
                font-style: italic;
            }

                #killertext {
                    transition: .5s;
                }
                #killertext:hover {
                    color:crimson;
                }

            #homepagesubtitle {
                font-weight: 500;
            }

        
        #menu {
            width: 180px;
            height: 150%;
            background-color: black;
            float: left;
            position: relative;
            
        }

            #menu * {
                padding: 0px;
                margin-bottom: 10px;
            }

            #homepagetitleimg {
                width: 110px; height: 110px;
                margin: 22px auto;
                margin-bottom: 25px;
                border: 3pt solid rgb(255, 255, 255);
                border-radius: 65px;
                background-image: url(CYOA.png);
                background-size: 180%;
                background-position: center center;
                transition: 1s;
            
            }

                #homepagetitleimg:hover {
                    transform: rotate(180deg);
                }

            #menu li{
                position: relative;	
                list-style: none;
            }

            #menu li a{
                width: 150px;
                height: 40px;
                display: block;
                margin: auto;
                border-radius: 5px;
                border: 2pt solid white;
                color: white;
                text-align: center;
                text-decoration: none;
                font-size: 14pt;
                line-height: 40px;
                transition: .5s;
            }

            #menu li a:hover {
                color: white;
                border-radius: 15px;
                font-weight: bold;

            }

    #mainsection {
        width: auto;
        margin-left: 180px;
    
    }

    #mainimg {
        width: 300px;
        min-width: 150px;
        background-size: contain;
        background-position: center 0px;
        margin: 10px;
        margin-top: 0px;
        background-image: url(boywithbook.webp);
        background-repeat: no-repeat;
        transition: 1s;
        flex: 1;
       
    }
        #mainimg:hover {
            background-size: 120% auto;
        }

    #mainStartButton {
        width: 180px;
        margin: auto;
        position: relative;    
    }

    #mainStartButton a{
        width: 150px;
        height: 40px;
        font-family: 'Kanit', sans-serif;
        font-style: normal;
        display: block;
        margin: auto;
        border-radius: 5px;
        border: 2pt solid rgb(0, 0, 0);
        color: rgb(0, 0, 0);
        text-align: center;
        text-decoration: none;
        font-size: 14pt;
        line-height: 40px;
        transition: .5s;
    }

        #mainStartButton a:hover {
            color: rgb(28, 28, 28);
            border-radius: 15px;
            font-weight: bold;
        }

    #maintext {
        width: auto; height: auto;
        float: center;
        padding: 0px 10px;
      
    }
        #maintexttitle {
            text-align: center;
            font-size: 42;
            margin: 20px;
            margin-top: 0px;
            padding-top: 175px;
            float: center;
        }

        #maintextquoteblock {
            width: 75%;
            float: center;
            margin: 0px auto;
            margin-bottom: 20px;
            padding: 0px 10px;
            font-size: 14pt;
            font-family: 'Delius', sans-serif;
            font-style: italic;
            text-align: center;

        }

        #maintextbottomsection {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            
        }

        #maintextdescription {
            font-size: 14pt;
            padding: 10pt;
            flex: 3;        
        }


        #ffooterimg {
            width: 100%; height: 30px;
            background-color: black;
            background-image: url(notebooktexture.jpeg);
            background-repeat: repeat;
            background-size: 300px;
            position: absolute;
            bottom: 17px;
            left: 150px;
 
        }