/* VARIABLE LIBRARY */
:root {
--textMain: white;
--bgColor: black;
--fontMain: Atkinson;
--fontTitle: Lexend;
}

/* Elements */
h1 {
    font-family: var(--fontTitle);
    font-size: 50px;
    margin: 0;
    padding: 10px;
}

h2 {
    font-size: 35px;
    margin: 0;
    padding: 5px;
}

a {
    color: #ff5943;
    text-decoration: none;
    &:visited {
        color: #ff5943;
    }
    &:hover {
        color: white;
    }
}

p {
    margin: 0;
    padding: 0 10px 10px 10px;
    font-size: 18px;
}

/* Fonts */
@font-face {
  font-family: Atkinson;
  src: url('https://bloxfables.neocities.org/Assets/fonts/AtkinsonHyperlegible-Regular.ttf');
}

@font-face {
  font-family: Lexend;
  src: url('https://bloxfables.neocities.org/Assets/fonts/Lexend-Regular.ttf');
}

body {
 margin: auto;
 background-color: #03020a;
 color: var(--textMain);
 text-align: center;
 font-family: var(--fontMain);
}

audio {
    margin: 10px 10px 20px 10px;
}

.imgTitle {
    padding: 15px 0 5px 10px;
    margin: auto;
    display: block;
    width: 85%;
    max-width: 600px;
}

.imgH2 {
    padding: 0 0 25px 0;
    margin: auto;
    width: 65%;
    max-width: 450px;
}

.header {
    background-image: url('https://bloxfables.neocities.org/Assets/img/part%20three.png');
    background-color: black;
    background-size: cover;
    background-position-x: 0;
    background-position-y: 25%;
    padding-top: 125px;
}

.navbar {
    background-image: linear-gradient(#070027, #050314);
    border-bottom: solid #261c78 2px;
    border-top: solid white 2px;
    margin-top: 85px;
    padding-top: 10px;
    & ul {
        display: flex;
        list-style-type: none;
        align-items: center;
        padding: 0;
        margin: 0;
        justify-content: space-evenly;
        flex-wrap: wrap;
        gap: 5px;
        & li {
            transition: .2s;
            &:hover {
                transform: scale(1.03) rotate(1deg);
            }
        }
    }
    & .active {
        opacity: 0.5;
    }
    
}

.container {
    width: 80%;
    margin: auto;
}

.conWriting {
    width: 50%;
    margin: auto;
    margin-bottom: 25px;
    & .povCy {
        color: #e3e4ff;
        background-color: #0b0314;
        padding: 25px;
    }
    & #storybook {
        display: block;
        margin: auto;
        width: 95%;
        max-height: 600px;
        object-fit: scale-down;
        padding: 50px 0 10px 0; 
    }
    & .bookButtons {
        display: flex;
        margin: auto;
        align-items: center;
        padding: 8px;
        gap: 5px;
        & .buttonBook {
            margin: auto;
            max-width: 250px;
            background-color: transparent;
            border: none;
            width: 50%;
            cursor: pointer;
            color: white;
        }
    }
}

.notice {
 width: 75%;
 max-width: 700px;
 margin: auto;
 margin-top: 15px;
 background-color: black;
 border: solid red 2px;
 padding: 10px;
 font-size: 18px;
 & .x {
    float: right;
    margin-right: 15px;
    margin-left: 20px;
    font-weight: bold;
    font-size: 25px;
    line-height: 20px;
    transition: 0.3s;
    &:hover {
        color: red;
        transform: scale(1.2) rotate(2deg);
        cursor: pointer;
    }
 }
}

sub {
    vertical-align: middle;
    opacity: 0.6;
    font-size: 14px;
}

.guestbook {
     width: 50%;
     margin: 0 0 50px 0;
     min-height: 800px;
     border-radius: 10px;
     border-top: solid white 5px;
     border-left: solid white 5px;
     border-right: solid #261c78 5px;
     border-bottom: solid #261c78 5px;
}

