@import "normal.css";

:root{
    --background-c: #153958; /*background color*/
    --text-c: #e1d5bb; /*text color*/
    --text-c2:#3e3e3e;
    --border-c-1: #d7c07e; /*border color*/
    --border-c-2: #9f8c62;
    --grey-grad-1: #434243; /*gradient colors*/
    --grey-grad-2: #171717; 
    --button-light:#b24525; /*button color*/
    --button-dark:#442211;
    --quest-light:#e7dfd6;
    --quest-dark:#a39e98;
}

html{
    font-size:100%;
    box-sizing: border-box;
}

[hidden] {
    display:none !important;
}

*,
*:before,
*:after {
	box-sizing: inherit;
}

p{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-indent: 2rem; 
}

h1,h2,h3,h4,h5,h6{
    font-family: Georgia, 'Times New Roman', Times, serif;
}

body{
    background-color: var(--background-c);
    background-image: url("pic/background.svg");
    background-repeat:no-repeat;
    background-size: cover;
    font-size: 100%;
    color:var(--text-c);
}
ul{
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.page{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
}

.top{
    padding:0;
    position: absolute;
    top:1rem;
    align-self: center;
}
.top header{text-align: center;}
.top #calender{padding: 1rem 0;}

.welcome{
    z-index: 10;
    width:75ch;
    background-image: linear-gradient(var(--grey-grad-1),var(--grey-grad-2));
    border: solid 2px var(--border-c-1);
    border-radius: .5rem;
    padding: 2rem;
    margin: 1rem;
    
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: center;
}

#welcome{
    display: block;
    margin:0;
}

.welcome header{
    text-align: center;
    font-size: 300%;
    color: var(--border-c-2);
}

.st_op{
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
}


h1{
    text-align: center;
    font-size: 150%;
}

.role{

    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}

.role li img{
    width: 5rem;
}


.calender_w{
    padding: .75rem .75rem;
    border-radius: 1rem;
    background-color: var(--grey-grad-1);
}
.calender_w h2{
    margin: .75rem 0;
}
button:hover{cursor:grab;}

#q, .sound{position: absolute; top:1rem;}
#q{right:1rem;}
.sound{left:1rem;}
#mute img, #q img{
    width:4rem; 
}

#k{
    width: 10rem;
    height: 2rem;
    align-self: center;
    border-color: transparent;
    border-radius: 1.75rem;
    padding:.5rem;
    margin-top: 1rem;
    font-size: .75rem;
    color: var(--text-c);
    background-image: linear-gradient(var(--grey-grad-1),var(--grey-grad-2));
}

#bday_form{
    display: flex;
    flex-direction: row;
    padding-top: 1rem;
}

#c_b button, #mute, #q{
    background-color: transparent;
    border:0;
}

.b img{
    width:7rem;
}

#info img{
    max-width: 6rem;
}

/*grid for the jobs listing*/

#info{
    text-align: center;
}
#hover img{width: 8rem;}

.mid img{
    height: 7rem;
    padding-top: .5rem;
}

#des{
    width: 57ch; 
    padding: .25rem .75rem;
    margin: 0;
    font-size: .65rem;
    line-height: 1.15;
}

#mid{
    display: flex;
    flex-flow: column wrap;

    width:65%;
    height: 65%;

    justify-content: start;
    align-items: center;

    position: absolute; 
    left: 0; 
    right: 0; 
    top:0;
    bottom:0;
    margin: auto;

    font-size: .75rem;
    background-color: var(--quest-light);
    border-radius: 1rem;
    box-shadow: inset 0 0 7pt 5pt var(--quest-dark);
    border: ridge 5px var(--border-c-1);
    color: var(--text-c2);
}

#close{
    position: absolute;
    right: .5rem; 
    top:.5rem;
    margin: auto;
    z-index: 20;
    background-color: transparent;
    border-color:transparent;
    color:  var(--border-c-2);
    font-weight: bolder;
}

h3{margin-bottom: .5rem;}
h6{margin: 0rem; padding-bottom: .5rem;}
h5{margin: .5rem;}

#hover{
    margin: auto;
    position: absolute;
    left: auto; 
    right: auto; 
    top:auto;
    bottom:auto;
    z-index: -10;
}

#pld_b{grid-area:pld;}
#war_b{grid-area:war;}
#drk_b{grid-area:drk;}
#drg_b{grid-area:drg;}
#dnc_b{grid-area:dnc;}
#sam_b{grid-area:sam;}
#blm_b{grid-area:blm;}
#smn_b{grid-area:smn;}
#rdm_b{grid-area:rdm;}
#whm_b{grid-area:whm;}
#sch_b{grid-area:sch;}
#ast_b{grid-area:ast;}

#c_b{
    display: grid;
    grid-template-columns: repeat(5, 6rem);
    grid-template-rows: repeat(5,6rem);
    justify-content: center;
    align-items: center;

    grid-template-areas: 
    ". sam rdm smn ."
    "war . . . pld"
    "ast . . . blm"
    "dnc . . . drk"
    ". sch whm drg ."
    ;
    grid-row-gap: 1rem;
    grid-column-gap: 2rem;

    position: relative;
    right:1rem;
}

#job{
    position: relative;
    top:2.5rem;
}

@media screen and (min-width: 87.5rem){
    #c_b{grid-row-gap: 3rem; grid-column-gap: 4rem;}
    #des{font-size: .75rem; line-height: 1.45;}
}

@media screen and (min-width: 115rem){
    #c_b{grid-row-gap: 5rem; grid-column-gap: 6rem;}
    #des{line-height: 1.5;}
}