@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Iosevka+Charon+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
/*Iosevka Charon Mono*/

@font-face {
    font-family:monocraft;
    src: url(fonts/Monocraft.ttf) format(truetype);
    font-weight: normal;
}
/*
opentype--otf
truetype--ttf
embedded-opentype
truetype-aat
svg
*/

h1#principal{
    font-family: monocraft, sans-serif;
    text-align: center;
    font-size: 3em;
}
h2{
    font: bold 30px Arial, Helvetica, sans-serif;
}
p{
    font: 20px Iosevka Charon Mono,sans-serif;
    text-align: justify;
}
/*font:style,weight,size,family*/
/* text-align:left/right/justify/center*/

.inl{
    display: inline-block;
}

.cube{
    text-align: center;
    width: 200px;
    height: 200px;
    background-color: gray;
    border: 2px solid black;
    box-shadow: 2px 2px 15px #0000006f;
}
.cube:hover{
    background-color: yellow;
}
div#secret > p{
    display: none;
}
div#secret{
    width: 300px;
}
div#secret:hover > p{
    display: block;
    color:red;
    width: 300px;
    
}

a{
    text-decoration: none;
    color: red;
    text-shadow: 0px 0px 3px #00000053;
}
a:hover{
    text-decoration: underline;
    color: green;
}
a:active{
    color: #000000;
}
a:visited{
    color: darkred;
}
a::after{
    content:"⬅";
}
a::before{
    content: "➡";
}