.artists {
    display: grid;
    font-size: 18px;
    gap: 25px;
    margin-bottom: 75px;
    grid-template-columns: 50% 50%;
    & img {
        margin: 0;
        padding-bottom: 25px;
    }
    & ul {
        list-style-type: none;
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        justify-content: space-evenly;
        gap: 5px;
        & li {
            font-family: var(--fontTitle);
            margin: 0;
            font-size: 25px;
            background-color: #007443;
            border-radius: 75px;
            padding: 10px 15px 10px 15px;
            & a {
                color: white !important;
                text-decoration: none;
            }
        }
    }
    & .catmint {
        margin: 0;
        background-color: rgb(230, 229, 222);
        border-top: solid white 3px;
        border-left: solid white 3px;
        border-right: solid #005252 3px;
        border-bottom: solid #005252 3px;
        border-radius: 10px;
        color: #005252;
        & h2 {
            background-color: #007443;
            color: white !important;
        }
        & p {
            padding: 5px;
        }
        & li {
            margin-bottom: 5px;
        }
    }
    & .tato {
        margin: 0;
        background-color: rgb(233, 218, 218);
        border-top: solid white 3px;
        border-left: solid white 3px;
        border-right: solid #810047 3px;
        border-bottom: solid #810047 3px;
        color: #810047;
        border-radius: 10px;
        & h2 {
            background-color: #810047;
            color: white;
        }
        & p {
            padding: 5px;
        }
        & li {
            background-color: #810047;
            margin-bottom: 5px;
        }
    }
    & .cyus {
        margin: 0;
        background-color: rgb(255, 173, 214);
        border-top: solid white 3px;
        border-left: solid white 3px;
        border-right: solid rgb(228, 0, 49) 3px;
        border-bottom: solid rgb(228, 0, 49) 3px;
        border-radius: 10px;
        color: rgb(131, 0, 55);
        & h2 {
            background-color: #ffed9d;
            color: rgb(233, 74, 0) !important;
        }
        & p {
            padding: 5px;
        }
        li {
            margin-bottom: 5px;
            background-color: rgb(131, 0, 55);
        }
    }
    & .cee {
        margin: 0;
        background-color: rgb(255, 192, 150);
        border-top: solid white 3px;
        border-left: solid white 3px;
        border-right: solid rgb(167, 31, 31) 3px;
        border-bottom: solid rgb(167, 31, 31) 3px;
        border-radius: 10px;
        color: rgb(131, 0, 55);
        & h2 {
            background-color: rgb(167, 31, 31);
            color: rgb(255, 255, 255) !important;
        }
        & p {
            padding: 5px;
        }
        li {
            margin-bottom: 5px;
            background-color: rgb(167, 31, 31);
        }
    }
}

.comicCon {
    margin: auto;
    width: 100%;
    max-width: 750px;
}

.pagesChar {
    width: 100%;
    max-width: 750px;
    border: solid 5px rgb(223, 7, 0);
    margin: auto;
    & img {
        display: block;
        margin: auto;
        width: 100%;
        max-width: 750px; 
    }
}

.buttonHalf {
    display: grid;
    align-items: center;
    grid-template-columns: 50% 50%;
    list-style-type: none;
    padding: 5px;
    & img {
        width: 90%;
        max-width: 250px;
    }
}

.buttons {
    display: grid;
    align-items: center;
    grid-template-columns: 25% 25% 25% 25%;
    list-style-type: none;
    padding: 5px;
    & img {
        width: 90%;
        max-width: 250px;
    }
}

.hidden {
    color: #03020a;
}

/* MOBILE */
@media only screen and (max-width: 1000px) {
    h1 {
        font-size: 35px;
    }

    h2 {
        font-size: 28px;
    }

    p {
        font-size: 15px;
    }

    .guestbook {
        width: 90%;
        min-height: 450px;
        margin-bottom: 75px;
    }

    .container {
        width: 100%;
        & .conWriting {
            width: 100%;
            & .bookButtons {
                grid-template-columns: 50% 50%;
                gap: 5px;
                margin: 5px;
                &.buttonBook {
                    font-size: 25px;
                }
            }
        }
    }

    .artists {
        display: block;
        margin: auto;
        margin-bottom: 25px;
        width: 95%;
        font-size: 16px;
        & img {
            max-width: 200px;
        }
        & ul {
            padding: 0;
        }
        & .catmint {
            & h2 {
                font-size: 25px;
            }
        }
    }

    .comicCon {
        width: 100%;
        border: none;
        & .pagesChar {
            border: none;
            border-top: solid 5px rgb(223, 7, 0);
            border-bottom: solid 5px rgb(223, 7, 0);
        }
    }

    .conWriting {
        & #storybook {
            max-height: 500px;
        }
    }
}