:root{
    --bg-col: #F0F5F7; 
    --main-col: #FF5971; 
    --dark-col: #B4D4DB; 

    --text-col: #3D020F; 
    --bold-outline-col: #D2F2FC; 
    --main-link-hover-col: #8ed942;
    --nav-link-hover-col: #48C0D4;  

    --imood-bg-col: #729AA3; 

    --sidebar-img: url("/styles/shrike/shrikefull.png"); 
    --home-img: url("/styles/shrike/shriketransp.png"); 
    --about-img: url("/styles/shrike/shrikeblink.gif");

    /*currently only taking width bc height auto adjusts with it, also about isn't implemented yet*/
    --home-img-width: 350px; 
    --about-img-width: 200px; 
}

@font-face{
  font-family: AtkinsonHyperlegible;
  src: url("/fonts/Atkinson-Hyperlegible-Regular.ttf") format("truetype"); 
}

@font-face {
	font-family: AlegreyaSans;
	src: url("/fonts/AlegreyaSans-Regular.ttf") format("truetype");
}

@font-face {
	font-family: AlegreyaSansBold;
	src: url("/fonts/AlegreyaSans-Bold.ttf") format("truetype");
}

@font-face {
	font-family: AlegreyaSansItalic;
	src: url("/fonts/AlegreyaSans-Italic.ttf") format("truetype");
}

@font-face {
  font-family: MNS;
  src: url("/fonts/MNS_TRIAL.ttf") format("truetype");
}

/*cursor suddenly started working everywhere, dunno what caused that but thanks */
*{ 
    /* cursor: url('./assets/img/everdeadcursor.png'), auto;  */

    scrollbar-color: var(--dark-col) var(--bg-col);
}

body{
    background-color: var(--bg-col);

    font-family: AtkinsonHyperlegible; 
    font-size: 16px; 
    color: var(--text-col); 
}

::-webkit-scrollbar{
    width: 10px; 
}
::-webkit-scrollbar-track{
    background: var(--bg-col);
}
::-webkit-scrollbar-thumb{
    background: var(--dark-col);
}
::-webkit-scrollbar-thumb:hover{
    background: var(--dark-col);
}

::-moz-selection, ::selection{
    color: var(--dark-col);
    background: var(--main-col); 
}

a{
    color: var(--main-col); 
    text-underline-offset: 2.5px; 
}
a:hover{
    color: var(--main-link-hover-col); 
    transition: .2s; 
}

.linkit{
    text-decoration: none; 
    font-family: alegreyasans; 
}
.linkit:hover{
    color: var(--nav-link-hover-col); 
    font-weight: bold; 
    transition: .5s; 
}

/*to style them differently from the navbar links when on mobile*/
.footerlink{
    text-decoration: none; 
    font-family: alegreyasans; 
}

.footerlink:hover{
    color: var(--nav-link-hover-col); 
    font-weight: bold; 
    transition: .5s; 
}
/*i'll get around to cutting down this code eventually*/ 

b, strong{
    font-weight: bold; 
    text-shadow: -.5px -.5px 0 var(--bold-outline-col), .5px -.5px 0 var(--bold-outline-col), -.5px .5px 0 var(--bold-outline-col), .5px .5px 0 var(--bold-outline-col);
}

h1, h2, h3, h4, h5, h6{
    font-family: alegreyasans; 
}

/* h2{
    background-color: var(--dark-col); 
    position: relative; 
} */

/*probably should've inherited or something but i'll figure it out eventually*/
.bigheader{
    position: absolute; 
    top: 25px; 
    right: 20px; 

    font-family: alegreyasansbold; 
    text-decoration: none; 
    font-style: italic; 
    
}
.bigheader:hover{
    color: var(--nav-link-hover-col); 
    transition: .5s; 
}

#right-header{
    margin-top: 50px; 

    color: var(--main-col); 

    text-align: right; 
    line-height: 10px; 
}

#mobile-header{
    display: none; 

    color: var(--main-col); 

    text-align: center; 
    line-height: 10px; 
}

#container {
    /* background-color: #ddd; */

    margin-top: 20px; 
    
    display: flex; 
    flex-wrap: wrap; 

    width: 70vw; 
    max-width: 1300px; 
    margin: auto; 
}

#left{

    /* background-color: #8F0A2F;  */
    position: relative; 
    width: 80%; 
}

#main{
    padding: 20px; 
    margin-right: 15px; 

    background-color: var(--bg-col);
    border: 2px solid var(--main-col);

    min-height: 60vh; 
    max-height: 80vh; 

    overflow: auto; 
}

