@property --white{
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffe1;
}
@property --red{
    syntax: "<color>";
    inherits: false;
    initial-value: #9a0100;
}
@property --blue{
    syntax: "<color>";
    inherits: false;
    initial-value: #657d93;
}
@property --yellow{
    syntax: "<color>";
    inherits: false;
    initial-value: #fdfd08;
}
@property --purple{
    syntax: "<color>";
    inherits: false;
    initial-value: #6a466a;
}


    
html{
    color: black;
    overflow: scroll;
    font-family: "playfair", serif;
    font-variation-settings: "wdth" 90;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 13pt;
    height: 100%;
    
}
body{
    background-color: black;
    
    margin: 0;
    display: flex;
    min-height: 100%;
    height: fit-content;
}

header{
    background-color: black;
    
}

ul{
    margin: 0;
    padding-left: 1.5em;
}


#logo1{
    background-color: var(--red);
    width: fit-content;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
}


#logob{
    height: 75px;
    background-color: var(--red);
    display: flex;
    width: 220pt;
    flex-flow: column;
    padding: 5px 0;
    #logo1{
        color: var(--yellow);
        margin-top: 6pt;
        margin-left: 5pt;
        font-family: 'Libre Franklin';
        font-weight: 900;
        font-size: 30pt;
        line-height: 1;

}
    #logo2{
        color: var(--white);
        margin-left: 6.1pt;
        position: relative;
        
        font-family: 'Libre Franklin';
        font-weight: 700;
        font-size: 11pt; 
        line-height: 0.3;
        
    }
}




.menu{
    height: 85px;
    display: flex;
    justify-content: space-evenly;
    margin: auto;
    max-width: 800px;
    
    a{
        
        font-family: 'Libre Franklin';
        margin: auto;
        font-weight: 550;
        color: var(--white);
        text-decoration: none;
    }
}

#headersmall{
    display: flex;
    flex-direction: row;
    .menu{
        flex-direction: column;
        margin: auto 4pt;
        a{
            font-size: 11pt;
            margin: 0
        }
    }
}

#warning{
    width: initial;
    justify-content: space-between;
    align-content: space-around;
    padding: 10px;
    border-bottom: black dashed 3px; 
    display: flex;
    font-family: 'libre Franklin';
    font-style: italic;
    background-color: var(--yellow);
    font-weight: 700;
    font-size: 14pt;
    img{
        height: 3em;
    }
}

#leftpannel{
    
    float: left;
    background-color: black;
    width: 15%;
    margin-top: 85px;
    padding-right: 5pt;
    div{
        position: sticky;
        padding-bottom: 100%;
        padding-top: 5pt;
        top:0;
        font-weight: 600;
        color: var(--white);
        font-size: 12pt;
        
        height: max-content;
        font-family: 'libre franklin';
    }
}

#rightpannel{
    
    background-color: var(--white);
    width: 15%;
    
    margin-top: 85px;
    div{
        
        position: sticky;
        padding-bottom: 100%;
        padding-top: 5pt;
        top:0;
        font-weight: 400;
        color: var(--blue);
        font-size: 10pt;
        height: max-content;
        font-family: 'libre franklin';
    }
}

main{
    width: 70%;
    height: initial;
    
    #maintext{
        
        width: 100%;
        .subtitle1{
            padding-left: 10pt;
            font-family: 'libre franklin';
            font-size: 18pt;
            font-weight: 700;
            background-color: var(--yellow);
            max-width: 100%;
            
        }
        
        .text1{
            
            background-color: black;
            display: flex;
            div{
                
                width: 100%;
                background-color: var(--white);
                padding: 10pt;
                
                &#purple{
                    background-color: var(--purple);
                    color: var(--white);
                    h1{
                        color: var(--yellow)
                }
                    
                }
                h1{
                    font-size: 20pt;
                    font-family: 'Mr Dafoe';
                    font-weight: 400;
                    line-height: 0.8;
                    color: var(--blue);
                }
                
                p{
                    text-align: justify;
                    line-height: 1.5;
                }
                
                table{
                    
                    width: 100%;
                    border-collapse: collapse;
                    tr:not(:nth-child(1)){
                        border-top: solid black 1px;
                    }
                    font-variant-numeric: tabular-nums;
                    
                    td{
                        padding: 0 2pt;
                        
                        &:nth-child(odd){
                            text-align: end;
                            align-content: flex-start;
                            font-family: 'libre franklin';
                            font-weight: 550;
                            font-style: normal;
                            font-size: 10pt;
                            border-right: solid black 1px;
                        }}
                    font-size: 11pt;
                    font-weight: 500;
                    font-style: italic;
                    hr{
                        display: block;
                        border: 0.1px solid black;
                        height: 0;
                        margin: 0;
                    }
                }
            }
            img{
                object-fit: cover;
                margin: auto;
                height: 15em;
                width: 9em;
            }
        }
        
    }
    background-color: var(--white);
    
}

@media screen and (width <= 720px) {
    body{
        #leftpannel{
            display: none;
        }
        
        
        #rightpannel{
            display: none;
        }
    }
    main{
            width: 100%;
        }
  
}