:root {

    --outline_col: rgb(68, 44, 34);
    --card_col: #140c0d;

}


* {
    overflow-wrap: break-word;
    word-break: break-word;

 
}


::selection {
  background-color: #ffd19c; 
  color: #000000;            
}




body {
    font-family: monospace;
    
    color: rgb(185, 104, 79);
    font-size: xx-large;
    text-align: center;
    padding: 0px;
    margin: auto;
    background-color: rgb(0, 0, 0);


    text-decoration: none !important;

    text-shadow: 1px 1px 2px rgba(34, 15, 9, 0.137);

    
}

html {

    background-color: rgb(0, 0, 0);

}



a {
    color: #ce3b2d;
    padding-right: 6px;
    padding-left: 6px;
    text-decoration: none;
    background-color: #251618;
    border-radius: 10px;
    line-height: 35px;
    
}

a:hover {
    background-color: #ffbf76;
    color: rgb(36, 3, 11);
     
}

li {
    line-height: 40px;
}

h1 {
    font-size: clamp(10px, 30vw, 150px);
    font-family: "Darumadrop One", sans-serif;
    text-shadow: 1px 1px 20px rgba(49, 7, 11, 0.247);
    color: #854147;
   
}

h2 {
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #c94940;
    margin-top: 20px;
}

strong {

    color: rgb(165, 76, 76);

}

#page {
    max-width: 700px;
    min-width: 0px;
    padding: 40px;
    margin: auto;
}
#better-width {

    max-width: 700px;
    min-width: none;
    padding: 0px;
    margin: auto;

}

#page-games {
    max-width: auto;
    min-width: none;
    padding: 40px;
    margin: auto;
}

.dcontainer {

    padding: 0px; 


    padding-bottom: 20px;

    text-align: left;

    margin: auto;

    max-width: 500px;

    border-radius: 20px;

    background-color: var(--card_col);
    border: 3px dashed var(--outline_col);
    



    h2 {
        text-align: center;
    }
    
}

.dcontainerlist {

    width: fit-content;
    margin: auto;

}

.dcontainer a{

    position: relative;  
    left: -4px;

}

.dcontainer img{

    padding: 0px;
    margin: 0px;
    height: 1em;
    width: auto;
    top: 5px;
    left: 8px;
    position:relative;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}





.topnav{

    padding: 5px;
    margin-top: 20px;

}

.topnav a {
    padding-left: 10px;
    padding-right: 10px;
}

.topnav a.active {
    color: rgb(89, 34, 46);
}

#contact {
    height: 100%;
    max-width: 500px;
    
    padding: 20px;
    border-radius: 20px;

    background-color: var(--card_col);
    border: 3px dashed var(--outline_col);

    
    padding-left: 40px;
    padding-right: 40px;

    margin:auto

}
#contact ul{

    text-align: left;

}

#policy{

    height: 100%;
    max-width: 800px;
    
    padding: 10px;
    padding-bottom: 40px;
    padding-top: 40px;
    border-radius: 40px;
 
   

    
    padding-left: 40px;
    padding-right: 40px;

    margin:auto;
    
}
#policy ul{

    text-align: left;

}
#policy a{
    text-decoration:underline;
}

.sh1 {
    font-size: 70px;
}


.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 10px;
    justify-items: center; 
    max-width: auto; 
    margin: 0 auto; 
}

.tile {
    width: 400px;
    height: auto;
    margin: 0px;
    
    
    padding: 10px;
    border-radius: 40px;


    background-color:#251618;

    transition: background 0.1s ease;

    
    
}

.tile:hover{
    background-color: #db8768;

}

.tile img {
    width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
    border-radius: 30px;
    object-fit: cover;
}



.tile h2 {
    font-size: 40px;
    padding: 0px;
    margin: 0px;
}

.tile p {
    padding: 0px;
    margin: 0px;
    font-size: 30px;
}

.tile-container a {
    text-decoration-style: none;
    color: rgb(185, 104, 79);
    text-decoration: none !important;
    background-color: rgba(0, 128, 0, 0);
}

.tile-container a:hover {
    border-radius: 0px;
    background-color:rgba(0, 0, 0, 0);
}

#my-art img{

    max-width: 70%;
    max-height: 70%;
    border-radius: 30px;
    padding: 20px;
    

    
    
}

.art-picture{

    padding: 30px;
    
    margin: 30px;
    border-radius:20px;
    

    
    background-color: var(--card_col);
    border: 3px dashed var(--outline_col);

    h2 {

        margin-bottom: 0px;
        padding-bottom: 0px;

    }


  

    

}