#right{
    margin-top: 70px; 

    /* background-color: #000;  */
    color: var(--main-col); 
    min-width: 10%; 
    
}

#right-img{ 
    margin: auto; 

    background: var(--sidebar-img) no-repeat center;  
    background-size: contain; /*contain = resize to fit; cover = clip to fit given dimension*/

    min-height: 200px;
    width: 100%; 
    max-width: 100px; 
}

#imood{
    margin-top: 15px; 
    text-align: center; 
    background-color: var(--imood-bg-col); 
    outline: 1px solid var(--main-col); 
}

nav ul{
    list-style-type: none; 
    margin-top: 5px; 
    padding: 10px; 
    /* background-color: #FFF;  */
}

#styleswitcher{ /*stupid styleswitcher css you made me look stupid*/
    text-align: center;
}

select{ /*max-width is matching with right img*/
    color: var(--bg-col); 
    background-color: var(--text-col); 
    border: 1px solid var(--main-col); 

    height: 22px; 
    width: 100%; 
    max-width: 150px; 
}


#footer{ 
    color: var(--main-col); 
    text-align: left; 
}

.scrollbox{
    max-height: 200px; 
    overflow: auto; 

    background-color: var(--dark-col);
    border: 2px dotted var(--nav-link-hover-col); 
    border-radius: 2px; 

    padding: 0px 10px; 
}

.smalltext{
    font-size: 14px; 
    font-style: italic; 
    line-height: 2em; 
    text-align: right; 
}
.smalltext-center{
    font-size: 14px; 
    font-style: italic; 
    line-height: 2em; 
    text-align: center; 
}

.img-left{
    margin: 15px; 
    max-width: 50%; 
    float: left; 
}

.img-right{
    margin: 15px; 
    max-width: 50%; 
    float: right; 
}

.img-center{
    margin: auto; 
    max-width: 50%; 
    display: block; 
}

.home-img{
    margin: 15px; 

    content: var(--home-img);
    float: left; 

    width: var(--home-img-width); 
}

.about-img{
    margin: 15px; 

    content: var(--about-img); 
    float: right; 

    width: var(--about-img-width); 
}

.img-wrapper-test{
    display: flex; 
    align-items: center; 
    gap: 15px; 
}

/************************* MEDIA QUERIES - currently wip ****************************/
@media screen and (max-width:850px){

    .img-left, .img-right, .img-center, .home-img, .about-img{
        display: block; 
        margin: auto; 

        height: 95%; 
        width: 95%;
        max-height: 100%; 
        max-width: 100%; 

        float: none; 
        justify-content: center;

        padding-top: 10px; 
    }

    .mobile-header-container{
        margin: auto; 
    }

    #mobile-header{
        display: revert; 

        text-align: center; 
        
        line-height: normal; 
        /* background-color: #ddd;  */

        margin-bottom: -20px; 
    }
    .mobile-bigheader{
        margin: auto; 
        text-align: center; 
        font-family: alegreyasansbold; 
        text-decoration: none; 
        font-style: italic; 
        
    }
    .mobile-bigheader:hover{
        color: var(--nav-link-hover-col); 
        transition: .5s; 
    }

    #right-header{
        display: none; 
    }

    #container{
        width: 100%; 
    }

    nav ul{
        display: flex; 
        flex-wrap: wrap; 
        gap: 20px 10px;  

        font-size: 18px; 
        line-height: 10px; 
        /* background-color: #000; */
        justify-content: center; 
    }

    .linkit{
        margin: auto; 
        padding: 5px; 

        text-align: center; 
        /* background-color: #fff; */

    }

    #imood{
        display: none; 
        margin: auto; 
    }

    #right-img{
        display: none; 
    }

    #right{
        margin-top: 25px; 
        order: 1; 
        width: 100%; 
    }

    #left{
        order: 2; 
        width: 100%;  
    }

    #main{
        margin-top: 10px; 
        margin-right: auto; 
        border: none;
        max-height: none; 
        /* background-color: #ddd;  */
    }

    select{
        text-align: center; 
    }

    #footer{
        margin-bottom: 20px; 
        font-size: 16px; 
        text-align: center; 
    }

    .scrollbox{
        max-height: 400px; 
    }


}

/* ************************ MEDIA QUERIES - currently wip *************************** */
@media screen and (min-width:1900px){
    #container{
        margin-top: 30px; 
    }
}