html 
{
    scroll-behavior: smooth;
}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* Site Body */
body 
{
	/*default*/
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    font-size: 1rem; /* relative font size: 1rem = 16px */
    width: 100%;
    height: 100%;
    margin: 0;

    background-color: black;      
}

/* patch notes container background */
.background
{
    margin: auto;
    width: 100vw;
    height: 100vh; /* 900px */
    padding-top: 15vh; /* 150px */

    /* regular */
    background-image: url(../../main/images/background_patchnotes.png);
    /* Easter */
    /*background-image: url(../../main/images/background_patchnotes_easter.png);*/
    /* Halloween */
    /*background-image: url(../../main/images/background_patchnotes_halloween.png);*/
    /* Christmas */
    /*background-image: url(../../main/images/background_patchnotes_christmas.png);*/
    
    background-repeat: no-repeat;
    background-size: 100% 100%;   

    box-sizing: border-box;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////// */

/* collapse boxes */
.collapsiblebutton
{
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    font-size: 1.25rem; /* relative font size: 1rem = 16px */
    text-shadow: -1.5px -1.5px 0 #6f421d, 1.5px -1.5px 0 #6f421d, -1.5px 1.5px 0 #6f421d, 1.5px 1.5px 0 #6f421d;
    
    background: rgba(0,0,0,0.5);
    width: 100%;
    box-sizing: border-box;
    margin-top: 30px;
    border: 1px solid #6f421d;
    border-radius: 6px;
    height: 50px;
}
.collapsiblebutton_content 
{
    display: none;
    overflow: hidden;
    background: rgba(0,0,0,0.15);
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #6f421d;
    border-radius: 6px;
}
.active, .collapsiblebutton:hover 
{
    background: rgba(0,0,0,0.75);
    cursor: pointer;
}

/* Patch Notes Wrapper (contains all patch notes elements) */
.patchnotes_wrapper 
{
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-variant: small-caps;
    font-size: 1rem; /* relative font size: 1rem = 16px */
    text-shadow: -1px -1px 0 #34271c, 1px -1px 0 #34271c, -1px 1px 0 #34271c, 1px 1px 0 #34271c;

    margin: auto;
    width: 40vw;
    height: 70vh; /* 750px */
    
    overflow-x: hidden;
    overflow-y: auto;
    /*scrollbar-width: none;*/
    border-radius: 6px;
    border: 3px solid #6f421d;
}

/* every patch note has all of the following attributes */
/* patch notes container */
.patchnotes_container 
{
    background: rgba(0,0,0,0.15);
    width: 100%;
    box-sizing: border-box;
    /*margin-top: 30px;*/
    margin-bottom: 30px;
    border: 3px solid #6f421d;
    border-radius: 6px;
}
/* Main title divs (icon + title) */
.patchnotes_title_container 
{
    width: 100%;
    height: 59px;
    border: 2px solid #6f421d;
    border-radius: 6px;
    box-sizing: border-box;
    text-align: center;
}
/* patch notes icon */
.patchnotes_icon 
{
    margin-top: 3px;
    margin-left: 3px;
    border-radius: 3px;
    float: left;
}
/* title of the text paragraph*/
.patchnotes_title_text 
{
    width: auto;
    margin-top: 18px;
    margin-right: auto;
    text-align: center;
}
/* patch notes list text */
.patchnotes_list 
{
    margin-left: 8px;
    margin-right: 8px;

    list-style-image: url(../../main/images/icons/icon_patchnotes_list.png);
    list-style-type: circle;
}
/* <li> of patchnotes list (every patch note) */
.patchnotes_list_item
{
    margin-bottom: 15px;
}

/* divider */
.divider 
{
    color: black;
    margin-top: 3%;
    width: 80%;
    box-sizing: border-box;
    border-radius: 6px;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////// */

/* CSS for specific elements */
/* scrollbar adjustments of patchnotes wrapper */
.patchnotes_wrapper::-webkit-scrollbar
{
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    width: 0.5vw;
}
.patchnotes_wrapper::-webkit-scrollbar-thumb
{
    background: rgba(111,66,29,0.7);
    border-radius: 6px;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////// */

/* Screen Width < 1000px*/
@media only screen and (max-width: 1000px), (max-height: 500px) 
{
    .body
    {
        width: 1200px;
        height: 700px;
    }

    .background
    {
        padding-top: 220px;
        width: 1200px;
        height: 700px;
        background-size: 1200px 700px;   
    }

    .patchnotes_wrapper 
    {
        margin-top: -115px;
        margin-left: 355px;
        height: 490px;
        width: 480px;
    }   
    
}

/* Screen Width > 2000px */
@media (min-width: 2000px) 
{
    .collapsiblebutton
    {
        font-size: 1.75rem; /* relative font size: 1rem = 16px */
    }

    .patchnotes_wrapper
    {
        font-size: 1.5rem; /* relative font size: 1rem = 16px */
    }
}