@import 'vars.css';
@import 'fore.css';
@font-face {
    font-family: "Kimberley";
    src: url(../resources/fonts/Montserrat/Montserrat-Light.ttf) format("truetype");
    font-display:swap;
}

a, a:link, a:visited {
    color:black;
    font-weight: 300;
    letter-spacing: 0.05rem;
}
fx-control{
    display: block;
    width: 100%;
}
fx-control[readonly]{
    background: white;
}
fore-corner a,
fore-corner a:link,
fore-corner a:visited{
    color:var(--paper-blue-800);
}
body{
    padding:0;
    /*font-family:'Roboto','Noto', 'sans-serif';*/
    font-family: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
    /*background: var(--paper-blue-grey-200);*/
}
code{
    font-weight: 500;
    white-space: nowrap;
    padding:0;
    font-size: inherit;
}
h1 code,
h2 code,
h3 code,
h4 code{
    font-weight: inherit;
}
.demos .three-col div {
    background: rgba(255,255,255,0.7);
    border-radius: 0.3rem;
}
demo-snippet{
    border: thin solid #cccccc;
}
demo-snippet .code-container{
    background: white;
    font-size: 1.2rem;
}

h1{
    font-size: 3rem;
}
h2{
    font-size: 2rem;
}

h2, h3, h4{
    /*color:var(--paper-orange-900);*/
    /*color:var(--paper-blue-grey-500);*/
    color:var(--paper-grey-900);
    /*font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;*/
}
.demos h2{
    margin-top:2rem;
}
.demos h3{
    font-size: 1.2rem;
}
/*
h2{
    color:white;
}
*/
/*
.logo-corner {
    transform: rotate(-74deg);
    position: fixed;
    right: -2.5rem;
    top: -2.9rem;
    width: 6rem;
    height: 5rem;
    !* background: ghostwhite; *!
    border: thin solid lightsteelblue;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.3px);
    -webkit-backdrop-filter: blur(4.3px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top-left-radius: 0.2rem;
}
.logo-corner:hover{
    background: ghostwhite;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);

}

.logo-corner .logo {
    width: 3rem;
    position: absolute;
    top: 1.25rem;
    left: -0.4rem;
    transform: rotate(75deg);
}
*/
#modalMessage{
    background:orange;
}
#modalMessage .dialogActions{
    text-align:center;
}
.nav-buttons{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap:nowrap;
}
.note{
    /*background: var(--paper-amber-300);*/
    background: var(--paper-blue-100);
    padding:10px;
    font-size: 1rem;
    border-radius: 0.2rem;
    line-height: 1.5;
    margin:1rem 0;
}
p{
    font-size:1.2rem;
    font-weight: 300;
    line-height: 1.35;
}
.wrapper{
    max-width: 800px;
    margin:0 auto;
    padding:1rem;
    position: relative;
}

.redline{
    padding: 1rem 2rem;
    border:thin solid white;
    text-align: center;
    width: 100px;
    flex-grow:1;
}
.redline:hover{
    background: rgba(255,255,255,0.5);
}
.redline.next{
    align-self: flex-end;
}
.redline.prev{
    align-self: flex-start;
    border-right: none;
}
/*.wrapper:before{*/
/*    content:'Fore';*/
/*    position: fixed;*/
/*    left:60%;*/
/*    transform: rotate(325deg) translateY(-50%) translateX(-50%);*/
/*    top:0;*/
/*    font-size:512px;*/
/*    z-index: -1;*/
/*    opacity: 0.03;*/
/*    color:var(--paper-blue-grey-900);*/
/*}*/

.wrapper{
    height:auto;
    max-width:800px;
    margin: 0 auto;
    /*background: var(--paper-blue-grey-200);*/
    /*background: var(--paper-amber-300);*/
    /*background: ghostwhite;*/
    /*background: linear-gradient(to right, rgba(19, 40, 115, 0.8), rgba(19, 120, 255, 0.8));*/
    /*color: white;*/
    opacity: 0.95;
    position: relative;
    min-height:80vh;
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: 1rem;
}

ul{
    margin-top:0;
}