@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

@font-face {
    font-family: 'upheavtt';
    src: url(/_next/static/media/6bf0d4ae55215e7a-s.p.woff2) format('woff2');
    font-display: swap;
}

body{
    background-color: #1883F3;

    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
}

html,
body {
    max-width: 100vw;
    overflow-x: hidden;
}

h1, h2, h3{
    font-family: "upheavtt";
    letter-spacing: .2rem;
}

p{
    font-family: "karla";
    letter-spacing: -.1rem;
}

h1, h2, h3, p {
    margin: 0;
    text-shadow: 1px 1px #EC0888, -1px -1px #03C6F7;
    font-weight: bold;
}



/* ----------------------------------------------------------- */
/* ------------------    HEADER     -------------------------- */
/* ----------------------------------------------------------- */

.header{
    width: 100vw;
    height: 100vh;
    background-color: #1883F3;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
}

.header div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-logo {
    width: 200px;
    height: 200px;
    pointer-events: none;
    border-radius: 100px;
    border: 5px solid blue;
}

.header-title {
    font-size: 45px;
    color: #f0f8ff;
    text-align: center;
}

.header-description {
    font-family: "karla";
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    color: blue;
}

/* ----------------------------------------------------------- */
/* ------------------     ABOUT     -------------------------- */
/* ----------------------------------------------------------- */

.about{
    width: 100vw;
    padding: 2vh 10vw 10vh 10vw;
    
    background-color: #8ac9ff;
    border-top: 10px solid blue;
}

.about-title{
    color: blue;
    font-size: 5em;
    text-align: center;
}

.about-text{
    margin-top: 15px;
    font-size: 2em;
    text-align: justify;
}

/* ----------------------------------------------------------- */
/* ------------------     DEMOS     -------------------------- */
/* ----------------------------------------------------------- */

.demonstration{
    width: 100vw;
    padding: 3vh 5vw 10vh 5vw;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #0A0818;
    border-top: 10px solid blue;
}

.demonstration-title{
    display: block;
    width: 100%;
    margin-bottom: 25px;

    color: rgb(0, 0, 146);
    font-size: 5em;
    text-align: center;
}

.demonstration-content{
    display: block;
    max-width: 1500px;
}

.demonstration-content-title{
    text-align: center;
    color: #101833;
    font-size: 3vw;
}

.demonstration-content-image{
    margin: 0;
    padding: 0;
    width: 100%;
    border-radius: 15px;
    pointer-events: none;
}

.demonstration-content-text{
    color: aliceblue;
    font-size: 1.5vw;
    text-align: justify;
    letter-spacing: .01rem;
}

/* ---------------------------------------------- */

.demonstration-use{
    border-left: 5px solid #03C6F7;
    border-right: 5px solid #EC0888;
}

.demonstration-use-right{
    
}

.demonstration-use-left{
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------- */

.demonstration-styles{
    margin-top: 50px;
    border-right: 5px solid #03C6F7;
    border-left: 5px solid #EC0888;
}

.demonstration-styles-right{
    margin: 0;
    padding: 0;
}

.demonstration-styles-left{

}

/* ----------------------------------------------------------- */
/* ------------------     GALERY    -------------------------- */
/* ----------------------------------------------------------- */

.galery{
    width: 100vw;
    padding: 3vh 2vw;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #8ac9ff;
    border-top: 10px solid blue;
}

.galery-title{
    color: blue;
    font-size: 5em;
    text-align: center;
    margin-bottom: 3vh;
}

.galery-carousel-list{

    width: 100%;
    max-width: 1500px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
    gap: 15px;

}

.galery-carousel{
    
    background-color: #04040A;

    border-radius: 50px;
    border-top: 5px double #03C6F7;
    border-left: 5px double #03C6F7;
    border-bottom: 5px double #EC0888;
    border-right: 5px double #EC0888;

    display: block;
    max-width: 750px;
}

.carousel-title{
    margin: 10px;

    color: #1c2a3f;

    font-size: 1.75vw;
    text-align: center;
}

.carousel-item-image{
    margin: 0;
    padding: 0;
    width: 100%;
    border-radius: 45px;
    pointer-events: none;
    border-top: 2px dashed #EC0888;
}

.carousel-indicators{
    background-color: #04040ad2;
    border-radius: 50px;
    border-top: 3px double #03C6F7;
    border-left: 3px double #03C6F7;
    border-bottom: 3px double #EC0888;
    border-right: 3px double #EC0888;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;

    width: 40px;
    height: 75px;
    background-color: #04040A;
    border-radius: 50px;
    border-top: 5px double #03C6F7;
    border-left: 5px double #03C6F7;
    border-bottom: 5px double #EC0888;
    border-right: 5px double #EC0888;
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;

    width: 40px;
    height: 75px;
    background-color: #04040A;
    border-radius: 50px;
    border-top: 5px double #03C6F7;
    border-left: 5px double #03C6F7;
    border-bottom: 5px double #EC0888;
    border-right: 5px double #EC0888;

}

/* ----------------------------------------------------------- */
/* ------------------     FOOTER    -------------------------- */
/* ----------------------------------------------------------- */

.footer{
    width: 100vw;
    padding: 3vh 2vw;

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    background-color: #1883F3;
    border-top: 10px solid blue;
}

.footer-content{
    width: 100%;
    max-width: 1250px;

    display: grid;
    align-items: center; 
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: 15px;
}

.footer-left{
    display: block;
    background-color: #00000059;
    border-radius: 25px;
    padding: 2vh 5vw;
}

.footer-right{
    display: block; 
}

.footer-title{
    text-align: center;
    color: #101833;
    font-size: 4em;
}

.footer-text{
    color: aliceblue;
    font-size: 1.65em;
    text-align: justify;
    letter-spacing: .01rem;
}

.footer-button{
    margin: 10px 0;
    padding: 0;
    height: 50px;
    display: block;
    background-color: #000;
    transition: background-color 0.1s ease-in-out;

    border-left: 3px double #03C6F7;
    border-right: 3px double #EC0888;
}

.footer-button:hover {
    background-color: #101833;
}

.footer-button-text{
    margin: 1px;
    width: 100%;
    height: 100%;
    
    text-align: center;
    text-decoration: none;
    font-size: 24px;
    
    display: inline-block;
    
    letter-spacing: .1rem;
    
    line-height: 48px;
}

.kofi-div{
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
}

.kofi-embed{
    border:none;
    width:400px;
    background-color: #111926;

    border-radius: 50px;
    border-top: 5px double #03C6F7;
    border-left: 5px double #03C6F7;
    border-bottom: 5px double #EC0888;
    border-right: 5px double #EC0888;
}