@font-face {
    
    font-family: font;
    src: url(/unscii-16.ttf);

}

* {
    font-family: font;
}

body {
    padding: 0px;
    margin: 0px;
    background-color:black ;
    background-image: url(/img/texture/stars.gif);
    
    
  
}

/*Visuales */
#floatingimg {
    height: 200px;
    position: fixed;
    bottom: 0%;
    right: 2%;
    opacity: 100%;
    transition: opacity 0.5s ease;
    
}
#floatingimg:hover{

opacity: 0;
}


#rabbithole{
    height: 13%;
    top: 18%;
    right: 21%;
    transform: rotate(20deg);

}

#patchy_RB{
    position: absolute;
    opacity: 0%;
    height: 70px;
    left:3.2%;
    top:20%;
    transition: opacity 0.5 ease;
    will-change: opacity;
}





/*Elementos*/

header{
    
    height: 80px;
    width: 100%;
    background-color: rgb(0, 13, 128);
    padding:0%;
    margin: 0%;
    color: aliceblue;
    border-width: 10px;
   
    
    

}

nav {
    
    flex-direction: row;
    justify-content: end;

    display: flex;
    background-color: rgb(38, 50, 150);
    height: 25px;
    border: #ca9dd072  2px dashed;
    
}




.buttonright {
        display: flex;
       margin-top: 1px;
    
    
    display: flex;
    flex-direction:row;    
    
    
    color: rgb(0, 0, 0);
    margin: 10px;
    margin-left: 10px;
    margin-bottom: 2px;
    align-self:baseline;
    align-self: center;
    align-content: center;
    text-align: center;
    text-orientation: sideways;

    
   

    
    background-color: #d79bff;
    border-radius: 10%;
    border: #d79bff 5px solid;
    border-image-source: url(img/bordes/prettypurple.png);
    border-image-slice: 16 16;
    border-image-repeat: round;
    transition: transform 0.1s ease;
    will-change: transform;

}
.buttonright:hover {
    transform: scale(1.2);
}




.R_title {
    color: #cfbcdc;
    text-align: center;
    border-image-source: 0;
    margin-top: 0px;
    margin-bottom: 30px;
    bottom: 30px;

}

.button2 {
    margin-right: 30;
    color: rgb(0, 0, 0);
    margin: 5px;
 
}




.middle {

    display: flex;
    flex-wrap: nowrap;
    
}


#m2 {

    background-color: #d79bff;
    display: flex;
    flex-wrap: nowrap;
}



aside {
    
    z-index: -2;
    flex:5%;
    background-color: rgb(0, 0, 0);
    background-image: url(img/over/whitemag.png);
    padding: 10px;
    align-content: center;
    height: 150.1vh;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-wrap:wrap;

     margin-bottom: 0px;
    border-right: 20px solid rgba(0, 0, 0, 0);   
    border-image-source: url(img/bordes/black.png);
    border-image-slice: 50 50;
    border-image-repeat: round;
    border-image-outset: 10px;
    
}




.AS_sep1 {
    display: flexbox;
    height: 640px;
    border: rgba(145, 137, 196, 0) dashed;
    width: 100px;
    padding: 10PX;
    padding-top: 30px;
    justify-content: center;
    align-content: space-between;
    flex-flow: column;
    flex-wrap: wrap;



}
.AS_sep2 {
    display: flex;
    border: rgba(105, 90, 205, 0) dashed;
    justify-content: 0px;
    align-self: center;
    flex-direction: column-reverse;
    height: 57vh;
    width: 100px;
}


#separator{
    

    overflow-y: visible;
    overflow-x: hidden;
    display: flex;
    background-color: rgba(40, 40, 73, 0.655);
    flex: 50%;
     margin-left: 10px;
     margin-right: 10px;
    margin-top: 20px;
    justify-content: center;
    margin: 20px;
    padding: 10px;
    align-self: flex-start;
    flex-wrap:nowrap;
    align-content: flex-start;
    height: 133vh;
    max-height: 200vh;
    flex-direction: column;

    border: 20px solid rgba(0, 0, 0, 0);   
    border-image-source: url(img/bordes/encaje.png);
    border-image-slice: 40 40;
    border-image-repeat: round;
    border-image-outset: 10px;



}

#sepatitle{
    color:antiquewhite
}

.sep_con {

    display: flex;
    justify-content: flex-start;
    align-content: flex-start;
    
    height: 250px;
    width: 250px;
    padding: 20px;
    padding-top: 5px;
    margin: 15px;
    align-self: center;
    flex-wrap: wrap;
    
    background-color: #cfbcdc;
   
    border: 30px solid rgba(0, 0, 0, 0);   
    border-image-source: url(img/bordes/elegant.png);
    border-image-slice: 110 110;
    border-image-repeat: round;
}


#mid {
    display: grid;
    margin: 20px;
    margin-bottom: 0px;
    margin-left: 30px;
    margin-right: 30px;
    overflow-y: auto;
    
    flex: 50%;
    background-color:  rgba(10, 7, 43, 0.727);
    
    height: 133vh;
    
    
    border: 20px solid rgba(0, 0, 0, 0);   
    border-image-source: url(img/bordes/encaje.png);
    border-image-slice: 40 40;
    border-image-repeat: round;
    border-image-outset: 10px;
    

    
    padding-top: 20px;
    grid-template-columns: 90px 90px 90px;
    grid-template-rows:  90px 90px 90px 90px 90px 90px 90px 90px 90px 90px  ;
   grid-template-areas: 
   'a a b'
   'a a b'
   'c c c'
   'd d f'
   'g h h'
   'g h h'
   'i i i'
   'j k l'
   'j m n'
   'o o o'
   ;
   justify-content: center;
   align-items: 0;
    gap: 3px;

    
}


.cont_girdA{
    margin: 2px;
    margin-top: 20px;
    
    height: 100%;
    background-color: darkslateblue;
    align-items:center;
    align-content: center;
    justify-content: center;
    text-align: center;
    transition: transform 0.2s ease;
    will-change: transform;;
    
}

.cont_girdA:hover{
    margin: 2px;
    margin-top: 20px;
    transform:scale(1.1);

    height: 100%;
    background-color: darkslateblue;
    align-items:center;
    align-content: center;
    justify-content: center;
    text-align: center;
    
}


#rightthing {
    display: flex;
    background: #cfbcdc;
    align-self: flex-start;
    flex: 40%;
    margin-left: 10px;
     margin-right: 10px;
    margin-top: 20px;
    justify-content: center;
    padding: 10px;
    align-self: flex-start;
    flex-wrap: wrap;
    flex-direction: column;

    border: 30px solid rgba(0, 0, 0, 0);   
    border-image-source: url(img/bordes/elegant.png);
    border-image-slice: 110 110;
    border-image-repeat: round;
}

.rightEl {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-content: center;
    border: 20px solid black;   
    border-image-source: url(img/bordes/darksolid.png);
    border-image-slice: 100 95;
    border-image-repeat: round;

}
#rightbottom{

    margin: 0px;
    height: 36vh;
    border: 30px solid rgba(0, 0, 0, 0);   
    border-image-source: url(img/bordes/elegant.png);
    border-image-slice: 110 110;
    border-image-repeat: round;


}