@charset "UTF-8";

    
    @import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Major+Mono+Display&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Kaushan+Script&family=Major+Mono+Display&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');


        /* 
        
        #   = id
        .   = class
        :   = pseudo-class
        ::  = pseudo-element
        >   = clildren
        
        */

@font-face {
    
    font-family: 'Ace of swords';
    src: url(ace_of_swords/aceofswords3d.ttf) format('truetype'), url(ace_of_swords/aceofswords.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {

    font: normal 16px 'Julius Sans One', sans-serif;
    text-align: left;
    background-image:linear-gradient(to top,#1B0589 1%, #060B29) ;
    background-attachment: fixed;
    color: #F7DB0A;
    
}
h1{ /* box-level */
 
background-color:#0C1084;
height: 300px;
width: 300px;


border: 5px solid #F7DB0A ;

padding: 10px;

margin: 20px auto 50px auto;

outline: 10px dashed #452ACD;

}

a { /* inline-level */
    color:#D9B216;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #F7DB0A ;
    padding: 10px;

}

/*
a:visited {
    color: #A18410;

}

a:hover{
    color: #0A61F7;
    text-decoration: underline;
}

a:active{
    color: #4E3DA2;
}

a::before{

    content: '⇒ ';
    text-decoration: none;
    font-weight: normal;
    color: #0A61F7;

}
a::after{

    content: ' ⇐';
    text-decoration: none;
    font-weight: normal;
    color: #0A61F7;
}

div {
    display: inline-block;
    background-color: #1B0589 ;
    color: #F7DB0A ;
    font-family: 'Ace of Swords', 'Major Mono Display', monospace;
    font-size: 2em;
    border: 0.5px solid #F7DB0A;
    text-align: center;
    height: 200px;
    width: 200px;
}

div#d1{

    background-color: #4E3DA2 ;
    color: white;
    font-family: 'Ace of Swords', 'Major Mono Display', monospace;
    font-weight: bold;
    font-size: 2em;
    border: 1px solid white;
    text-align: center;
    height: 200px;
    width: 200px; 
    box-shadow: 2px 2px 20px #0A61F7 ;

}

div#d2{

    background-color: #452ACD;
    color: white;
    font-family: 'Ace of Swords', 'Major Mono Display', monospace;
    font-weight: bold;
    font-size: 2em;
    border: 1px solid white;
    text-align: center;   height: 200px;
    width: 200px; 
    box-shadow: 2px 2px 20px #0A61F7 ;

}

div#d3{

    background-color: #310AF7;
    color: white;
    font-family: 'Ace of Swords', 'Major Mono Display', monospace;
    font-weight: bold;
    font-size: 2em;
    border: 1px solid white;
    text-align: center;
    height: 200px;
    width: 200px; 
    box-shadow: 2px 2px 20px #0A61F7 ;
   
}

div:hover {

background-image:linear-gradient(to top,#1B0589 1%, #060B29) ;
    background-attachment: fixed;
    color: #F7DB0A;
 }

div > p {

display: none;

}

div:hover > p {
display: block;
color: #310AF7;
font-family:'Julius Sans One', monospace;
font-size: small;


}

 em HTML é id= em CSS # Só pode 1 elemento
em HTML class= em CSS é . Pode vários elementos


h1#principal{

    font-family: 'Ace of Swords','Major Mono Display', monospace;
    font-size: 3em;
    text-align: center;
    color: #F7DB0A;
    background-color: #1B0589
  
}

h1 {
    font-family:'Kaushan Script',cursive,'Major Mono Display', monospace;
    color: #F7DB0A;
    font-size: 2.5em;
    font-weight: bolder;
    text-align: left;
}



h2 {
    font-family: 'Major Mono Display','Kaushan Script',cursive,'Major Mono Display', monospace;    font-size: 1.5em;
    text-align: left;
    font-weight: normal;
    color: #0A7AF7;
}

.basico{
 background-image: linear-gradient(to left,#427841 20%,#310AF7 80%);
 background-attachment: fixed;
 font-size: 1.5em;
 text-align: left;
 font-weight: bold;
 color: whitesmoke;
 }

 .intermediario{
 background-image: linear-gradient(to left,#F7DB0A 20%,#310AF7 80%);
 background-attachment: fixed;
 font-size: 1.5em;
 text-align: left;
 font-weight: bold;
 color: whitesmoke;
 }

 .avançado{
 background-image: linear-gradient(to left,#F72B0A 20% ,#310AF7 80%);
 background-attachment: fixed;
 font-size: 1.5em;
 text-align: left;
 font-weight: bold;
 color: whitesmoke;
 }

 .destaque{
    background-image: linear-gradient(to left,#310AF7 2%,#060B29 98%);
    color:F7DB0A;
    font-weight: bold;
    text-align: justify;
    font-size: 2em;

    
 }

p{
font: normal 12px 'Julius Sans One', sans-serif; 
color:aliceblue;
text-align: justify;

} */