.document{

    min-width: 0px;
    max-width: 80%;
    
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 7%;
    padding-right: 7%;
    
    margin: auto;
    margin-bottom: 6%;
    border-radius:40px;

    border-radius: 40px;

    background-color: var(--card_col);
    border: 3px dashed var(--outline_col);

    p {
        max-width: 1200px;
        margin: auto;
        margin-bottom: 20px;

        text-align: left;
    }


    iframe{

        width:666px;
        height:480px;

    }


}
.document img{

    max-width: 70%;
    max-height: 70%;
    border-radius:3vmax;
    padding: 2%;   

}

.document iframe{
    max-width: 70%;
    
    border-radius:3vmax;
    padding: 2%;       
    border: none;
}



.eikpixtitle {
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    gap: -10px; 
    margin-top: 10px; 
}

.eikpixtitle img {
    height: 5em;
    width: auto;
    margin: 0px;
}

.eikpixtitle h1 {
    margin: -60px;
    padding: 0;
    margin-bottom: -80px;

}

.centered-page{

    padding-top: 0px; /* Same as header height */
    top:0px;
    position:absolute;
    justify-content: center; /* Horizontally centers the child */
    margin: auto;
    margin-top: 80px;

}

.fullscreen-page{




    width: 100%;
    margin: auto;



    justify-content: center; /* Horizontally centers the child */


    align-items: center; /* Vertically centers the child */

    min-height: 90vh;   /* Minimum height is the viewport */
    width: 100vw;        /* Full width of the viewport */
    box-sizing: border-box;
    overflow: visible;   /* Allow content to expand naturally */
    display: flex;   
    
    
}



@media (max-width: 600px) { /* Small screens */


    

    p {

        margin-left: 20px;
        margin-right: 20px;

        max-width: 1000px;

        font-size:large;
        line-height: 25px;

    }
    ul{
        line-height: 25px;
        font-size:large;

        li{
            margin-bottom: 10px;
        }
    }

    #better-width{
        margin-left: 20px;
        margin-right: 20px;    
    }
    h2 {

        font-size: x-large;
        margin: 10px;
        

    }

    .sh1{
        font-size:larger;
    }    
    a {

        font-size: large;

    }

    .document{

        iframe{

            width:666px;
            height:auto;

        }

        p {
            text-align: left;
        }

    }




    .topnav {

        padding: 5px;
        padding-top: 10px;
        margin: auto;
        max-width: 95%;
        

        a {
 

            padding: 10px;
            border-radius: 100px;
            line-height: 50px;
            



        }

    }

    #page{

        transform: scale(0.75); 
        transform-origin: top;        

        max-width: 100%;
        width: 100%;
        padding: 0px;

    }

    
    #page-games{
        padding: 0px;

        transform: scale(0.75);
        transform-origin: top;        

        max-width: 100%;
        width: 100%;        
    }
    

    .tile {
        width: 80%;
        margin: 0 auto;
        
        p {

            font-size: 20px;

        }

        h1{
            font-size: large;
        }

        h2{

            font-size: 30px;

        }
 
        
    }   

    .grid-container {
        margin: 0px;
        padding: 0px;
        grid-template-columns: 1fr;
    }

    .tile-container{

        margin: auto;
        width: 100%;
        padding: 0px;
        margin: 0px;

    }

    .tile-container a{

        width: auto;
        margin: auto;




    }





    #my-art img{

        max-width: 80%;
        max-height: 80%;
        border-radius:25px;
        padding: 6%;
    

    }

    
    .art-picture{

        padding: 2px;
        
        margin: 10px;
        margin-bottom: 30px;
        border-radius:20px;
        

        
        background-color: var(--card_col);
        border: 3px dashed var(--outline_col);


    }    

    .eikpixtitle{

        margin-top: 40px;

    }

    .eikpixtitle h1 {
        margin: -30px;
        padding: 0;
        margin-bottom: -80px;

        font-size: clamp(10px, 30vw, 70px);

    }

    .eikpixtitle img{

        width: 3em;
        height: auto;

    }

    .dcontainer{

        margin: 10px;
        margin-left: 30px;
        margin-right: 30px;

    }

    #contact {

        padding: 5px;
        margin: 10px;

        margin-left: 30px;
        margin-right: 30px;        

    }    



}






@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



body *:not(.topnav):not(.topnav *) {
  opacity: 0;
  animation: fadeInUp 0.4s ease forwards;
}