*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/*font-family: 'Chakra Petch', sans-serif;
font-family: 'Jura', sans-serif;
font-family: 'Megrim', cursive;
font-family: 'Orbitron', sans-serif;*/

html{
    color: #555;
    font-weight: 400;
    font-size: 20px;
    text-rendering: optimizeLegibility;
    background: linear-gradient(rgba(0, 0, 0, 1),rgba(0, 0, 0, 0.0)), url(../../content/corridor.jpg) ;
    background-size:cover;
    background-position:center;
}
header{
    position:fixed;
    top:0px;
    font-family: 'Orbitron', sans-serif, 'Arial',sans-serif;
    background-color:rgba(0, 0, 0, 0.8);
    width:100%;
    height:100px;
}
.name{
    font-family: 'Orbitron', sans-serif, 'Arial',sans-serif;
}
.logo{
    position:absolute;
    top:30px;
    left:46px;
    width:14%;
}
.links{
    transform:translate(-25px,0px);
}
.mainNav li{
    float:right;
    display:inline-block;
    text-decoration: none;
    margin: 40px 20px;
}
.mainNav li a:link, .mainNav li a:visited{
    color: #fff;
    padding-bottom: 8px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
    transition: border 0.2s, color 0.2s;
    border-bottom: 1.5px solid transparent;
}
.mainNav li a:hover, .mainNav li a:active{
    color: #FFDEAD;
    padding-bottom: 8px;
    border-bottom: 1.5px solid #FFDEAD;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 90%;
}

/*CONTENT OF THE CHARACTER CREATION*/
.content{
    margin:120px 40px 20px 40px;
    font-family: 'Jura', sans-serif, 'Arial',sans-serif;
    font-size:90%;
    color:#0f0f0f;
}
.note{
    font-size:70%;
    text-align:right;
}
.S1{ grid-area: Box1;}
.S2{ grid-area: Box2;}
.S3{ grid-area: Box3;}
.S4{ grid-area: Box4;}
.S5{ grid-area: Box5;}
.S6{ grid-area: Box6;}
.S7{ grid-area: Box7;}
.S8{ grid-area: Box8;}
.S9{ grid-area: Box9;}
.S10{ grid-area: Box10;}
.S11{ grid-area: Box11;}
.S12{ grid-area: Box12;}
.S13{ grid-area: Box13;}
.S14{ grid-area: Box14;}
.S15{ grid-area: Box15;}
.S16{ grid-area: Box16;}
.S17{ grid-area: Box17;}
.S18{ grid-area: Box18;}
.S19{ grid-area: Box19;}
.S20{ grid-area: Box20;}
.S21{ grid-area: Box21;}
.S22{ grid-area: Box22;}
.S23{ grid-area: Box23;}
.S24{ grid-area: Box24;}
.S25{ grid-area: Box25;}
.S26{ grid-area: Box26;}
.S27{ grid-area: Box27;}
.S28{ grid-area: Box28;}

.containerParent{
    display:grid;
    grid-template-areas:
    'Box2 Box2 Box1'
    'Box3 Box3 Box4'
    'Box6 Box6 Box5'
    'Box7 Box7 Box8'
    'Box9 Box9 Box10'
    'Box12 Box12 Box11'
    'Box14 Box14 Box13'
    'Box15 Box15 Box16'
    'Box17 Box17 Box18'
    'Box19 Box19 Box20'
    'Box21 Box21 Box22'
    'Box23 Box23 Box24'
    'Box25 Box25 Box26'
    'Box27 Box27 Box28';
    grid-gap:40px;
}
.containerParent div{    
    padding: 20px;
}
.containerParent p{
    margin-top:12px;
}
.containerParent a:link, .containerParent a:visited{
    color: #b00295;
    padding: 2px;
    text-decoration: none;
    font-size: 90%;
    transition: color 0.2s;
}
.containerParent a:hover, .containerParent a:active{
    color: #05d9e8;
    padding: 2px;
    text-decoration: none;
    font-size: 90%;
}
.dropdown{
    padding:12px;
    color: #b00295;
    float: left;
}
.dropdown:hover .dropdownContent {
  display: block;
}
.dropdownContent{
    color:#0f0f0f;
    display: none;
    position: absolute;
    left: 40px;
    background-color: #f9f9f9;
    min-width: 200px;
    max-width: 90%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}
.Art{
    display: Flex;
    justify-content: center;
    align-items: center;
    background: none;
}
.Art img{
    width:100%;
    border-radius: 8%;
    box-shadow:0 0px 10px 14px rgba(10, 156, 245, 0.5);
}
.Text{
    border-style: hidden;
    border-radius: 18px;
    background-color: #f0f0f0;
    box-shadow:0 0px 10px 6px rgba(10, 156, 245, 0.5);
}