/* Makes the way the boxes are sized more intuitive */
* {box-sizing:border-box}

/* Insert Sofia Sans Font */
@font-face {
    font-family: 'Sofia Sans';
    src: url('fonts/Sofia_Sans_Condensed/SofiaSansCondensed-VariableFont_wght.ttf') format('truetype');
}



body {
    margin: 0;
    padding: 35px;
  
    width: 100%;
    height: 100%;
  
    /* Overflow set to "Hidden" when menu's in use */
    overflow-y: scroll;

    font-weight: bold;
  
    background-image: url(background/Lynx-medium.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  
    text-align: center;
    justify-content: center;
  
    font-family:'Sofia Sans', Times New Roman;
    }
    body::-webkit-scrollbar{
        display: none;
}



/* Mobile Menu Bar - <800px (functional CSS in the 800px media query) */
.menubar{
    display: none;
}

/* Mobile Overlay Menu - <800px (functional CSS in the 800px media query) */
.mobilemenu{
    display: none;
}



.sidebar{
    writing-mode: vertical-lr;
    text-align: left;
    height: 100%;
    width: 75px;
    position: fixed;
    z-index: 4;
    top: 0;
    left: 0;
    background-color: #212121c2;
    overflow: scroll;
    padding-top: 20px;
    backdrop-filter: blur(5px);
    }
    .sidebar::-webkit-scrollbar{
        display: none;
    }

    .sidebar a {
        width: 100%;
        border-style: none;
        border-radius: 15px;
    
        cursor: pointer;
        background-color: #006eff00;
    
        font-size: 400%;
        color: white;
        font-family:'Sofia Sans', Times New Roman;
        font-weight: lighter;
        text-decoration: none;
    }
    .sidebar a:hover {
        background-color: #d6c5c9b9;
    }
    .sidebar a:visited{
        color:rgba(255, 255, 255, 0.63);
}



.main{
    border-radius: 25px;

    margin-left: 75px;
    
    max-width: 100%;
    height: 100%;

    padding: 15px;

    background-color: #D6C5C9a4;

    overflow-y: scroll;
    }
    .main::-webkit-scrollbar{
        display: none;
    }

    .mainflex{
    display: flex;
    flex-direction: row;
}

  

.left{
    flex: 15%;
    max-width: 15%;

    border-radius: 25px;

    color: white;

    height: 100%;

    padding: 5px;
    padding-bottom: 10px; 
    background-color: #DEB6AB;
    }

    .menuimages{
        width: 100%;
        height: auto;
    }

    img.menubutterfly{
        max-width: 95%;
        margin-top: 5px;
    }

    img.menuvista{
        max-width: 95%;
        margin-top: 5px;
    }

    .menu{
        width: 100%;
        height: auto;
        font-size: 150%;
    }

a.menulinks:link {color:rgb(0, 0, 0); text-decoration: none;}
a.menulinks:visited {color:rgb(0, 0, 0); text-decoration: none;}
a.menulinks:hover {color: #000000; text-decoration: underline;}




.right{
    flex: 84%;
    max-width: 84%;
    margin-left: 1%;
    height: 100%; 
    background-color: #ebd9dd44;
    padding: 10px;
    border-radius: 35px;
    }
    
    .warm_berry_top                  ,
    .warm_berry         /* #85586F */, 
    .soft_raspberry     /* #AC7D88 */,
    .pale_orange        /* #DEB6AB */,
    .soft_yellow        /* #F8ECDF */,
    .pale_sea_blue      /* #D6EFED */,
    .sky_blue           /* #B7D3DF */,
    .medium_lilac       /* #C9BBCF */, 
    .muted_purple       /* #898AA6 */,
    .lavender           /* #957DAD */,
    .thistle_pink       /* #EoBBe4 */,
    .candy_pink         /* #FEC8D8 */,
    .misty_rose         /* #FFDFD3 */,

    .sky_blue_notice
    {
        height: auto;
        width: 100%;
        max-width: 100%;
        border-style: solid;
        border-radius: 25px;
        background-color: #ffffff80;
        padding: 25px;
        margin-bottom: 10px;
        text-align: left;
        font-size: 85%;
    }
    
    .warm_berry_top{
        background-color: #85586Fca;
        text-align: center;
        font-size: 300%;
    }

    .warm_berry{
        background-color: #85586Fca;
    }
   
    .soft_raspberry{
        background-color: #AC7D88ca;
    }

    .pale_orange{
        background-color: #DEB6ABca;
    }

    .soft_yellow{
        background-color: #F8ECDFca;
    }    

    .pale_sea_blue{
        background-color: #d6efedca; 
    }

    .sky_blue{
        background-color: #B7D3DFca; 
    }      

    .medium_lilac{
        background-color: #C9BBCFca; 
    }     

    .muted_purple{
        background-color: #898AA6ca; 
    }       

    .lavender{
        background-color: #957DADca; 
    }     

    .thistle_pink{
        background-color: #E0BBe4ca; 
    }     

    .candy_pink{
        background-color: #FEC8D8ca; 
    }     

    .misty_rose{
        background-color: #FFDFD3ca; 
}         


     

.cover{
        height: 100%;
        width: 100%;

        text-align: center;
    }

    .header{
        width: 100%;
        margin: 15px;
        font-size: 400%;
    }

    .row{
        display: flex;
        flex-wrap: wrap;
    }

    .column1, .column2, .column3{
        flex: 32%;
        max-width: 32%;
        margin: 0.5%;


    }

    .item1, .item2, .item3{
        border-radius: 25px;
    
        flex: 100%;
        max-width: 100%;
        height: auto;    
    
        margin-bottom: 15px;
    
        background-color: rgba(255, 255, 255, 0.50);
    
        padding: 5px; 
    
        border: solid;

        font-size: 200%;
    }
    
    .item1 img, .item2 img, .item3 img{
        width: 94%;
        border-radius: 25px;

        margin: 15px;

        transition: transform .2s;
    }
    
    .item1 img:hover, .item2 img:hover, .item3 img:hover{
        transform: scale(1.05);
    }
    
    .item1 video, .item2 video, .item3 video{
        padding: 5px;
        width: 95%;
        border-radius: 25px;
    }

    .item1 video, .item2 video, .item3 video{
        padding: 5px;
        width: 95%;
        border-radius: 25px;
    }

    .rowitem{
        border-radius: 25px;
    
        width: 98%;
        height: auto;    
        margin-left: 1%;
    
        margin-bottom: 15px;
    
        background-color: rgba(255, 255, 255, 0.50);
    
        padding: 5px; 
    
        border: solid;

        font-size: 200%;
    }
    
    .rowitem img{
        padding: 5px;
        max-width: 100%;
    
        border-radius: 25px;
        transition: transform .2s;
    }
    
    .rowitem img:hover{
        transform: scale(1.01);
    }
    
    .rowitem video{
        padding: 5px;
        width: 100%;
        border-radius: 25px;
}

a.gallerylink:link {color:rgb(0, 0, 0); text-decoration: underline;}
a.gallerylink:visited {color:rgb(0, 0, 0); text-decoration: underline;}
a.gallerylink:hover {color: red; text-decoration: underline;}







.bottominfo{
    border-radius: 25px;
    margin-top: 1%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }
    .bottom::-webkit-scrollbar{
        display: none;
    }

    .info{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: auto;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    a.bottomlink:link {color:#121d83; text-decoration: underline;}
    a.bottomlink:visited {color:#121d83; text-decoration: none;}
    a.bottomlink:hover {color:#279494; text-decoration: none;}

    .personalcontact{
        flex: 33%;
        max-width: 33%;
        padding: 5px;
        height: 100%;   
    }

    .acccontact{
        flex: 34%;
        max-width: 34%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
        overflow-x: scroll;
    }
    .acccontact::-webkit-scrollbar{
        display: none;
    }


    .karlijn{
        flex: 33%;
        max-width: 33%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }

    span.contactblack{
        font-size: 140%;
        color: rgb(0, 0, 0);
        margin: 1px;
        text-align: center;
    }

    span.contactblue{
        font-size: 140%;
        color: #0d1988;
        margin: 1px;
        text-align: center;
}


.bottomnotice{
    border-radius: 25px;
    margin-top: 0.5%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    }
    .bottomnotice::-webkit-scrollbar{
        display: none;
    }

    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: auto;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    .noticetext{
        flex: 35%;
        max-width: 35%;
        padding: 5px;
        height: auto;   
    }

    .artcredit{
        flex: 15%;
        max-width: 15%;
        padding: 5px;
        height: auto;  

        border-style: none none none dashed;
    }

    .artlinks{
        width: 100%;
        height: auto;
    }

    .acclogo{
        flex: 15%;
        max-width: 15%;
        padding: 5px;
        height: auto;
        border-style: none none none dashed;
    }
    img.bottomacclogo{
        max-width: 100%;
        padding-top: 12.5%;
    }

    .amclogo{
        flex: 35%;
        max-width: 35%;
        padding: 5px;
        height: auto;
    }
    img.bottomamclogo{
        max-width: 100%;
        padding-top: 17.5%;
}


.bottomlogos{
    border-radius: 25px;
    margin-top: 0.5%;
    width: 100%;
    height: auto;   
    padding: 5px; 
    background-color: rgba(255, 255, 255, 0.63);
    overflow-y: hidden;
    }

    .logos{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        border-radius: 25px;
        height: 100%;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.322);
        border: solid;
    }

    .unraid{
        flex: 13%;
        max-width: 13%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .docker{
        flex: 14%;
        max-width: 14%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .mariadb{
        flex: 10%;
        max-width: 10%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .nextcloudlogo{
        flex: 10%;
        max-width: 10%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .jellyfinlogo{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .handbrake{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }
    
    .ytdl{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .ytdlp{
        flex: 9%;
        max-width: 9%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .delugevpn{
        flex: 7%;
        max-width: 7%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .protonvpn{
        flex: 7%;
        max-width: 7%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .nginx{
        flex: 8%;
        max-width: 8%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
    }

    .cloudflare{
        flex: 12%;
        max-width: 12%;
        padding: 5px;
        height: 100%;   
        overflow-y: hidden;
}




@media (max-width: 1200px){
    .left{
        flex: 25%;
        max-width: 25%;
    }
 
    .right{
        flex: 74%;
        max-width: 74%;
    }



    .column1, .column2{
        flex:  49%;
        max-width: 49%;
        margin: 0.5%;
        }
        .item1, .item2{
            flex: 98;
            max-width: 98%;
    }

    .column3{
        flex: 99%;
        max-width: 99%;
        margin: 0.5%;

        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        }
        .item3{
            flex: 49%;
            max-width: 49%;

            margin-left: 0.5%;
    }
}






@media (max-width: 800px){
    body {
        padding: 2px;

        height: calc(100% - 60px);
        top: 51px;
        position: fixed;

        font-size: 75%;
    }

    .sidebar{
        display: none;
    }

    /* Mobile Menu Bar - <800px*/
    .menubar{
        display: flex;
        flex-direction: row;
        height: 50px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #212121c2;
        overflow: hidden;
        padding: 5px;
        backdrop-filter: blur(5px);
        }
    
        .mainmenu{
        width: 100%;
        height: 100%;
        display: block;

        display: flex;
        flex-direction: row;
        }

        .menudiv{
            flex: 20%;
            max-width: 20%;

            /* Controls Link Font Size */
            font-size: 250%;
        }

        .menudiv a {
            height: 45px;
            width: 100%;
            border-style: none;
            border-radius: 15px;;
        
            cursor: pointer;
            background-color: #006eff00;

            color: white;
            font-family:'Sofia Sans', Times New Roman;


            padding: 5px;
            font-weight: lighter;
            text-decoration: none;
        }
        .menudiv a:hover {
            background-color: #d6c5c9b9;
        }
        .menudiv a:visited{
            color: white;
    }



    /* Mobile Menu */
    .mobilemenu{
        width: 100%;
        display: none;
        flex-direction: column;
        text-align: center;

        overflow-y: hidden;
        padding-top: 5px;

        font-size: 75%;
        }
    
        .menuspan{
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
    
        .menuleft{
        width: 50%;
        }
    
        .menuright{
        width: 50%;
        }
    
        .mobilemenu a {
            width: 100%;
            border-style: none;
            border-radius: 15px;
        
            cursor: pointer;
            background-color: #006eff00;
        
            color: white;
            font-family:'Sofia Sans', Times New Roman;
        
            padding: 5px;
            font-size: 200%;
            font-weight: lighter;
            text-decoration: none;
        }
        .mobilemenu a:hover {
            background-color: #d6c5c9b9;
        }
        .mobilemenu a:visited{
            color:rgba(255, 255, 255, 0.63);
    }




    .main{
        max-width: 100%;

        padding: 5px;
        background-color: #D6C5C9a4;
        overflow-y: scroll;

        margin: 5px;
        }

        .mainflex{
            display: flex;
            flex-direction: column;
    }


    .left{
        display: none;
    }

    .right{
        flex: 100%;
        max-width: 100%;
    }



    .column1, .column2, .column3{
        flex:  99%;
        max-width: 99%;
        margin: 0.5%;   
        flex-direction: column;
        flex-wrap: nowrap;
        }
        .item1, .item2, .item3{
            flex: 98;
            max-width: 98%;
    }



    .info{
        display: flex;
        flex-direction: column;
        }

        .personalcontact{
            flex: 100%;
            max-width: 100%;
        }

        .acccontact, .karlijn{
            flex: 100%;
            max-width: 100%;
            border-style: dashed none none none;
    }


    .notice{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        }   

        .noticetext, .artcredit{
            flex: 100%;
            max-width: 100%;
            border-style: none none dashed none;
        }

        .acclogo{
            flex: 30;
            max-width: 30%;
            border-style: none;
        }
        img.bottomacclogo{
            max-width: 100%;
            padding-top: 0%;
        }

        .amclogo{
            flex: 70%;
            max-width: 70%;
        }
        img.bottomamclogo{
            max-width: 100%;
            padding-top: 10%;
    }


    .bottomlogos{
        margin-top: 1%;
        }

        .bottomlogos::-webkit-scrollbar{
            display: none;
        }

        .logos{
            flex-wrap: wrap;
        }

        .unraid, .docker, .mariadb, .nextcloudlogo, .jellyfinlogo, .handbrake, .ytdl, .ytdlp, .delugevpn, .protonvpn, .nginx, .cloudflare{
            flex: 16.6%;
            max-width: 16.6%;
        }
}