@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;
Caveat Short stack
*/

body {
    font-family: 'Delius', sans-serif;
    border: 3pt solid rgb(148, 145, 133);
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
    padding: 5px;
    background-image: url(paper-texture4-transformed.png);
    background-repeat: repeat;
    background-size: 50%;
}

#hhomepage {
    width: auto; height: auto;
    border: 5pt solid black;
    border-top-right-radius: 45px;
    border-bottom-right-radius: 45px;
    padding: 5px;
}


    #header {
        width: 100%;
        height: auto;
        border-top-right-radius: 35px;
        padding-top: 30px;
        border-bottom: 3px solid rgb(150, 210, 220);
    }


        #homepagetitle {
            width: 100%;
            margin-left: 10px;
            padding: 5px;
            padding-bottom: 0px;
            text-align: left;
            line-height: .5;
            font-family: 'Delius', sans-serif;
        }

            #homepagemaintitle {
                font-style: italic;
                font-size: 34;
                line-height: 1.1;
                margin-bottom: 0px;
                margin-right: 175px;
            }

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

            #homepagesubtitle {
                font-weight: 500;
                line-height: 1;
                padding-bottom: 0px;
                margin-top: 10px;
                margin-bottom: 15px;
                margin-left: 5px;
                margin-right: 175px;
            }

            #homepagenametitle {
                width: auto; height: 75px;
                float: right;
                margin: auto;
                margin-right: 15px;
                margin-left: 15px;
                margin-top: 0px;
                padding: 5px;
                text-align: right;
                line-height: 1;
                font-family: 'Delius', sans-serif;
            }

        
        #menu {
            width: 180px; height: auto;
            float: left;
        }

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

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

            #menu li a{
                width: 150px;
                height: 40px;
                display: block;
                margin: auto;
                border-radius: 5px;
                border: 2pt solid rgb(150, 210, 220);
                color: rgb(118, 185, 197);
                text-align: center;
                text-decoration: none;
                font-size: 14pt;
                line-height: 40px;
                transition: .5s;
            }

            #menu li a:hover {
                color: rgb(88, 173, 188);
                border-radius: 15px;
                font-weight: bold;
            }

            #sspacer {
                height: 100%;
                background-color: white;
                border: 1px solid red;
                float: center;
            }


    #mainsection {
        width: auto; height: auto;
        border-left: 3px solid rgb(255, 160, 160);
        margin-left: 183px;
    
    }

    #maintext {
        width: auto; height: auto;
        padding: 0px 10px;
        margin-right: 125px;
        padding-bottom: 5px;
        
    }
        #maintexttitle {
            text-align: center;
            font-size: 48;
            margin-bottom: 0px;
            float: center;
        }

        #maintextquoteblock {
            width: 85%;
            float: center;
            margin: 0px auto;
            margin-bottom: 20px;
            padding: 0px 10px;
            border: 2pt solid rgb(150, 210, 220);
            font-size: 16pt;
            font-family: 'Protest Riot', sans-serif;
            font-style: italic;
            text-align: center;

        }

        #maintextstarter {
            font-size: 20pt;
            padding-bottom: 5px;
            padding-top: 0px;
            margin-bottom: 0px;
        }

        #maintextdescription {
            font-size: 16pt;
            padding: 10px;
            padding-bottom: 5px;
            padding-top: 0pt;
            line-height: 1.5;
        }

        #pageselection {
            display: flex;
            row-gap: 20px;
            column-gap: 20px;
            justify-content: space-evenly;
            flex-wrap: wrap;
            font-style: italic;
            font-size: 14pt;
        }

        .pageoption {
            max-width: 225px;
        }

        .pagebuttons {
            font-size: 14pt;
            line-height: 30px;
            transition: .5s;
        }

        .pagebuttons:hover {
            font-size: 15pt;
        }

        .ppagebuttons {
            width: 90px;
            height: 30px;
            display: block;
            margin: auto;
            margin-top: 10px;
            border-radius: 5px;
            color: rgb(160, 238, 255);
            text-align: center;
            text-decoration: none;
            font-size: 16pt;
            font-weight: normal;
            line-height: 30px;
            transition: .5s;
        }

            .ppagebuttons:hover {
                color: rgb(122, 231, 255);
                border-radius: 15px;
                font-weight: bold;
            }

            .pagebuttons a {text-decoration: none;}
                .pagebuttons a:link {color: rgb(118, 185, 197);}
                    .pagebuttons a:link:hover {color: rgb(88, 173, 188);}
                .pagebuttons a:visited {color: rgb(88, 100, 188);}
                    .pagebuttons a:visited:hover {color: rgb(68, 80, 171);}


            #theendtext {
                font-size: 28;
                text-align: center;
                margin-bottom: 0px;
                margin-top: 0px;
            }    
            
            #theendbutton {
                font-size: 22;
                width: 150px;
                height: 30px;
                padding-top: 5px;
                border-radius: 5px;
                border: 2pt solid rgb(150, 210, 220);
                text-align: center;
                font-style: normal;
                transition: .5s;
                line-height: 1.2;
            }
            
            #theendbutton:hover {
                border-radius: 15px;
            }

            #theendbutton a {text-decoration: none; transition: .5s;}
            #theendbutton a:link {color: rgb(118, 185, 197); transition: .5s;}
                #theendbutton a:link:hover {color: rgb(88, 173, 188); font-weight: bold;}
            #theendbutton a:visited {color: rgb(118, 185, 197); transition: .5s;}
                #theendbutton a:visited:hover {color: rgb(88, 173, 188); font-weight: bold;}


        #footerimg {
            width: 100%; height: 30px;
            border-bottom-right-radius: 35px;
            border-top: 3px solid rgb(150, 210, 220);
           
        }

        iframe {
            width: 960px;
            height: 560; 
        }

        #iframediv {
            width: 960px;
            height: 560px;
            margin: 10px;
            position: relative;
        }

        @media screen and (max-width: 1250px) {
            iframe {
                width: 700px;  
                height: 420px;
            }

            #iframediv {
                width: 700px; 
                height: 420px;
              }
            
        }

        @media screen and (max-width: 950px) {
            iframe {
                width: 500px; 
                height: 300px; 
            }

            #iframediv {
                width: 500px;  
                height: 300px;
            }
            
        }

        @media screen and (max-width: 750px) {
            iframe {
                width: 300px; 
                height: 180px; 
            }

            #iframediv {
                width: 300px;
                height: 180px;  
              }
            
        }